How to get images to display next to Categories

[MadFly]

Thank you plenties! I have just received that email, edited the style.css and busy with that login plugin thing...

will check it out after install done

[MadFly]

yup! all good! just as i wanted it



Thank you all dearly!

[MadFly]

I inserted that {if} stated at the very bottom of plugin_categories.tpl and the icons does not show. is there a specific place i shoul upload icons? or could i just edit the category and insert the icon again?

my icon images are in uploads/icon_pics/icon_name.jpg

[akremedy]

I'm pasting the entire contents of my plugin_categories.tpl file here...the {if} statement goes right before the {$plugin_category.category_name|escape} tag:

Code: Select all

{if $is_form}
<form id="serendipity_category_form" action="{$form_url}" method="post">
    <div id="serendipity_category_form_content">
{/if}

    <ul id="serendipity_categories_list" style="list-style: none; margin: 0px; padding: 0px">
{foreach from=$categories item="plugin_category"}
        <li class="category_depth{$plugin_category.catdepth} category_{$plugin_category.categoryid}" style="display: block;">
        {if $is_form}    
            <input style="width: 15px" type="checkbox" name="serendipity[multiCat][]" value="{$plugin_category.categoryid}" />
        {/if}
    
        {if !empty($category_image)}
            <a class="serendipity_xml_icon" href="{$plugin_category.feedCategoryURL}"><img src="{$category_image}" alt="XML" style="border: 0px" /></a>
        {/if}
            <a href="{$plugin_category.categoryURL}" title="{$plugin_category.category_description|escape}" style="padding-left: {$plugin_category.paddingPx}px">{if !empty($plugin_category.category_icon)}<img src="{$plugin_category.category_icon}" />{/if} {$plugin_category.category_name|escape}</a>
        </li>
{/foreach}
    </ul>

{if $is_form}
    <div class="category_submit"><input id="submit" type="submit" name="serendipity[isMultiCat]" value="{$CONST.GO}" /></div>
{/if}

    <div class="category_link_all"><a href="{$form_url}?frontpage" title="{$CONST.ALL_CATEGORIES}">{$CONST.ALL_CATEGORIES}</a></div>

{if $is_form}
    </div>
</form>
{/if}

One thing I took for granted is that folks know to assign an icon to the category - in s9y admin > categories > image, set the path to the image (or select it from the media library).

It looks like you're putting icons in a subdir in the media library which is exactly what I did - mine are all .png's, yours looks like a .jpg, but it should work just the same. All of my icons are quite small (16x16).

Hope that does the trick!
Adam

[MadFly]

Oh my goodness! But do i feel a odd bit stupid right now... I just realised that the if statement is ONLY

Code: Select all

{if !empty($plugin_category.category_icon)}<img src="{$plugin_category.category_icon}" />{/if}

akremedy wrote the code in another color and the surrounding code where the IF statement should be.

And i was trying to add everything including the surrounding code... will insert only the if statement and try again. do i need to refresh the theme somehow or should the icons show once i insert the code?

and if i have to refresh the theme, how do i do that?

[MadFly]

All my icons are 16x16 and i did insert only that if statement right before {$plugin_category.category_name|escape}. But still nothing. is there a way that i should specify where icons are located? or should i just remove the icon and re add it again?

[MadFly]

I added the if statement, but still nothing, i removed the icon and re added it again, but still nothing, i even tried to use the thumbnail that serendipity creates of every image that you upload, but then there is NO image displayed, if i use the larger image, then the icon does show top right next to the entry.

i have added the if statement and i am most certain that i added it correctly... i'll add all code from my plugin_categories.tpl file here...

{if $is_form}
<form id="serendipity_category_form" action="{$form_url}" method="post">
<div id="serendipity_category_form_content">
{/if}

<ul id="serendipity_categories_list" style="list-style: none; margin: 0px; padding: 0px">
{foreach from=$categories item="plugin_category"}
<li class="category_depth{$plugin_category.catdepth} category_{$plugin_category.categoryid}" style="display: block;">
{if $is_form}
<input style="width: 15px" type="checkbox" name="serendipity[multiCat][]" value="{$plugin_category.categoryid}" />
{/if}

{if !empty($category_image)}
<a class="serendipity_xml_icon" href="{$plugin_category.feedCategoryURL}"><img src="{$category_image}" alt="XML" style="border: 0px" /></a>
{/if}

