Show a thumbnail instead of a folder icon next to category

[Chris]

By default, the category_bit.html template displays a folder icon next to categories. It is possible to also display a thumbnail of an image selected at random from that category.

In the category_bit.html template that ships with the downloaded distribution of 4images, there is the following:

Code: [Select]

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
      <img src="{template_url}/images/folder.gif" width="20" height="13" alt="" />

      <!-- {if random_cat_image_file}<a href="{cat_url}"><img src="{random_cat_image_file}" border="1"></a>{endif random_cat_image_file}  -->

    </td>
    <td> <a href="{cat_url}" class="maincat">{cat_name}</a>&nbsp;({num_images})
      {if cat_is_new}<sup class="new">{lang_new}</sup>{endif cat_is_new} </td>
  </tr>
</table>

As you can see above, there is already HTML that can display a random category image thumbnail. It is simply commented out. To activate the thumbnail, uncomment the HTML. In this example the folder icon HTML is deleted in favor of the image thumbnail.

Code: [Select]

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">

      {if random_cat_image_file}<a href="{cat_url}"><img src="{random_cat_image_file}" border="1"></a>{endif random_cat_image_file}

    </td>
    <td> <a href="{cat_url}" class="maincat">{cat_name}</a>&nbsp;({num_images})
      {if cat_is_new}<sup class="new">{lang_new}</sup>{endif cat_is_new} </td>
  </tr>
</table>

Lastly, this feature is enabled by default, but if you previously edited includes/constants.php, check to ensure that the following line is present in that file:

Code: [Select]

define('SHOW_RANDOM_CAT_IMAGE', 1);

[marchchild]

Thanks Chris 

Is it possible to do this with the categories and/or subcats listings on the homepage?

[jarano]

HI!

Your mod works but it has a little problem, the thumbnail size it's the same that the categories thumbnail. The idea it's to have a small tumbnail before the name of the sub-category something like 60x40 or less, but a thumbnail of 100x75 it's too much. There is any way to put inside the size of the thumbnail? and force to have the same size in all the thumbnails? Thanks!!

[cagedsmurf]

Is it Possible to do this with Mantra's Templates as i cant find the code you show here i am using the 4images dark from his site (http://www.mantradream.com) ?

I posted on his forum he told me to post here because he didn't know

Thanks in advance

[V@no]

yes, u can.

[Chris]

Your mod works but it has a little problem, the thumbnail size it's the same that the categories thumbnail.

It's not a mod and there is no problem.  The thumbnail size is working the way it was designed.

[cagedsmurf]

yes, u can.

Can You Tell Me Where I need To Modify Please Because I cant Find The Code As Shown Above  :

This All The Code From The 4images_Dark Template catorgory_bit.html  Sorry If I'm Being Blind

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td width="50" rowspan="2" align="center" valign="top">
   <a href="{cat_url}"><img src="{template_image_url}/category{cat_id}.gif" border="0" alt="{cat_name}"></a></td>
   <td align="left" valign="top"><a href="{cat_url}" class="maincat">{cat_name}</a>&nbsp;({num_images})</td>
  </tr>
  <tr>
   <td align="left" valign="top">{if cat_description}<span class="smalltext">{cat_description}</span><br />{endif cat_description}</td>
  </tr>
</table>
{if sub_cats}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td width="50" align="center" valign="top"><img src="{template_image_url}/joinbottom.gif"></td>
   <td align="left" valign="top">{sub_cats}</td>
  </tr>
</table>
{endif sub_cats}
Thanks In Advance

[V@no]

c'mon! just look at the difference between the "seached" code provided and the result code!

[jarano]

<table border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td valign="top">

      {if random_cat_image_file}<a href="{cat_url}"><img src="{random_cat_image_file}"><width="25" height="33" border="1"></a>{endif random_cat_image_file}

    </td>
    <td> <a href="{cat_url}" class="maincat">{cat_name}</a>&nbsp;({num_images})
      {if cat_is_new}<sup class="new">{lang_new}</sup>{endif cat_is_new} </td>
  </tr>
</table>

I did this changes in this code to obtain a small thumbnail with the same size in all the sub-categories.
First of all I added 3 points to "cellpadding" because in the first change I did it was next to the name. This correct the problem and secund I have added width and height as you see in the script and all the thumbnails are axactly the same size taking the pics from the category or sub-category.
Check it here: http://www.celebridadesperuanas.com/galeria

Thank you Chris, you knew what I was looking for but you just told me that this script wasn't a mod, that answer didn't teach me anything, thanks God I could find the answer by myself but...is this the Forum idea? Is this how we share knowledge?...from people who knows very much to people as myself who doesn't know anything?? Thanks anyway...You have create the script and with out it I never could find the solution

