How to specify image dimensions?

[manouki8]

Hello all, I ran a test on gtmetrix.com and it says I should specify image dimensions for faster page loading. However the images it is talking about are in a 'new products' slider on my homepage. How can I specify images for those pictures?

 

I am on PS 1.5.4.1

www.vanstonjewelry.com

[KamranMK]

Hello all, I ran a test on gtmetrix.com and it says I should specify image dimensions for faster page loading. However the images it is talking about are in a 'new products' slider on my homepage. How can I specify images for those pictures?

 

I am on PS 1.5.4.1

www.vanstonjewelry.com

 

Would be great if you could find an answer to this question have the same issue

[Soapa]

Me to.

[preserver]

For the default theme, you specify image dimensions for the home page slider under Modules> Image Slider for your Home Page, I believe.  

 

Manouki8, I can see that your design is using 'featured products' for the slider, so it might not use the native module from prestashop to control the image dimensions.  Is that design custom work or a theme?  

[manouki8]

For the default theme, you specify image dimensions for the home page slider under Modules> Image Slider for your Home Page, I believe.  

 

Manouki8, I can see that your design is using 'featured products' for the slider, so it might not use the native module from prestashop to control the image dimensions.  Is that design custom work or a theme?  

Hi Preserver, thanks for the reply. I am actually using a theme.

[preserver]

Manouki8-

I'm not sure where you alter the image dimensions for 'new products' or 'featured products.'   The modules pages for those two don't specify images, but it might be that they are tied to some of the dimension settings for images on the Preferences> Images page.  Perhaps medium default?  You could try changing those sizes to see if and which setting is linked to new products and featured products.  Does that make sense?  

 

I am working on the 1.5.4 default theme right now, so I don't know if the theme you are using has controls for those dimensions that you can see or set from the back office or not.  

 

I like that theme, by the way.  It is so clean.  What is it and where did you find it?  I've seen so many disappointing ones, but you picked a cool one!

[yaniv14]

What it means is that you need to specify the image size inline, which mean within the <img> tag.

<img src="link_to_image" height="XXX PX" width="XXX PX" alt="name_of_product">

 

what Is marked in red is the specification of image size.

 

So you probably need to hard code the module TPL file.

[manouki8]

Manouki8-

I'm not sure where you alter the image dimensions for 'new products' or 'featured products.'   The modules pages for those two don't specify images, but it might be that they are tied to some of the dimension settings for images on the Preferences> Images page.  Perhaps medium default?  You could try changing those sizes to see if and which setting is linked to new products and featured products.  Does that make sense?  

 

I am working on the 1.5.4 default theme right now, so I don't know if the theme you are using has controls for those dimensions that you can see or set from the back office or not.  

 

I like that theme, by the way.  It is so clean.  What is it and where did you find it?  I've seen so many disappointing ones, but you picked a cool one!

If it was linked to one of the dimension settings (i.e. medium default), wouldn't it already have specified dimensions already? I purchased that theme from themeforest, it is the Millenium theme. Thank you btw.

[Soapa]

What it means is that you need to specify the image size inline, which mean within the <img> tag.

<img src="link_to_image" height="XXX PX" width="XXX PX" alt="name_of_product">

 

what Is marked in red is the specification of image size.

 

So you probably need to hard code the module TPL file.

 How to hard code the module TPL file? 

[yaniv14]

Just edit the module related tpl file and look for the line with the img tag.

In most cases it will be in the module root folder and the name will be the same as the folder/module name.

Always check if you have a copy of the tpl file in the 'themes/your_theme/modules/module_name' before you start editing, because if you do, you will want to edit that file because it will override the one from the root folder.

[Soapa]

Is this the line that should be adapted? It is in the .tpl file. 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_leodrin')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />

[yaniv14]

Yes, and it looks like you already have dimension provided for image.

Can you post a link to your site so I can see if it shows?

[Soapa]

Hi, thanks for replying
 

Yes, and it looks like you already have dimension provided for image.

Can you post a link to your site so I can see if it shows?

http://soaparcadia.com

 

[yaniv14]

The line you posted before is not the one showing on your site.

Check for tpl file inside 'themes/theme_name/modules/latest_product/carousel_module', if you don't see any tpl then you should look inside 'root_folder/modules/latest_product/carousel_module'.

 

look under:

<div class="center_block">

<a href=.................>

<img ........>

[Soapa]

 