<a href="{$plugin_category.categoryURL}" title="{$plugin_category.category_description|escape}" style="padding-left: {$plugin_category.paddingPx}px">{if !empty($plugin_category.category_icon)}<img src="{$plugin_category.category_icon}" />{/if}{$plugin_category.category_name|escape}</a>
</li>
{/foreach}
</ul>

{if $is_form}
<div class="category_submit"><input type="submit" name="serendipity[isMultiCat]" value="{$CONST.GO}" /></div>
{/if}

<div class="category_link_all"><a href="{$form_url}?frontpage" title="{$CONST.ALL_CATEGORIES}">{$CONST.ALL_CATEGORIES}</a></div>

{if $is_form}
</div>
</form>
{/if}
<a href="{$plugin_category.categoryURL}" title="{$plugin_category.category_description|escape}" style="padding-left: {$plugin_category.paddingPx}px">{if !empty($plugin_category.category_icon)}<img src="{$plugin_category.category_icon}" />{/if} {$plugin_category.category_name|escape}</a>

[akremedy]

Hmm, that's weird - under /templates, I have a "default" and a "default-php" directory - each contains a plugin_categories.tpl file. I've only modified the one in "default".

If you can see the icon in the blog entry (top/right next to the title) then you should be able to see it in the categories panel as what you've pasted in looks correct - it does look like there is an extra href block at the very bottom, but I'd be surprised if it matters that it's there or not.

Maybe clear browser cache?

Just to be sure, if you put an "X" after the {/if} that you added, does it print in front of the category name on the categories panel? If that works, you know you're working with the right .tpl file, then maybe remove the {if !empty($plugin_category.category_icon)} and {/if}...just leave the <img src="{$plugin_category.category_icon}" /> tag and see what prints in the categories panel - as I recall, if you don't have the {if} statement, and no icon is set for the category, IE didn't show anything, but Firefox showed the "red x" icon for missing image.

At the moment, it seems like everything is in order - my icons happen to be .png's, but I don't think matters...it's just an <img> tag.

You don't need to refresh the template like in phpBB - assuming the browser cache is cleared, your changes should be picked up immediately.

[Don Chambers]

Madfly - can you post a url so we can see this in action?

[MadFly]

http://www.madfly.co.za/diary

I have inserted an X just after the IF statement, and nothing showed. I cleared the cache and loaded the page again, but still nothing.

I have actually copied all your code from your post akremedy, from whats in your plugin_category.tpl file and pasted it into mine, I thought that will work seeing as we use the same theme.

I have now copied that tpl file to the default-php directory, becuase i saw that that one is less in size than the one in default. so now both directories has the exact same plugin_category.tpl file.

[MadFly]

I am going to open it from another computer which has NEVER opened my site before...

But i suspect that might not work, seeing as i am sitting behind a company proxy...

maybe i should go to an internet cafe and see what happens there...

I can see the image in the blog entry, top right, next to the header. and if i change the image, it changes as well, but just not in the category list

[MadFly]

I just noticed that there is a slight difference in where my category icons are displayed, and where akremedy's are displayed.

Your's are part of the entry titile... and mine are actually part of the entry itself, it is not displayed to the right next to the title of the entry, it displays top right on the first line of the entry...

what to do...

I have copied the text from your previous posts that include your plugin_categories.tpl context, and i have cleared the cache of IE, will try FF soon.

maybe i should relax a bit with this icon thingy... i tend to get alittle over excited about this kind of stuff, same with phpbb, if i try to edit the style, or something.

[Don Chambers]

You did activate smarty templating for the category sidebar plugin, right???? Because this plugin will not just use the tpl because it exists - you must turn that option on in the plugin configuration.

I also realize you COULD just use css for your icons. The template you are using places a little blue folder icon before every category. You could actually change that particular icon by using css specific to each category.

The position of the category icons within your entries will be determined by a combination of entries.tpl and the template's css.

Yours are positioned to the right of the entry body because of this in the stylesheet s9y.css:

Code: Select all

img.serendipity_entryIcon {
    border:0pt none;
    float:right;
}

[MadFly]

uhm....

One giant oops! After I turned the smarty thing on, the icons showed...

Sorry for any inconvenience or stupidity.

[akremedy]

Hey cool, you got it working! Sorry about the smarty option - that's yet another item I guess I should update my instructions with. Thanks for the assist Don, I don't think it would have ever occurred to me

Regarding repositioning the icons in the actual posts - there is a post here that discusses a small change in entries.tpl to move the icons up and inline with the blog title: http://www.pigslipstick.com/index.php?/ ... -edit.html

Hope that helps,
Adam