Thread

Is there an EE method to place the categories of a photogallery in 2 columns?

Example:

category1 | category2
category3 | category4
category5 | category6
...etc

Is this possible?

Thanks in advance !

sounds like a css/html issue

can you make each category name a block level element and then float them?

ok, I’ll use that option. There isn’t a EE way to do this?

In general, EE doesn’t control layout, only data—which is what we like about it 😊

In general, EE doesn’t control layout, only data—which is what we like about it 😊

Yeah true. Yet, I haven’t found a way to style the pagination layout.. 😊

Yes!  That one is tricky.

Is this extension any use to you all?

I’ve used it a couple of times and it’s really quite good.

Best wishes,

Mark

Hi!

I did something similar with a table with three colums. There were two tricks: One is to use the {switch…} tag do make something only every two (or in my case three) entries. The second was to close the table properly in all cases. It went like this:

<table>
{exp:weblog:entries ...}
{switch="<tr>||"}
<td>{title}</td>
{if count==total_results}</tr>
{if:else}
{switch="||</tr>"}
{/if}
{/exp:weblog:entries}
</table>

The first switch inserts a <tr> every three items, and the second closes it after all three; with an offset of two. The if-clause was necessary to 1) close the row when it ends with one or two elements in it and 2) not to have two closing elements when there are three elements in the last row.

Careful, the “|” is the divider for the switch tag, so if you want to render a “|”, you need another syntax; maybe “&124;” does work?! Or choose another char as your divider like “;” for testing 😊

So maybe your code could look like:

{exp:weblog:entries ...}
{title}
{if count==total_results}

{if:else}
{switch=";|<br />"} {!-- or ="&124;|
" --}
{/if}
{/exp:weblog:entries}

And for cycling through the categories, this would be similar, just with another weblog tag, I guess?!

Bye . . . Joerg

This one’s actually quite easy to get the basic structure, but getting the pipe is a little harder 😊.

For your simple categories list…

<ul class="cats">
{exp:gallery:category_list gallery="{gallery_name}"}
<li><a href="http://{category_path=gallery/category}">{category_name}</a></li>
{/exp:gallery:category_list}
</ul>

...you can add other variables as well if you wanted, not just the link and category name.

The basic CSS…

ul.cats {list-style: none; margin: 0 0 10px 0;}
ul.cats li {float: left; width: 100%;}
ul.cats a {font-weight: bold;}