Magento: Display all images on the product page (view.phtml) - magento

I can see how media.phtml (with Cloud Zoom extension) is listing all the images on the product page by help of $this->getGalleryImages():
<?php foreach ($this->getGalleryImages() as $_image): ?>
<?php ... ?>
<?php endforeach; ?>
But when I use $this->getGalleryImages() in view.phtml which is the catalog product page template, it doesn't return or output anything. However, this would only print the first image on the product page:
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->setWatermarkImageOpacity(0)->resize(300, null);?>" alt="<?php echo $this->htmlEscape($this->getImageLabel());?>" title="<?php echo $this->htmlEscape($this->getImageLabel());?>" />
My question is how can I iterate through and display all the product images on the product page (view.phtml, not media.phtml)? Basically, I want them all on display on the page without thumbnailing or zooming or anything, just plain big images, one after another.
Thanks!

Here is the code for showing product image gallery..
Thanks,
Jeet
<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
<?php if($_images){?>
<?php $i=0; foreach($_images as $_image){ $i++; ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(108,90); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" /><?php } ?>
<?php } ?>

Related

Magento Fishpig how to get post image by id

I have use Fishpig extension in my website.
But i need to show Next and Previous link with it's appropriate featured image.
Can anyone please provide appropriate suggestion for this requirement.
Thanks,
The following code loads a post with the ID of 5 and if a featured image is set, it displays the image and a link to the post.
<?php $post = Mage::getModel('wordpress/post')->load(5) ?>
<?php if ($post->getId()): ?>
<?php if ($image = $post->getFeaturedImage()): ?>
<a href="<?php echo $post->getPermalink() ?>">
<img src="<?php echo $image->getAvailableImage() ?>" alt="<?php echo $this->escapeHtml($post->getPostTitle()) ?>"/>
</a>
<?php endif; ?>
<?php endif; ?>
You can find more information on how to get different sized images from the featured image object at the URL below:
https://fishpig.co.uk/magento/wordpress-integration/post-images/
The following article explains how to get an image object from a post object.
https://fishpig.co.uk/magento/wordpress-integration/post-images/
Specifically:
<?php // $post is already defined ?>
<?php if ($featuredImage = $post->getFeaturedImage()): ?>
<a href="<?php echo $post->getPermalink() ?>">
<img src="<?php echo $featuredImage->getAvailableImage() ?>" alt="<?php echo $this->escapeHtml($post->getPostTitle()) ?>"/>
</a>
<?php endif; ?>

Product images are serving from different paths on Product detail page and in sitemap

Product images are serving from different paths in view page & in sitemap.
1) product view page : media/catalog/product/W/i/image-name.jpg : link1
2) http://sitename.com/media/sitemap.xml : media/product/ee7/image-name.jpg : link2
but i want product images should serve from same path in both links:
media.phtml
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$dexxtz = Mage::helper('productzoom');
$dexxtz->getCss();
$dexxtz->getJs();
?>
<ul id="etalage">
<li>
<img class="etalage_thumb_image"
src="<?php echo Mage::getModel('catalog/product_media_config')->getMediaUrl($_product->getImage()); ?>" />
<img class="etalage_source_image" title="<?php echo $_product->getImageLabel(); ?>" src="<?php echo $dexxtz->getImageFeatured($this->helper('catalog/image')->init($_product, 'image'), true); ?>" />
</li>
<?php
foreach ($this->getGalleryImages() as $_image) {
if(Mage::registry('current_product')->getImage() != $_image->getFile()) { ?>
<li>
<img class="etalage_thumb_image" src="<?php echo $dexxtz->getImageFeatured($this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())); ?>" />
<img class="etalage_source_image" title="<?php echo $_image->getLabel(); ?>" src="<?php echo $dexxtz->getImageFeatured($this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()), true); ?>" />
</li>
<?php
}
}
?>
</ul>
For delivering images in the frontend you should always use this call <?php echo Mage::getModel('catalog/product_media_config')->getMediaUrl( $_product->getSmallImage()); ?> as it utilizes the Magento cache, if enabled.
Definately not default Magento is this path media/product/ee7/image-name.jpg - all product media related stuff is in media/catalog/product. It might be that you have an extension that uses media/product to store and server images - but this is not default Magento.
Please check your extensions, especially how the links in the sitemap are created.

