1

I am trying to change Image on Hover in all product. Any help regarding this.It's not about product placeholder. Problem is that I am not able to get another type of image. product_page_large_image and product_base_image is same output but when I am trying with product_small_image, it's not working.

All thing oK, I have to get another image from the backend. For example, product Have two Image one is default show and one is showing after hover.

<?php foreach ($_productCollection as $_product): ?>
<?php echo($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
<div class="product-item-info" data-container="product-grid"  >
    <?php // Product Image    ?>
    <a href="<?php echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
                        <span style="width:270px;" class="product-image-container">
                            <span style="padding-bottom: 137%;" class="product-image-wrapper" >
                                <?php
                                $imageUrl = $this->helper('Magento\Catalog\Helper\Image')
                                    ->init($_product, 'product_page_image_large')
                                    ->keepAspectRatio(TRUE)
                                    ->keepFrame(FALSE)
                                    ->resize(270, 404)
                                    ->getUrl();

                                $imageUr2 = $this->helper('Magento\Catalog\Helper\Image')
                                    ->init($_product, 'product_base_image')
                                    ->keepAspectRatio(TRUE)
                                    ->keepFrame(FALSE)
                                    ->resize(270, 404)
                                    ->getUrl();
                                ?>
                                <img src="<?php echo $imageUrl; ?>" onmouseover="this.src='<?php echo $imageUr2; ?>';" onmouseout="this.src='<?php echo $imageUrl; ?>';"/>
                                <!-- <img class="product-image-photo" src="<?php //echo $imageUrl; ?>" onmouseover="alert('And yet another one!')" />
                                <!--<div class="bl_black"></div><!-->
                           </span>
                        </span>
    </a>
    <?php endforeach; ?>
3

Please check with below code.

<?php foreach ($_productCollection as $_product): ?>
<?php echo ($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
<div class="product-item-info" data-container="product-grid">
    <a href="<?php echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
        <span style="width:270px;" class="product-image-container">
            <span style="padding-bottom: 137%;" class="product-image-wrapper">
            <?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
                $product = $objectManager->create('Magento\Catalog\Model\Product')->load($_product->getId());
                $images = $product->getMediaGalleryImages();
                $imgCNT = 1;
                foreach ($images as $child) {
                    if ($imgCNT == 1) {
                        $imgurl1 = $child->getUrl();
                    } elseif ($imgCNT == 2) {
                        $imgurl2 = $child->getUrl();
                    } else {
                        break;
                    }
                    $imgCNT++;
                }
                $imageUrl = $this->helper('Magento\Catalog\Helper\Image')->init($_product, 'product_page_image_large')->keepAspectRatio(true)->keepFrame(false)->resize(270, 404)->getUrl(); ?>
                <img class="product-image-photo" src="<?php echo $imageUrl; ?>"
                     onmouseover="this.src='<?php echo ($imgurl2) ? $imgurl2 : $imageUrl ?>';"
                     onmouseout="this.src='<?php echo $imageUrl; ?>';"/>
                <div class="bl_black"></div>
            </span>
        </span>
    </a>
</div>
<?php endforeach;?>
  • Yoges@ when I used this code not getting any image or product – sanjay Apr 19 '17 at 9:22
  • Hello yogesh@->init($_product, 'product_page_image_large') is working but when i change this ->init($_product, 'product_page_image_small') it's not working any idea – sanjay Apr 19 '17 at 10:19
  • hello yogesh you there? – sanjay Apr 25 '17 at 8:15
  • Hello sanjay.., – Yogesh Apr 25 '17 at 8:16
  • This code is working , but need two or three time to refresh then it's working@ i think any js problem, why needs two or three time refresh the website – sanjay Apr 25 '17 at 8:44
1

I made this to work in my site https:/www.gamesunited.com.kw

1. First I added Attribute 'hover_image' with Catalog Input Type for Store Owner as Media Image

2. Then in the attribute setting StoreFront properties "Used in Product Listing" is set as 'Yes'

There is bug and this option does not show in admin attribute setting page. Refer the image to show that. enter image description here

  1. In my custom theme etc/view.xml I added

enter image description here 4. In my custom theme Magento_Catalog/templates/product/list.phtml I added following

$_imagehelper = $this->helper('Magento\Catalog\Helper\Image');
$hoverimg = 'category_page_grid_hover';
$hoverimg = 'category_page_list_hover';

enter image description here and then

<a href="<?php echo $_product->getProductUrl() ?>" tabindex="-1">
  <?php $productImage = $_imagehelper->init($_product, $image);
        $productImageUrl = $productImage->getUrl(); ?>
<img class="product-image-photo default_image" src="<?php echo $productImageUrl; ?>" alt="<?php echo $productImage->getLabel(); ?>"/>

 <?php $productHoverImage = $_imagehelper->init($_product, $hoverimg);
      $productHoverImageUrl = $productHoverImage->getUrl(); ?>
<?php if($productImageUrl != str_replace("/thumbnail/","/small_image/",$productHoverImageUrl)): ?>
<img class="product-image-photo hover_image" src="<?php echo $productHoverImageUrl; ?>" alt="<?php echo $productHoverImage->getLabel(); ?>"/>
<?php endif; ?>                        
</a>

5. and then CSS Styling

.products-grid .item .item-inner .box-image:hover .hover_image,
.products-list .item .item-inner .box-image-list:hover .hover_image
{
   opacity: 1;
    overflow: hidden;
    transform: scale(1);
    transition: all 0.3s ease 0s;
    visibility: visible;
}

.hover_image
{
 left: 0;
    opacity: 1;
    position: absolute;
    text-align: center;
    top: 0;
    transform: scale(0);
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 100%;
}
0

You have to add code to product listing file on [YourTheme]=>[Magento_Catalog]=>[templates]=>[product]=>[list.phtml]

Get another image of product using the code below:

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->create('Magento\Catalog\Model\Product')->load($_product->getId());        
$images = $product->getMediaGalleryImages();
$imgCNT = 1;
foreach($images as $child){
if($imgCNT==1)
{$imgurl1=$child->getUrl();}
elseif($imgCNT==2)
{$imgurl2=$child->getUrl(); }
else
{break;}
$imgCNT++;
}

and add that both image url on product image like below added image

<img src="<?php echo $imgurl1; ?>" onmouseover="this.src='<?php echo $imgurl2; ?>';" onmouseout="this.src='<?php echo $imgurl1; ?>';"/>

Hope this will be helpful.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.