CMS Made Simple Forums

Posted: **Fri Jun 26, 2009 4:06 pm**

How to style cataloger categories and items
With square thumbnails that contain a centered image.

This is used on a site that has a center column with a usable width of 576px.
The site uses CMSMS 1.5.4 and cataloger 0.7.3

The main category page looks like this:

I'll confess straight off the bat that it doesn't validate because a DIV tag is wrapped in an A HREF tag, which is a big no no. Still, it works in the latest versions of Firefox, Opera and IE (IE6 is a dog, and I've given up on it.)

Settings in Cataloger/Manage Preferences

ITEM IMAGE SIZES
Maximum number of views for each Item = 4
Image size for Item Page (long axis in pixels) = 550
Thumbail image size for Item Page (long axis in pixels) = 150
Thumbnail image size for Item on Category Page (long axis in pixels) = 150
Thumbnail image size for Item on Catalog Page (long axis in pixels) = 150

CATEGORY PAGE SETTINGS
Maximum number of Banner images for each Category Page = 1
Image size for Category Page (long axis in pixels) = 550
Thumbail image size for Category Page (long axis in pixels) = 150
Default Category Display Behavior = Include all Items and Categories immediately within this category, but not items or categories in sub-categories
Default number of items per page = 1000

(For my purposes I will not be having more than a few item so I have not included any pagination)

I created 3 templates in Cataloger Sub-templates:
CBD_CSS_LEVEL1_category - applied to a standard content page called 'Our Range' using this:

Code: Select all

{cms_module module='Cataloger' action='all' sub_template='CBD_CSS_LEVEL1_category' alias='/' recurse='categories_all'}

CBD_CSS_category - applied to all category pages under the first level page.
CBD_CSS_item - applied to all item pages.

This is how it looks in the navigation:

All these templates use a hack I figured out to vertically & horizontally center the thumbnail image inside a square div using inline styles.
The trick is to add the A HREF link to a square div and set an inline style on that div with a dynamically created background image that is centered vertically & horizontally.

CBD_CSS_LEVEL1_category:

Code: Select all

<div class="category_items">
    {section name=numloop loop=$items}
        <div class="category_box">
		<div class="category_item">
		<a href="{$items[numloop].link}"><div style="background: white url('{$items[numloop].image}') no-repeat center center; height: 100px; width: 100px; margin: 15px;"></div></a>
		</div>
		<div class="category_title">
		<a href="{$items[numloop].link}">{$items[numloop].title}</a>
		</div>
		</div>
    {/section}
<br />
</div>

CBD_CSS_category:

Code: Select all

<div class="catmainpic">
{section name=numimg loop=$image_url_array}<img src="{$image_url_array[numimg]}" alt="{$title}" title="{$title}" />{/section}</div>
<div class="catdescription">{$categorydescription}</div>
<div class="hr1"></div>
<div class="category_items">
    {section name=numloop loop=$items}
        <div class="category_box">
		<div class="category_item">
		<a href="{$items[numloop].link}"><div style="background: white url('{$items[numloop].image}') no-repeat center center; height: 100px; width: 100px; margin: 15px;"></div></a>
		</div>
		<div class="category_title">
		<a href="{$items[numloop].link}">{$items[numloop].title}</a>
		</div>
		</div>
    {/section}
<br />
</div>

CBD_CSS_item:

Code: Select all

<div class="catalog_item">
<div class="item_mainimage"><img id="item_image" name="item_image"  src="{$image_1_url}" alt="{$title}" title="{$title}" /></div>
<div class="hr1"></div>
<div class="item_thumbnails">
{section name=ind loop=$image_url_array}
	<div class="item_thumb">
		<a href="javascript:repl('{$image_url_array[ind]}')">
		<div style="background: white url('{$image_thumb_url_array[ind]}') no-repeat center center; height: 100px; width: 100px; margin: 10px;"></div></a>
	</div>
{/section}
<br />
</div>
<div class="hr1"></div>
{section name=at loop=$attrlist}
<div class="item_attribute_name">{$attrlist[at].name}:</div><div class="item_attribute_val">{eval var=$attrlist[at].key}</div>
{/section}
{literal}
<__script__ type="text/javascript">
function repl(img)
   {
   document.item_image.src=img;
   }
</__script>
{/literal}
</div>

I created a new style sheet called CBD_cataloger and applied it to my page template:

Code: Select all

.catmainpic {
	text-align: center;
}
.catmainpic img {
	border: 1px solid #ccc;
	padding: 10px;	
}
.catdescription {
	text-align: center;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	padding-top: 15px;
}
.category_items {
	text-align: center;
	width: 480px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1em;
}
.category_items br {
	clear: both;
}
.category_box {
	float: left;
	text-align: center;
	width: 130px;
	height: 150px;
	margin: 5px 15px;
}
.category_item {
	text-align: center;
	width: 130px;
	height: 130px;
	border: 1px solid #ccc;
}
.category_title {
	text-align: center;
	width: 130px;
	height: 20px;
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
}

.item_mainimage{
	text-align: center;
}
.item_mainimage img {
	border: 1px solid #ccc;
	padding: 10px;	
}
.item_thumbnails {
	text-align: center;
	width: 570px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1em;
}
.item_thumbnails br {
	clear: both;
}
.item_thumb {
	float: left;
	text-align: center;
	margin: 5px 10px;
	width: 120px;
	height: 120px;
	border: 1px solid #ccc;
}
.item_attribute_name {
	font-size: 14px;
	line-height: 18px;
	font-weight: bold;
	color: #003399;
}
.item_attribute_val {
	font-size: 14px;
	line-height: 16px;
	color: #666666;
	padding-bottom: 10px;
}

After all that the category page looks like this:

And the item page looks like this:

The site itself (in progress):
http://www.buckingevents.com.au/Our-Range.htm
Hope it helps
Simon66

Posted: **Mon Jun 29, 2009 10:50 am**

I'm using Cataloger 0.7.4 and CMSMS 1.6
But I can not UPLOAD images in cataloger content

Posted: **Sun Aug 16, 2009 9:14 pm**

It works fine for me, thanks!

My site uses: 1.6 "New Caledonia" and Cataloger 0.7.4

Posted: **Fri Sep 04, 2009 1:42 pm**

Thanx, its working

Posted: **Wed Mar 10, 2010 7:04 pm**

Thanks for the tip !

You can also include your a tag inside the div (wich has the background thumb), and inside the a tag create an invisible square image :

Code: Select all

<div class="category_items">
    {section name=numloop loop=$items}
        <div class="category_box">
		<div class="category_item">
		<div style="background: transparent url('{$items[numloop].image}') no-repeat top right; height: 65px; width: 65px;"><a href="{$items[numloop].link}" title="{$items[numloop].title}"><img src="images/design/transparent_pixel.gif" width="65" height="65"/></a></div>
		</div>
		</div>
    {/section}
</div>

Posted: **Fri May 14, 2010 11:06 am**

But How to add LightBox to cataloger module Items!

CMS Made Simple Forums

How to style cataloger categories and items with square thumbnails

How to style cataloger categories and items with square thumbnails

Re: How to style cataloger categories and items with square thumbnails

Re: How to style cataloger categories and items with square thumbnails

Re: How to style cataloger categories and items with square thumbnails

Re: How to style cataloger categories and items with square thumbnails

Re: How to style cataloger categories and items with square thumbnails