Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Moving additional images [SOLVED]
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Ok, I am trying to move the additional images in order to create an image gallery away from the main product image.

1. I created template/catalog/product/view/more.phtml to put the code in its own file.
2. I modified layout/catalog.xml to look like this:

<catalog_product_view>
        <!-- 
Mage_Catalog -->
        <
reference name="root">
            <
block type="catalog/product_view" name="product.header" template="catalog/product/productheader.phtml" as="productheader"/>
            <
action method="setTemplate"><template>page/2columns-left.phtml</template></action>
             
        </
reference>
        <
reference name="head">
            <
action method="addJs"><script>varien/product.js</script></action>
        </
reference>
        <
reference name="content">
          
         <
reference name="left">
            <
block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
            <
block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml"/>
        </
reference>
                <
block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
                
                <
block type="catalog/product_view_additional" name="product.info.additional" as="product_additional_data" />
                <
block type="catalog/product_view_more" name="product.info.more" as="more" template="catalog/product/view/more.phtml"/>
            </
block>
        </
reference>
    </
catalog_product_view>

But it won’t display.  Am I forgetting a step?

 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

If you use block type “catalog/product_view_more”, you also need to write a Catalog/Block/Product/View/More.php class for that block. But maybe it should be a “catalog/product_view_media” block instead?

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Ok, if I change it to

<block type="catalog/product_view_media" name="product.info.media" as="more" template="catalog/product/view/more.phtml"/>

it puts the additional views in place of the main product image.

If I create app/code/core/Mage/Catalog/Block/Product/View/More.php to look like this:

class Mage_Catalog_Block_Product_View_More extends Mage_Catalog_Block_Product_View_Abstract
{
    
public function getGalleryImages()
    
{
        $collection 
$this->getProduct()->getMediaGalleryImages();
        return 
$collection;
    
}

    
public function getGalleryUrl($image=null)
    
{
        $params 
= array('id'=>$this->getProduct()->getId());
        if (
$image{
            $params[
'image'$image->getValueId();
            return 
$this->getUrl('*/*/gallery'$params);
        
}
        
return $this->getUrl('*/*/gallery'$params);
    
}
}

I receive no errors, but I also receive no additional image views.  Am I still missing something?

 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

If you use the media block, then you don’t need to make a new block class.

You just need the xml declaration and the template. In your xml, you should probably change the name “product.info.media” to “product.info.more”.

In your template more.phtml, you can print out the images like in media.phtml.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Thanks for continuing to help!

When I change the code to this:

<block type="catalog/product_view_media" name="product.info.more" as="more" template="catalog/product/view/more.phtml"/>

Then the additional images don’t display anywhere.

 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

Where do you want the images to display?

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Below the share links and size bars on http://www.minervapromotions.com/gladrag/sucka-free.html/

 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

Well, I’m not sure where in the template structure that is, but if it is view.phtml, then why not just keep the xml as in the default template and then move <?php echo $this->getChildHtml('media') ?> down?

(By the way, those availability bars are awesome!)

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Thanks!  dan_w actually helped me with the availability bars here: http://www.magentocommerce.com/boards/viewthread/9510/

I moved <?php echo $this->getChildHtml('media') ?> so view.phtml looks like this now:

<div class="padder">
  <
div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
  
<?php $_product=$this->getProduct() ?>
  
  
<div class="product-info-box">
    <
form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form">
      <
fieldset>
      <
input type="hidden" name="product" value="<?php echo $_product->getId() ?>"/>
      <
input type="hidden" name="related_product" id="related-products-field" value=""/>
      </
fieldset>
      
<?php echo $this->getChildHtml('alert_urls'?> <?php echo $this->getChildHtml('product_type_data'?> <br/>
    </
form>
    <
div class="custom_gallery"><?php echo $this->getChildHtml('media'?></div>
    <
script type="text/javascript">
                var 
productAddToCartForm = new VarienForm('product_addtocart_form');
                
productAddToCartForm.submit = function() {
                    
if(this.validator.validate()) {
                        this
.form.submit();
                    
}
                }
.bind(productAddToCartForm);
            
</script>
  
</div>
  <
div class="clear"></div>
<
br/>
<
br/>

But all it displays is the css, not the actual images.

 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

Do you have something like this in catalog.xml? (this is from the default template)

...
<
block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
    <
block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
    ...
</
block>
 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Ok, when I duplicated that line so that it was in the main area, then it appeared - but the problem is then it pulls the main image.

<reference name="content">
      <
reference name="left">
        <
block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
        <
block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml"/>
      </
reference>
      <
block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
        <
block type="catalog/product_view_additional" name="product.info.additional" as="product_additional_data" />
        <
block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
      </
block>
    </
reference>

If I change it so the template is more.phtml then it takes the main image away from the left side.

<reference name="content">
      <
reference name="left">
        <
block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
        <
block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml"/>
      </
reference>
      <
block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
        <
block type="catalog/product_view_additional" name="product.info.additional" as="product_additional_data" />
        <
block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/more.phtml"/>
      </
block>
    </
reference>
 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

So instead of the media block displaying all images, you want:

- a block for the main image
- a block for all the gallery images

Both blocks in the view.phtml template.

Is that right?

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Also, what I’m trying to do is get an image gallery similar to this: http://www.hotnessfactory.com/store/fragileheart

Only it won’t be as wide and the thumbnails will be below although they should show as a different image than what will actually be displayed by the large box, if that makes sense.

I’m uploading an image to help clarify.

Image Attachments
gallery.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 
Anders Rasmussen - 11 June 2008 09:53 AM

So instead of the media block displaying all images, you want:

- a block for the main image
- a block for all the gallery images

Both blocks in the view.phtml template.

Is that right?

Yes, that’s right. smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

Okay, I managed to split the media block into two succesfully:

1. In view.phtml, make sure you have <?php echo $this->getChildHtml('media') ?> and <?php echo $this->getChildHtml('more') ?>

2. In catalog.xml, make sure you have this:

<block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
    <
block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
    <
block type="catalog/product_view_media" name="product.info.more" as="more" template="catalog/product/view/more.phtml"/>
    ...

3. Copy media.phtml to more.phtml.

4. Remove the bottom stuff in media.phtml that displays the gallery.

5. Remove the top stuff in more.phtml that displays the main image.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Hooray!  Thank you so much!!!

I knew I was close - the only things I was originally missing from those instructions was this: <?php echo $this->getChildHtml('more') ?> and keeping the block as media.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top