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; ?>
Related
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 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.
We have a Joomla based school website, we have a owl carousel at the bottom that scrolls along.
I would like to make the images contained links to their to websites.
I've looked everywhere to find where the code for the owl carousel is but i cant find it. There is a module for it but it hasn't anywhere to alter the code.
The site URL is: http://www.kibworthprimary.org.uk
This is the code in the tmpl folder inside default.php
<div class="owlcarousel<?php echo $moduleclass_sfx ?> <?php echo $alias ?>" <?php if ($params->get('backgroundimage')) : ?> style="background-image:url(<?php echo $params->get('backgroundimage');?>)"<?php endif;?>>
<?php echo $module->content;?>
<div id="owl-carousel-<?php echo $module->id; ?>" class="owl-carousel owl-theme">
<?php foreach($gallery as $count=>$photo):
$title = JString::ucwords(str_replace("-", " ", strstr($photo->filename, '.', 1))); ?>
<div class="item">
<img class="lazyOwl img-responsive" src="<?php echo $photo->thumbImageFilePath; ?>" data-src="<?php echo $photo->thumbImageFilePath; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>" />
</div>
<?php endforeach; ?>
</div>
In the end i looked at the HTML the module was producing and used that as a base. It was set to look at a directory of images and display them there but these images will not be changing and so that function wasn't needed.
All is now working by simple wrapping a href tag around the item lists.
In Magento, does anyone know how to limit the amount of thumbnails to be shown under the main product image?
Is this something that is easily controlled via the admin or should I go into media.phtml and edit the php?
<div class="more-views">
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>" onclick="$('image').src = this.href; return false;">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(103, 103); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
The quickest way would be
<div class="more-views">
<ul>
<?php $limit = 5; ?>
<?php $ct = 0; ?>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>" onclick="$('image').src = this.href; return false;">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(103, 103); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
</a>
</li>
<?php
if(++$ct >= $limit)
break;
?>
<?php endforeach; ?>
</ul>
</div>
Yes, you can easily control via the admin, which images you want to show under the main product image, but you need to set for all the products individually.
Simply go to images tabs of add/edit product. click on the exclude checkbox which you don't want to show on image gallery and then hit the save button.
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 } ?>