Q:

Working with Magento Layouts

Recently I've begun working with Magento 1.6.1 for a new position I took on at an e-commerce company local to me. I have previous experience but it's primarily with Wordpress.
While I "know" Magento and can wrap my head around how it works, of course there are still hurdles. Luckily I have a good enough boss that lets me get my hands dirty in the code and really learn more and more everyday.
Recently though, Layouts have been my new obstacle. The trouble is I'm working within code that was either done by someone else or someone else's modification to the code. I'm not the first Webmaster here...
I'm having difficulty moving the "bottom.phtml" block so it renders beneath the "media.phtml" (where the product image / thumbnails render). The code is the following:
    <catalog_product_view translate="label">
    <label>Catalog Product View (Any)</label>
    <!-- Mage_Catalog -->
    <reference name="root">
        <action method="setTemplate"><template>page/1column.phtml</template></action>
    </reference>
    <reference name="head">
        <action method="addJs"><script>varien/product.js</script></action>

        <action method="addJs"><script>virtualpaginate.js</script></action>

        <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>

    </reference>
    <reference name="content">
        <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
            <!--
            <action method="addReviewSummaryTemplate"><type>default</type><template>review/helper/summary.phtml</template></action>
            <action method="addReviewSummaryTemplate"><type>short</type><template>review/helper/summary_short.phtml</template></action>
            <action method="addReviewSummaryTemplate"><type>...</type><template>...</template></action>
            -->
            <block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
            <block type="core/text_list" name="alert.urls" as="alert_urls" translate="label">
                <label>Alert Urls</label>
            </block>

            <action method="setTierPriceTemplate"><template>catalog/product/view/tierprices.phtml</template></action>
            <block type="catalog/product_list_related" name="catalog.product.related" as="related" template="catalog/product/list/related.phtml"/>
            <block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml">
                <action method="setColumnCount"><columns>4</columns></action>
                <action method="setItemLimit"><type>upsell</type><limit>4</limit></action>
            </block>

            <block type="catalog/product_view_additional" name="product.info.additional" as="product_additional_data" />
            <block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml"/>
            <block type="catalog/product_view_attributes" name="product.attributes" as="additional" template="catalog/product/view/attributes.phtml"/>
            <block type="catalog/product_view" name="product.info.addto" as="addto" template="catalog/product/view/addto.phtml"/>
            <block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>

            <block type="catalog/product_view" name="product.info.options.wrapper" as="product_options_wrapper" template="catalog/product/view/options/wrapper.phtml" translate="label">
                <label>Info Column Options Wrapper</label>
                <block type="core/template" name="options_js" template="catalog/product/view/options/js.phtml"/>
                <block type="catalog/product_view_options" name="product.info.options" as="product_options" template="catalog/product/view/options.phtml">
                    <action method="addOptionRenderer"><type>text</type><block>catalog/product_view_options_type_text</block><template>catalog/product/view/options/type/text.phtml</template></action>
                    <action method="addOptionRenderer"><type>file</type><block>catalog/product_view_options_type_file</block><template>catalog/product/view/options/type/file.phtml</template></action>
                    <action method="addOptionRenderer"><type>select</type><block>catalog/product_view_options_type_select</block><template>catalog/product/view/options/type/select.phtml</template></action>
                    <action method="addOptionRenderer"><type>date</type><block>catalog/product_view_options_type_date</block><template>catalog/product/view/options/type/date.phtml</template></action>
            </block>
                    <block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>
                </block>
            <block type="catalog/product_view" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="catalog/product/view/options/wrapper/bottom.phtml" translate="label">
                <label>Bottom Block Options Wrapper</label>
                <action method="insert"><block>product.tierprices</block></action>
                <block type="catalog/product_view" name="product.clone_prices" as="prices" template="catalog/product/view/price_clone.phtml"/>
                <action method="append"><block>product.info.addtocart</block></action>
            </block>

            <block type="core/template_facade" name="product.info.container1" as="container1">
                <action method="setDataByKey"><key>alias_in_layout</key><value>container1</value></action>
                <action method="setDataByKeyFromRegistry"><key>options_container</key><key_in_registry>product</key_in_registry></action>
                <action method="append"><block>product.info.options.wrapper</block></action>
                <action method="append"><block>product.info.options.wrapper.bottom</block></action>
            </block>
            <block type="core/template_facade" name="product.info.container2" as="container2">
                <action method="setDataByKey"><key>alias_in_layout</key><value>container2</value></action>
                <action method="setDataByKeyFromRegistry"><key>options_container</key><key_in_registry>product</key_in_registry></action>
                <action method="append"><block>product.info.options.wrapper</block></action>
                <action method="append"><block>product.info.options.wrapper.bottom</block></action>
            </block>
            <action method="unsetCallChild"><child>container1</child><call>ifEquals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action>
            <action method="unsetCallChild"><child>container2</child><call>ifEquals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action>
        </block>
    </reference>
    <reference name="right">
        <block type="catalog/product_list_related" name="catalog.product.related" before="-" template="catalog/product/list/related.phtml"/>
    </reference>
</catalog_product_view>

Now, as I said, I'm learning Magento as I go, to a degree, and with my Wordpress themeing knowledge it's definitely given me an advantage. But, trying to decode this has proven a tough roadblock. Maybe I'm over analyzing it but, I just can't wrap my head around a few things here: 1) How does it know to float the "media.phtml" left and the product options and "bottom.phtml" on the right? 2) How can I just split the "bottom.phtml" off from the options so I can move it beneath the "media.phtml" (product images) and then begin styling it?
I love Magento, but man is it a rough one to pick up.
Thank you to anyone that can shed any light or provide a solid resource! All the tutorials, resources I find are great but deal with a fresh install so there isn't as much code. With this, I'm digging in code someone else worked on and honestly... it could be really bad for all I know!
Thanks again!

A:

The XML part mostly just makes certain blocks available for the template files' use. (Of course there are exceptions to every rule and in the cases of a core/text_list block or a template calling $this->getChildHtml('') the order of the XML does take effect)
Take a look at template/catalog/product/view.phtml and you will see lots of HTML bits and lines like...
<?php echo $this->getChildHtml('media') ?>

...this is how the blocks are positioned. Now bottom.phtml is used by product_options_wrapper_bottom but that block is not used directly, it is appended to container1 and container2 blocks which are outputted like this:
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
    <?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>

All you need to do is edit catalog/product/view.phtml so that bit is lower down the page. Of course don't edit the base template directly but copy that file to an equivalent path in your site's theme.
The product view page is perhaps the most complex in a default Magento install, it's a fine place to start your position. Perhaps a better place to start is with Alan Storm's No Frills Magento Layout. I probably won't be the only to recommend it.

