• Closed by: Fred
  • Closed on: 28.05.20, 00:18
  • Reason: Closed
  • Comment: Glad to help!

Ticket #17296 - images same category product page

hi

I was doing a site speed check and among other things he doesn’t like the reduction of large images “produced in the same category”,
is it not possible to have them load the smaller image instead of loading the large one and then reduce it?

best regards
Ilario

Comments

Fred 10 Apr 2020, 14:18

Open the file
/themes/alysum/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl
Add image size like this

{include file="catalog/_partials/miniatures/product.tpl" product=$product image_size='medium_default'}
ilario santamaria 10 Apr 2020, 15:49

hi
I changed the size of the image in the file but it doesn’t seem to work

<section class="product-categories products-carousel wide oh">
  <div class="relative">
    <h4 class="module-title">
      <span>{l s='In the same category' d='Modules.Categoryproducts.Shop'}</span>
    </h4>
    <div class="products pk-carousel view_grid products-block pk-carousel-categories" data-desktopnum="4" data-tabletnum="3" data-phonenum="2" data-loop="0" data-autoplay="0" data-navwrap="0" data-name="categories">
      {foreach from=$products item="product"}
   		{include file="catalog/_partials/miniatures/product.tpl" product=$product image_size='medium_default'}
      {/foreach}
    </div>
  </div>
</section>

https://bustedesign.it/107/busta-ebe.jpg is resized in HTML or CSS from 800×800 to 304×304. Serving a scaled image could save 17.3KiB (85% reduction).
image

in

<img src="https://bustedesign.it/30/busta-gea.jpg" class="smooth05 cover-image" alt="Busta Gea - Martellata Latte" data-full-size-image-url="https://bustedesign.it/216**-large_default**/busta-gea.jpg">
Fred 11 Apr 2020, 10:12

That’s because you have modified file /public_html/themes/alysum/templates/catalog/_partials/miniatures/product.tpl
Try to use original one

ilario santamaria 13 Apr 2020, 16:07

hi

yes I have changed this part of code

 {block name='product_thumbnail'}
      {if $product.cover}
        <a href="{$product.canonical_url}" class="relative{if Configuration::get('pm_hover_image') == true}{foreach from=$product.images item=image}{if (($image.cover != 1) && ($product.cover.id_image != $image.id_image))} subimage-true{break}{/if}{/foreach}{/if}">
          {if $product.cover}
            {include file='catalog/_partials/product-image.tpl' image=$product.cover type=$type}
            {if Configuration::get('pm_hover_image') == true}
              {foreach from=$product.images item=image}
                {if (($image.cover != 1) && ($product.cover.id_image != $image.id_image))}
                  {include file='catalog/_partials/product-image.tpl' image=$image type=$type}
                  {break}
                {/if}
              {/foreach}
            {/if}
          {/if}
          <span></span>
        </a>
      {else}
        <a href="{$product.canonical_url}" class="thumbnail product-thumbnail">
          <img src="{$urls.no_picture_image.bySize.home_default.url}" class="w100" />
        </a>
      {/if}
      {/block}

with this

 {block name='product_thumbnail'}
      <a href="{$product.url}" class="relative{foreach from=$product.images item=image}{if (($image.cover != 1) && ($product.cover.id_image != $image.id_image))} subimage-true{break}{/if}{/foreach}">
        
		{assign var='allProductImages' value=Image::getImages($language.id, $product.id)}
		
		{if  isset($allProductImages[0])}
                 
		    <img src="{$link->getImageLink($product.link_rewrite, $product.id_product|cat:"-"|cat:$allProductImages[0].id_image)}"  class="smooth05 cover-image" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}" data-full-size-image-url="{$product.cover.large.url}" />
 
		  {if Configuration::get('pm_hover_image') == true AND isset($allProductImages[1])}
		 <img src="{$link->getImageLink($product.link_rewrite, $product.id_product|cat:"-"|cat:$allProductImages[1].id_image)}" class="smooth05 cover-image" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}" data-full-size-image-url="{$product.cover.large.url}" />
    {/if}
		  
        {else}
          <img src="{$urls.no_picture_image.bySize.large_default.url}" style="width:100%;">
        {/if}
      </a>
      {/block}

because I needed to show the 1 and the second image and not the cover image which is different, but here I am not going to touch the sizes and resize the images to 300 x300, I cannot find where they come down

Fred 13 Apr 2020, 16:15

I suppose this is a link to product image

{$product.cover.large.url}

or

{$product.cover.medium.url}
ilario santamaria 13 Apr 2020, 16:27

I tried to change, but the large 800×800 always passes and somewhere reduces it to 300×300

Attachments:

imm resize.jpg (191.5 KiB)
Fred 27 Apr 2020, 18:15

As I can see the image is changed to bigger one successfully https://take.ms/m1GTn