[solved] Featured Image does not arrange correctly

[hyreee]

Hi,

 

I face this problems at my FEATURED IMAGE.

When choose the module "Featured products on the homepage", I define12 number of producte to be featured on the homepage.

 

It is correct that 12 image is displayed, but the arrangement is wrong. I want the image to be arrange as 3 row and each row have 4 images. But now have 4~5 rows where some rows have 4 image and some row has only 1 image.

 

Please assist me. My website;

www.elzahraa.com

[vekia]

you have to edit the module .tpl file

in the homefeatured.tpl file is something like:

{assign var='nbItemsPerLine' value=4}

this is value which defines the number of products per line

 

it will be necessary to change also the whole product block height, because differend height causing this:

 

[hyreee]

Hi Vekia,

 

All the image size is the same. It is 1650px (H) x 1100px (W). I already correct to 4item per line. But still not arrange properly.

[vekia]

what file you've changed?

take a look into themes/YOUR_THEMES/modules/homefeatured directory

 

and what about height

i checked it and it is still the same

 

you have to modify the height for the whole block - i mean <li> element (increase it a bit)

[hyreee]

This is the file that i change;

/public_html/themes/theme646/modules/homefeatured/homefeatured.tpl

 

This is the code;

 

<div id="featured_products">

<h4>{l s='Featured products' mod='homefeatured'}</h4>

{if isset($products) AND $products}

<div class="block_content">

{assign var='liHeight' value=250}

{assign var='nbItemsPerLine' value=4}

{assign var='nbLi' value=$products|@count}

{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}

{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}

<ul >

{foreach from=$products item=product name=homeFeaturedProducts}

{math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.iteration is div by 4} omega{/if} num-{$smarty.foreach.homeFeaturedProducts.iteration}">

<a class="product_image" href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image">

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

</a>

<div class="featured_box">

<h5><a class="product_link" href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:55:'...'|escape:'htmlall':'UTF-8'}</a></h5>

{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}{/if}

<div class="clear"></div>

<a class="button" href="{$product.link}" title="{l s='View' mod='homefeatured'}"><span>{l s='View' mod='homefeatured'}</span></a>

</div>

</li>

{/foreach}

</ul>

</div>

{else}

<p>{l s='No featured products' mod='homefeatured'}</p>

{/if}

</div>

 

I'm not sure which one should i change to get 4image/row for 3 rows.

[vekia]

global.css

 

add height:440px;

#featured_products ul li {
text-align: center;
margin-bottom: 10px!important;
float: left;
width: 230px;
padding: 0;
position: relative;
margin-left: 10px;
height: 440px;
}

 

+

 

change the

#featured_products ul li.num-1 {
margin-left: 0;
}

 

to:

 

#featured_products ul li.num-1, #featured_products ul li.num-5, #featured_products ul li.num-9 {
margin-left: 0;
}

 

 

 

effect:

 

[hyreee]

DONE! Thank you bro. You are so helpful VEKIA.

[vekia]

you're welcome

im glad to hear that i could help you

 

i marked this thread as [solved]

 

best regards

[apharrison964]

I looked through the global.css code, and  I can't find the section that needs to be changed (I used Notepad++'s finder). Could the code be somewhere else? I am trying to get two products to display on the featured products page, and I changed the template homefeatured.tpl variable to reflect that, but nothing is happening.