change category list layout to look like album list

[blitz]

hello,
I've been searching the forums for help to no avail, so here goes:

Is it possible to create a theme in which the category list layout looks more like the album list layout? So instead of each category being on it's own table row, they would be inside table cells with a thumbnail and category info underneath each (Cat. name, # Albums, # Files).
I've looked at all of the official and user-contributed themes as well as a lot of Coppermine albums on the web and noticed that they all have categories in rows. So before I even try to dive into theme.php, I wanted to know if the Coppermine templating system is flexible enough for this to be possible (because I figured someone would have done this already if it was).

thanks.

[Gizmo]

A sketch of your idea would be useful but I think I understand you request and the answer is "yes". All you need to do is edit $template_cat_list in your theme.php using standard HTML coding. Check the stickies at the top of this board for information on creating and editing themes.

[blitz]

Thanks for the response, Gizmo. I've been looking at theme.php very closely and reading the documentation and stickies on this board and I'm not sure if modifying the category list the way I want to is as straightforward as you make it sound (but I could be wrong). Let's see if I can explain myself better:

The default Coppermine theme (as well as every other theme I've seen) is set up so that each category is in its own table row. So in the $template_cat_list section of theme.php, it looks to me there is a header row with the headings ("Category", "Albums", "Files") and then each category is added to the page as 2 table rows:

Code Select Expand


<!-- BEGIN catrow -->
        <tr>
                <td class="catrow" align="left"><table border="0"><tr><td>{CAT_THUMB}</td><td><span class="catlink"><b>{CAT_TITLE}</b></span>{CAT_DESC}</td></tr></table></td>
                <td class="catrow" align="center">{ALB_COUNT}</td>
                <td class="catrow" align="center">{PIC_COUNT}</td>
        </tr>
        <tr>
            <td class="tableb" colspan="3">{CAT_ALBUMS}</td>
        </tr>
<!-- END catrow -->


So it's pretty straightforward for Coppermine to simply add these rows for each category no matter how many categories there are.
What I want to have is each category in a table CELL, so that I could, for example, have categories listed in a 3-column table with each cell containing a thumbnail and pertinent category info (# of Albums, files, etc). So it would pretty much look similar to what an Album list or thumbnail list can look like.
However, I can't simply replace the "catrow" construct above with a "catcell" construct, because I don't know how I would be able to "tell" it when to start a new row. So I would potentially have all my categories in a single very long row.
I looked down to where the template is for the album list in $template_album_list to see if I could get a clue from there, and indeed there is a template for each cell:

Code Select Expand


<!-- BEGIN album_cell -->
        <td width="{COL_WIDTH}%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td height="1" align="center" valign="top" class="tableh2">
                        <span class="alblink"><a href="{ALB_LINK_TGT}"><b>{ALBUM_TITLE}</b></a></span>
                </td>
        </tr>
        <tr>
                <td align="center" valign="middle" class="album_thumbnails">
                        <img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" class="image" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
                        <div class="img-shadow"><a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}</a></div>
                </td>
       </tr>
       <tr>
                <td width="100%" valign="top" align="center" class="tableb_compact">
                        {ADMIN_MENU}
                        <p>{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>
                </td>
        </tr>
        </table>
        </td>
<!-- END album_cell -->


But the number of columns to display in each row for albums is set in the "Album List View" section of the Configuration panel and there is no equivalent for the category list.

So I'm not sure this is possible without hacking code, which I'm not very good at (and would rather not since it makes it more of a pain when I update to new versions).

Another thing I was thinking of trying was to assemble the category "cells" as floated divs? I'll post here if I can get this to work, but any insight would also be much appreciated.

[Gizmo]

Here's a post to have multi-column categories but it's for 1.3x so it'll have to be adapted for 1.4x. If you give me some time, I will check into this tonight but you are most welcome to work on it as well. 

http://forum.coppermine-gallery.net/index.php?topic=15400.0

[blitz]

Hey -- thanks again Gizmo. Wonder why this didn't come up in any of my searches??? Anyway, I'll definitely look into seeing if I can get this to work with 1.4. Wish me luck...

[blitz]

I figured out how to do this using left-floated divs instead of rows for each category. Here's how I did it.
Insert this code into your theme.php:

Code Select Expand


// HTML template for the category list
$template_cat_list = <<<EOT
<!-- BEGIN header -->
        <tr>
                <td class="tableh1" align="left"><b>{CATEGORY}</b></td>
</tr>
<tr>
<td>
        <div class="categories">
<!-- END header -->
<!-- BEGIN catrow_noalb -->
        <div class="catcell">
                {CAT_THUMB}<br /><span class="catlink">{CAT_TITLE}</span><br />{CAT_DESC}<br />{PIC_COUNT} photos in {ALB_COUNT} albums
        </div>
<!-- END catrow_noalb -->
<!-- BEGIN catrow -->
        <div class="catcell">
                {CAT_THUMB}<br /><span class="catlink">{CAT_TITLE}</span><br /><span class="thumb_caption">{CAT_DESC}<br />{PIC_COUNT} photos in {ALB_COUNT} albums</span>
        </div>
<!-- END catrow -->
<!-- BEGIN footer -->
</div>
</td>
</tr>
        <tr>
                <td colspan="3" class="tableh1" align="center"><span class="statlink">{STATISTICS}</span></td>
        </tr>
<!-- END footer -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;


This block of code replaces the following in the sample theme.php:

Code Select Expand


// HTML template for the category list
$template_cat_list = <<<EOT
<!-- BEGIN header -->
        <tr>
                <td class="tableh1" width="80%" align="left"><b>{CATEGORY}</b></td>
                <td class="tableh1" width="10%" align="center"><b>{ALBUMS}</b></td>
                <td class="tableh1" width="10%" align="center"><b>{PICTURES}</b></td>
        </tr>
<!-- END header -->
<!-- BEGIN catrow_noalb -->
        <tr>
                <td class="catrow_noalb" colspan="3"><table border="0"><tr><td align="left">{CAT_THUMB}</td><td align="left"><span class="catlink"><b>{CAT_TITLE}</b></span>{CAT_DESC}</td></tr></table></td>
        </tr>
<!-- END catrow_noalb -->
<!-- BEGIN catrow -->
        <tr>
                <td class="catrow" align="left"><table border="0"><tr><td>{CAT_THUMB}</td><td><span class="catlink"><b>{CAT_TITLE}</b></span>{CAT_DESC}</td></tr></table></td>
                <td class="catrow" align="center">{ALB_COUNT}</td>
                <td class="catrow" align="center">{PIC_COUNT}</td>
        </tr>
        <tr>
            <td class="tableb" colspan="3">{CAT_ALBUMS}</td>
        </tr>
<!-- END catrow -->
<!-- BEGIN footer -->
        <tr>
                <td colspan="3" class="tableh1" align="center"><span class="statlink">{STATISTICS}</span></td>
        </tr>
<!-- END footer -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;


Then, in your style.css add the following styles:

Code Select Expand


.catcell {
float: left;
height: 150px;
width: 120px;
text-align: center;
margin: 10px;
}


The only important attribute is the float:left. The rest can be modified according to how large your thumbnails are and personal preferences. I also removed the display:block in the .catlink class.
Keep in mind that this won't necessarily create a fixed number of columns of categories. If you have a variable width layout, the category "cells" will jump down to a row below if you make your browser window narrow enough. This layout was good enough for what I was looking for. A screenshot is attached.

[blitz]

Actually, after experimenting further, I found that you can achieve the effect of having a set number of columns if you set the catcell div widths in terms of % instead of pixels.

[michael1984]

okey the last posted code works fine,.. can i get also the alblist under the categorylist ? then it will be very cool

[lukasino]

it.s my propostion

// HTML template for the category list

$template_cat_list = <<<EOT
<!-- BEGIN header -->
        <tr>
                <td class="tableh1" align="left"><b>{CATEGORY}</b></td>
      </tr>
      <tr>
      <td>
        <div class="categories">
<!-- END header -->
<!-- BEGIN catrow_noalb -->
        <div class="catcell">
                <span class="catlink2"><img src="http://tapetypulpitu.pl/folder.gif" width="20" height="13" border="" alt="" />{CAT_TITLE}</span>
        </div>
<!-- END catrow_noalb -->
<!-- BEGIN catrow -->
        <div class="catcell">
               <span class="catlink2"><img src="http://tapetypulpitu.pl/folder.gif" width="20" height="13" border="" alt="" />{CAT_TITLE}</span><br /><span class="thumb_caption"><br /></span>
        </div>
<!-- END catrow -->
<!-- BEGIN footer -->
      </div>
      </td>
      </tr>
        <tr>
                <td colspan="3" class="tableh1" align="center"><span class="statlink">{STATISTICS}</span></td>
        </tr>
<!-- END footer -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;

in css

.catcell {
   float: left;
   height: 28px;
   width: 150px;
   text-align: left;
   margin: 0px;
}

Example:

http://www.tapetypulpitu.pl/index.php

[Marius]

I modified a bit Blitz's hack, like this(in theme.php):

// HTML template for the category list
$template_cat_list = <<<EOT
<!-- BEGIN header -->
        <tr>
                <td class="tableh1" align="left"><b>{CATEGORY}</b></td>
      </tr>
      <tr>
      <td>
        <div class="categories">
<!-- END header -->
<!-- BEGIN catrow_noalb -->
        <div class="catcell">
                {CAT_THUMB}<br /><span class="catlink">{CAT_TITLE}</span><br />{CAT_DESC}<br />{PIC_COUNT} photos in {ALB_COUNT} albums
        </div>
<!-- END catrow_noalb -->
<!-- BEGIN catrow -->
        <div class="catcell">
                <div style="float: left; width: 24%; text-align: center;">
            {CAT_THUMB}
            </div>
            <div style="float: right; width: 74%;">
            <span class="catlink">{CAT_TITLE}</span><br /><span class="thumb_caption">{CAT_DESC}<br />{PIC_COUNT} wallpapers in {ALB_COUNT} albums</span></div>
            <div style="clear: both;"></div>
        </div>
<!-- END catrow -->
<!-- BEGIN footer -->
      </div>
      </td>
      </tr>
        <tr>
                <td colspan="3" class="tableh1" align="center"><span class="statlink">{STATISTICS}</span></td>
        </tr>
<!-- END footer -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;

and in style.css:

.catcell {
   float: left;
   width: 32%;
   text-align: left;
   margin: 5px auto;
   padding-left: 5px;
}

and this is what i got: (see attachment, sorry, no link for now)