[Chris]

Thank you Chris, you knew what I was looking for but you just told me that this script wasn't a mod, that answer didn't teach me anything, thanks God I could find the answer by myself but...is this the Forum idea? Is this how we share knowledge?...from people who knows very much to people as myself who doesn't know anything?? Thanks anyway...You have create the script and with out it I never could find the solution

Please understand that I'm just a volunteer like the others and did not develop the 4images product.  To my knowledge it belongs to Jan and no one else.  I don't always have time to personally tutor everyone on everything under the sun.  Although I do think I've spent a great deal of time over the last 2 years doing just that...

In this case, the thread simply points out something that can already be done with the existing product and requires no coding changes.  That's all I had time for when I posted it and that's all I intend to do with this thread.

Best wishes.

[jarano]

Hi Chris!
You are right, I am sorry.
Regards

[wiitanen]

By default, the category_bit.html template displays a folder icon next to categories. It is possible to also display a thumbnail of an image selected at random from that category.

In the category_bit.html template that ships with the downloaded distribution of 4images, there is the following:

Code: [Select]

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
      <img src="{template_url}/images/folder.gif" width="20" height="13" alt="" />

      <!-- {if random_cat_image_file}<a href="{cat_url}"><img src="{random_cat_image_file}" border="1"></a>{endif random_cat_image_file}  -->

    </td>
    <td> <a href="{cat_url}" class="maincat">{cat_name}</a>&nbsp;({num_images})
      {if cat_is_new}<sup class="new">{lang_new}</sup>{endif cat_is_new} </td>
  </tr>
</table>

As you can see above, there is already HTML that can display a random category image thumbnail. It is simply commented out. To activate the thumbnail, uncomment the HTML. In this example the folder icon HTML is deleted in favor of the image thumbnail.

Code: [Select]

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">

      {if random_cat_image_file}<a href="{cat_url}"><img src="{random_cat_image_file}" border="1"></a>{endif random_cat_image_file}

    </td>
    <td> <a href="{cat_url}" class="maincat">{cat_name}</a>&nbsp;({num_images})
      {if cat_is_new}<sup class="new">{lang_new}</sup>{endif cat_is_new} </td>
  </tr>
</table>

Lastly, this feature is enabled by default, but if you previously edited includes/constants.php, check to ensure that the following line is present in that file:

Code: [Select]

define('SHOW_RANDOM_CAT_IMAGE', 1);

OK - so... removing the 'Comment Out' gives me code that still shows the folder icon AND the random image. I changed the code to the following:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
     <img src="{template_url}/images/folder.gif" width="20" height="13" alt="" border="0" />
      {if random_cat_image_file}<a href="{cat_url}"><img src="{random_cat_image_file}" width="20" height="13" border="0"></a>{endif random_cat_image_file}
    </td>
    <td>
     <a href="{cat_url}" class="maincat">{cat_name}</a>&nbsp;({num_images})
      {if cat_is_new}<sup class="new">{lang_new}</sup>{endif cat_is_new}
   </td>
  </tr>
</table>
{if cat_description}<span class="smalltext">{cat_description}</span><br />{endif cat_description}
{if sub_cats}{sub_cats}{endif sub_cats}

It would be nice if the random image icon would show up without the folder, and only show the folder if no random image was found.  I just can't see where this is done.

[TheOracle]

It would be nice if the random image icon would show up without the folder, and only show the folder if no random image was found.  I just can't see where this is done.

With the EXIF MOD, it would be easier to convert

this line :

<img src="{template_url}/images/folder.gif" width="20" height="13" alt="" />

into :

Code: [Select]


{ifno random_cat_image_file}<img src="{template_url}/images/folder.gif" width="20" height="13" alt="" />{endifno random_cat_image_file}


From there, it would even be much easier, for you, to customize this line rather than modifying a whole paragraph in order to replace a folder icon into a thumbnail presentation.

[V@no]

Code: [Select]


{ifno random_cat_image_file}<img src="{template_url}/images/folder.gif" width="20" height="13" alt="" />{endifno random_cat_image_file}


From there, it would even be much easier, for you, to customize this line rather than modifying a whole paragraph in order to replace a folder icon into a thumbnail presentation.

please note, for this to work u'll need install "{ifno blah}...{endifno blah}" mod/fix (try FAQ)

[TheOracle]

Correction of the name - added with the URL this time :

http://www.4homepages.de/forum/index.php?topic=7493.0