Jump to content
manouki8

How to specify image dimensions?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?  

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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'}" />

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 ........>

Share this post


Link to post
Share on other sites

 

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}

Share this post


Link to post
Share on other sites

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>

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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? :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More