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_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>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>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;
}
And the item page looks like this:
The site itself (in progress):
http://www.buckingevents.com.au/Our-Range.htm
Hope it helps
Simon66
