Change chunk change on every 4th item

98 Posts

ianman Reply #1, 13 years, 8 months ago

I am trying to float my thumbnails in rows of 4, but the last image in the row of 4 will require a <br class="clearboth"> and i need this for every 4th image.

What I have right now is the following call

[[!Gallery? &album=`Club History Press Articles` &plugin=`galleriffic` &gallerifficThumbHeight=`100` &gallerifficThumbWidth=`100` ]]

And the chunk that needs to change every 4th item is gallerifficitemthumb.chunk.tpl

What I am trying to achieve is to layout the thumbs like this tutorial http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

I am new to all this dont even know if this can be done but if anyone can point me in the right direction or even explain another way on how to do this that would be great.

Many thanks

Ian

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 8 months ago

I've never had a problem with simply using CSS to size each one to approximately 24% accounting for margins and padding, and float left. There's only room for four, so the next one drops to the next row automatically. You don't need to clear each row.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

534 Posts

exside Reply #3, 13 years, 8 months ago

Definitely a CSS (eventually jQuery -> for f'ing IE) thing, so if you have that element with class "thumbnail" from the tutorial you could just add:

.thumbnail
{
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}
.thumbnail:nth-of-type(4n) {
margin: 0 0 15px 0;
}

The problem is, that this will not work in IE's (surprise) aaand also, that jQuery doesn't support the nth-of-type selector natively...that sucks (also had the same problem as you have)...but there's a "workaround":

// jQuery code and assuming that you use somehow conditionals  (html5 boilerplate) or something else to detect IE and add a class to the body or html tag...so

if ( $('html').is('.ie') ) {
$('.thumbnail:nth-child(4n+1)').css('margin-right', 0);
}

completely untested but should point you in the right direction...the problem is (and I'm normally doing it like that) that the Gallery snippet doesn't seem to have a "counter" or index that tells you which gallery item it's rendering at the time...if this was the case you could probably write a little snippet or so to add a custom class at every fourth item...but I don't see it hook in the gallery snippet...anyone?

//PHP
if ( $index % 4 == 0 ) {
// output a classname or so ie. no-margin
}

98 Posts

ianman Reply #4, 13 years, 8 months ago

I think I just need to keep things really simple like me.

I thought it would be a case of just remove the <ul> <li> elements from the chunks however as soon as I remove them that kills the slideshow part off as it then wont render the images I dont understand why it does that which means I am left with the option of using css to line the thumbnails up in rows BUT....

Have added display:inline and every other property I can think of I have been totally unable to do this, what am I missing this is the page I am using for testing Image test page the css is back to the default now that install with gallerific plugin

EDIT:

OK having typed the above I have sorted my issue its just me being very stupid.

The images were all in one column because they were being held inside a div called gal-gaff-thumbs which has a default value of 300px, all I needed to do was add &navigationWidth=`550` and now things are working how I wanted them.
My final gallery call is

[[!Gallery? &album=`4` &plugin=`galleriffic` &navigationWidth=`550` &gallerifficThumbHeight=`80` &gallerifficThumbWidth=`80` ]]

Took me a while but I got there.

[ed. note: ianman last edited this post 13 years, 8 months ago.]