Check If Magento Product Has Thumbnail

I want to display a thumbnail image on a product page only if it exists. Currently it shows the placeholder image if a thumbnail image is not selected. I suppose I need to just wrap that around an if statement but do not know the method (if there is one) to check if the thumbnail image exists. Here is the code used to display the thumbnail:
<img id="slide-img-1" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(163, 100); ?>" /></a>
Use the following:
<?php if(!($_item->getThumbnail() == "no_selection")): ?>
<div class="image-holder">
<img class="thumbnail-image"
src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->constrainOnly(true)->resize(800); ?>"
alt=""
title="" />
</div>
<?php endif; ?>
If a thumbnail exists for the product then it should be set on the $_product instance. So you can use that in your condition, see below.
<?php if($_product->getThumbnail()): ?>
<img id="slide-img-1" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(163, 100); ?>" /></a>
<?php endif; ?>

How to call product information?

I am trying to get a static block to pull information. Using Magento 1.7 CE.
In the static box I am using the following code:
<div>{{block type="catalog/product_list" category_id="6" template="catalog/product/listmenu.phtml"}}</div>
I want this to display the product name, price, and image... What do I list in the listmenu.phtml so it pulls the correct information?
Given that the block type is "catalog/product_list", you can access the functionality of the block Mage_Catalog_Block_Product_List, i.e. a product collection loaded by the category id. So the approximate code outputting a list of products and their names, images, and prices would be:
<?php
$_productCollection=$this->getLoadedProductCollection();
foreach ($_productCollection as $_product): ?>
<div>
<h4><?php echo $this->stripTags($_product->getName());?></h4>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135);
?>" width="135" height="135" alt="<?php
echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<?php echo $this->getPriceHtml($_product, true) ?>
</div>
<?php endforeach; ?>

how to write a custom panel displaying categories in magento

I have a category called "Top Products". I wish to display this in a panel on my home page. What is the best way to do this in magento.
** edit **
Thanks sdek, i now have the following. In Home Page / Design.
<block type="catalog/product_list" category_id="13" template="catalog/product/featured.phtml"/>
And it is displaying products. However i have the following issues.
- it's not displaying products from category_id 13, It seems like this value is not being passed thru
- it's only display 2 products. I wish to display all.
featured.phtml
<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
?>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<h2>Featured Products </h2>
<?php $_collectionSize = $_productCollection->count() ?>
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if ($i++%$_columnCount==0): ?>
<ul class="product-grid">
<?php endif ?>
<li class="<?php if(($i-1)%$_columnCount==0): ?> first<?php else: ?> last<?php endif; ?>">
<a class="product-image" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" >
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(85); ?>" class="product-img" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" style="padding-bottom:20px; margin-bottom:20px;" />
</a>
<p><strong><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></strong>
<?php echo $_product->getShortDescription(); ?></p>
<?php echo $this->getPriceHtml($_product, true) ?>
More details
</li>
<?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
</ul>
<?php endif ?>
<?php endforeach ?>
<?php endif; ?
I wouldn't even use a category but this extension instead:
Featured Products
The Featured Products extension mentioned by clockworkgeek is a good idea. But if you don't like that option the easiest thing to do is to add this in your home page cms
{{block type="catalog/product_list" category_id="YOUR_CAT_ID" template="catalog/product/YOUR_MODIFIED_COPY_OF_LIST.phtml"}}
And then make a copy of app/design/frontend///template/catalog/product/list.phtml (I refered to it above as YOUR_MODIFIED_COPY_OF_LIST.phtml) and remove the two lines that say
<?php echo $this->getToolbarHtml() ?>
and remove the entire if-block that outputs the "list mode"... basically the if statement
<?php // List mode ?>
<?php if($this->getMode()!='grid'): ?>
and you should only have the "grid mode" code in there.

Resources