How to align custom category images with category links.

[michael +]

Take a look at www.mkclassifieds.co.uk

I'm using custom category images of 50 x 50 pixels. Using plain old html I could easily format the images so that the adjacent text/links would run from the top edge of the image. I'd just use align="left"

How do I reproduce this in 68C?

I'm guessing I have to make changes in home.tpl.php. I hope so because I only have the 'designer' version.

Many thanks.

[Lhotch +]

add align="top" to the image tag itself.... ie


from this....

<img border="0" src="catimages/classifieds.png" alt="Classifieds"/>

to this....

<img border="0" align="top" src="catimages/classifieds.png" alt="Classifieds"/>

[michael +]

Sorry to sound thick but where are the image tags to be found? I know the images are stored in www.mkclassifieds.co.uk/catimages but where are they called from?

Is there are smarty constant that needs adjusting? Small word, big picture explanations gratefully received.

[Lhotch +]

Originally Posted by michael

Sorry to sound thick but where are the image tags to be found? I know the images are stored in www.mkclassifieds.co.uk/catimages but where are they called from?

Is there are smarty constant that needs adjusting? Small word, big picture explanations gratefully received.

The easiest way to see what template is being used on the various pages is to open up the file layout.tpl.php for the template you are using. At the very top of the file place the following...

{debug}

now goto your site and navigate to the page your interested in finding info on and you will get a popup window showing you the variables used and the templates used. In your case if you click on the home link you can see that the 2 templates being used are layout.tpl.php and home.tpl.php.

layout.tpl.php is the header, footer and navigation of the site and is used by almost all pages. So that leaves us with, in the case of the home page, home.tpl.php which displayes the categories.

Now if we open home.tpl.php in our favorite html or text editor we can see the following smarty plugin that loops through the data passed to it from the underlying script and displays the categories.

PHP Code:

{html_table_adv loop=$data cols=$cols table_attr='width="100%"'}
    [[start_link]]<img src='[[image]]' border='0' alt='[[name]]' /></a>&nbsp;[[start_link]]<strong>[[name]]</strong></a>
    ([[total]])
    <br />
[[subcats]]
{/html_table_adv} 


we can modify the default code above to add the align tag as follows.

PHP Code:

{html_table_adv loop=$data cols=$cols table_attr='width="100%"'}
    [[start_link]]<img src='[[image]]' align='top' border='0' alt='[[name]]' /></a>&nbsp;[[start_link]]<strong>[[name]]</strong></a>
    ([[total]])
    <br />
[[subcats]]
{/html_table_adv} 


Make sure to make a backup of your file before you modify it in case you need to revert to the original.

[michael +]

Thank you for taking the time to explain that Larry. Understanding how things work is much better than simply being told which bits of code need to be changed.

And of course, it worked!

[Lhotch +]

Originally Posted by michael

Thank you for taking the time to explain that Larry. Understanding how things work is much better than simply being told which bits of code need to be changed.

And of course, it worked!

No problem, glad it worked for you. We dont always know how proficient someone is when they ask for help so instead of typing up a page of details someone may not need or care about I often opt for the short answer 1st and if more clarification is needed will gladly expand on it as needed..