Split manufacturers page

[omgzhobbs]

Allo,

How would I make this page split, so that there are two columns instead of one?  I've got 22 manufacturers so far, and more due to go on, which makes this page rather long to scroll down.

Is there a way I can make it lay these out similar to the product listings pages, but instead just two columns with the company logos.

I guess about 10 or 12 on each side.

Thanks!

 

[Sharak]

Simply set width of li element in manufacturers list to fit 2 in a row. Can't give you exact code without shop URL.

Edited January 2, 2014 by Sharak (see edit history)

[omgzhobbs]

Simply set width of li element in manufacturers list to fit 2 in a row. Can't give you exact code without shop URL.

 

 

The URL is; http://www.zappies.com/manufacturers

 

 

The code is;

 

<h1>{l s='Manufacturers:'}</h1>

{if isset($errors) AND $errors}
	{include file="$tpl_dir./errors.tpl"}
{else}
	<p class="nbrmanufacturer">{strip}
		<span class="bold">
			{if $nbManufacturers == 0}{l s='There are no manufacturers.'}
			{else}
				{if $nbManufacturers == 1}
					{l s='There is %d manufacturer.' sprintf=$nbManufacturers}
				{else}
					{l s='There are %d manufacturers.' sprintf=$nbManufacturers}
				{/if}
			{/if}
		</span>{/strip}
	</p>

	{if $nbManufacturers > 0}
		<ul id="manufacturers_list">
		{foreach from=$manufacturers item=manufacturer name=manufacturers}
			<li class="clearfix {if $smarty.foreach.manufacturers.first}first_item{elseif $smarty.foreach.manufacturers.last}last_item{else}item{/if}"> 
				<div class="left_side">
					<!-- logo -->
					<div class="logo">
					{if $manufacturer.nb_products > 0}<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$manufacturer.name|escape:'htmlall':'UTF-8'}" class="lnk_img">{/if}
						<img src="{$img_manu_dir}{$manufacturer.image|escape:'htmlall':'UTF-8'}-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
					{if $manufacturer.nb_products > 0}</a>{/if}
					</div>

				</div>


			</li>
		{/foreach}
		</ul>
		{include file="$tpl_dir./pagination.tpl"}
	{/if}
{/if}

Edited January 2, 2014 by omgzhobbs (see edit history)

[Sharak]

I'm more interested in .css file. You have Smart cache CSS enabled so I'm guessing a little here

 

In /themes/your_theme/css/global.css find ul#manufacturers_list li (line 1561 by default) and add this:

float: left;
margin-right: 3px;
width: 290px;

Next find ul#manufacturers_list li img (line 1573 by default), add this:

height: auto;
width: 272px;

margin-right: 14px; should be removed from this part.

 

That makes just the view part. Images of manufacturers are still 580x160px. You might want to change medium_default size in admin Preferences->Images. Just make sure it won't affect other sites using this type of images.

[vekia]

ul#manufacturers_list li {
width: 284px;
margin: 5px!important;
margin-bottom: 14px;
display: inline-block;
padding: 12px 8px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

effect:

 

 

use code that i provided instead original in: 

 

global.css line ~1521

[Sharak]

That's not enough, Vekia. You still have to change size of <img>

[omgzhobbs]

ul#manufacturers_list li {
width: 284px;
margin: 5px!important;
margin-bottom: 14px;
display: inline-block;
padding: 12px 8px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

effect:

 

 

use code that i provided instead original in: 

 

global.css line ~1521

 

 

 

Lifesaver!!  Thank you so much, this worked a charm!  Thank you!

 

I do not need to change the image size, as they automatically become smaller, keeping the images large help for the manufacturers pages as they still need to show large on this.  Obviously changing the image size would make the images display a tiny bit better if it wasnt for needing the size for other area's of the site.

 

Thanks to everyone who helped out

 

[solved]

[Sharak]

Unfortunately it's not Looks good on Chrome, but on Firefox and IE it's a mess.

 

 

[vekia]

that's correct, Sharak has got right

it's necessary to add also img with new width and height defintion:

ul#manufacturers_list li img { width:266px; height:auto;}

or just go to the prefernces > images and change width and height (proportionally) for medium_default image type, then regenerate thumbnails

[omgzhobbs]

Thanks for pointing this out!  I didnt even think to check.

Adding that img definition and also changing the image settings in the BO has fixed the issue for other browsers.

Thanks loads for both of your help!

[solved]

[Sharak]

You don't have to set img size if you changed it in Preferences -> Images. It was a must if you didn't update image preferences

[omgzhobbs]

Changing the CSS image size did nothing on Firefox and IE, so I also changed image preferences which fixed the issue, but i also left the CSS change in place, just incase. haha

Edited January 3, 2014 by omgzhobbs (see edit history)

[Sharak]

Maybe you loaded page from cache Whatever you do in presta it's always better to use admin settings first, then change .css if needed. If you check .tpl files you'll notice that width and height of manufacturer, category or product images are set in there accordingly to images preferences in admin. For example let's look into category.tpl:

<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html'}" (...)
   width="{$categorySize.width}"
   height="{$categorySize.height}" />

Chrome fit images to li element, but for IE and Firefox width and height from .tpl were more important. That's why you had to set width and height for img also in .css.

Edited January 3, 2014 by Sharak (see edit history)