The line you posted before is not the one showing on your site.

Check for tpl file inside 'themes/theme_name/modules/latest_product/carousel_module', if you don't see any tpl then you should look inside 'root_folder/modules/latest_product/carousel_module'.

 

look under:

<div class="center_block">

<a href=.................>

<img ........>

 

This is the whole tpl file 

 

 

<!-- MODULE Block specials -->
<div id="categoriesprodtabs" class="block margin noborder products_block exclusive blockleoprodcarousel lp_other">
	<h3 class="title_blockcenter">{l s='Latest Products' mod='blockleoprodcarousel'}</h3>
	<div class="block_content">	
		{if !empty($products )}
			{$tabname="leoproductcarousel"}
			{include file="{$product_tpl}"} 
		{/if}
	</div>
</div>
<!-- /MODULE Block specials -->
<script>
$(document).ready(function() {
    $('.carousel').each(function(){
        $(this).carousel({
            pause: true,
            interval: false
        });
    });
	 
});
</script>

And this is the other tpl file in the same folder 

{if !empty($products)}
<div class=" carousel slide" id="{$tabname}">
	 {if count($products)>$itemsperpage}	
	<a class="carousel-control left" href="#{$tabname}"   data-slide="prev">‹</a>
	<a class="carousel-control right" href="#{$tabname}"  data-slide="next">›</a>
	{/if}
	<div class="carousel-inner">
	{$mproducts=array_chunk($products,$itemsperpage)}
	{foreach from=$mproducts item=products name=mypLoop}
		<div class="item {if $smarty.foreach.mypLoop.first}active{/if}">
				{foreach from=$products item=product name=products}
				{if $product@iteration%$columnspage==1&&$columnspage>1}
				  <div class="row-fluid">
				{/if}
				<div class="span{$scolumn} product_block  ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}p-item{/if} clearfix">
					<div class="product-container clearfix">
						<div class="center_block">
						<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image">
						<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_leodrin')}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='blockleoprodcarousel'}</span>{/if}</a>
					<div class="leo_image">
						<a class="box-wishlist" href="#" onclick="WishlistCart('wishlist_block_list', 'add', '{$product.id_product|intval}', 0,1); return false;">{l s='Add to wishlist'}</a>
						<a class="lnk_more" href="{$product.link}" title="{l s='View' mod='blockleoprodcarousel'}">{l s='View' mod='blockleoprodcarousel'}</a>									
						
					</div>
					</div>
					<div class="right_block">
						<h5 class="s_title_block"><a href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5>
						<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='blockleoprodcarousel'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div>
							
							{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}
							
							{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}
								{if ($product.quantity > 0 OR $product.allow_oosp)}
								<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='blockleoprodcarousel'}">{l s='Add to cart' mod='blockleoprodcarousel'}</a>
								{else}
								<span class="exclusive">{l s='Add to cart' mod='blockleoprodcarousel'}</span>
								{/if}
							{else}
								<div style="height:23px;"></div>
							{/if}
						</div>
					</div>
				</div>
				
				{if ($product@iteration%$columnspage==0||$smarty.foreach.products.last)&&$columnspage>1}
					</div>
				{/if}
					
				{/foreach}
		</div>		
	{/foreach}
	</div>
</div>
{/if}

[yaniv14]

change this line from:

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_leodrin')}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='blockleoprodcarousel'}</span>{/if}</a>

 

To:

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_leodrin')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='blockleoprodcarousel'}</span>{/if}</a>

 

if you still won't get the dimensions then just enter them manually like:

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_leodrin')}" height="184" width="158" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='blockleoprodcarousel'}</span>{/if}</a>

 

 

[Soapa]

change this line from:

To:

if you still won't get the dimensions then just enter them manually like:

O. Thank you veryyy much. But in the gtmetrix it is still showing up. Can you check once more?

[Soapa]

I did send a mail to the theme-developer. And will post what they suggest me. Thanks again

[yaniv14]

Just use my second recommendation.

[Soapa]

I certainly will when they don't come with a solution. I am giving them a day.

And then I will change to height="184" width="158"

 

Thanks for the support!!

[Soapa]

This is what they told me http://screencast.com/t/f02siJfQ

 

It didn't work. I did your suggestion. Now it works!

[Himanshubishtt]

Have this problem in my site too https://www.cakecious.com/

Using Prestashop 1.7.2 and php5.6.4

Please help us