Pagelist block column classes fixed
Permalink Browser Info Environment
My first post here! And it's a question with a solution. ;)
This is my current pagelist custom template i use in my flexcrete theme.
I have modified it to show 4 page thumbnails per row, see the class "four columns thumbindex". However, the layout will not work, since every first column needs an additional class called "alpha" which eliminates the left margin, and likewise the fourth column needs an extra class called "omega" to eliminate the right margin.
As you can see, I added a bit of PHP (and yes I am new to this and proud I did this :D ) inside the column div in the loop. This is that line:
You can change it to match any different amount of columns you are using, whereas the condition for "alpha" is either 1 or a number with the remainder of 5, since after every fourth column the fifth one starts on a fresh row, thus the first in line.
Hope this helps.
If you have a better solution, please share it here.
Cheers.
This is my current pagelist custom template i use in my flexcrete theme.
I have modified it to show 4 page thumbnails per row, see the class "four columns thumbindex". However, the layout will not work, since every first column needs an additional class called "alpha" which eliminates the left margin, and likewise the fourth column needs an extra class called "omega" to eliminate the right margin.
<?php for ($i = 0; $i < count($cArray); $i++ ) { $cobj = $cArray[$i]; $title = $cobj->getCollectionName(); //get the attached image based on attribute $lfb = LibraryFileBlockController::getFile($cobj->getAttribute('thumbnail_image')->fID); $thumbnail = $lfb->getThumbnail(640,360)->src; ?> <div class="four columns thumbindex<?php $j++; if ($j % 4 == 0) { echo " omega"; }; if ($j == 1 || $j % 5 == 0) { echo " alpha"; } ?>"> <a class="thumbanchor" href="<?php echo $nh->getLinkToCollection($cobj)?>"> <div class="thumbdesc"> <h3 class="ccm-page-list-title"><?php echo $title?></h3> <p><?php echo $cobj->getCollectionDescription() ; ?></p><br /> <div class="icon arrow"></div> </div>
Viewing 15 lines of 19 lines. View entire code block.
As you can see, I added a bit of PHP (and yes I am new to this and proud I did this :D ) inside the column div in the loop. This is that line:
You can change it to match any different amount of columns you are using, whereas the condition for "alpha" is either 1 or a number with the remainder of 5, since after every fourth column the fifth one starts on a fresh row, thus the first in line.
Hope this helps.
If you have a better solution, please share it here.
Cheers.
| Type: | Discussion |
|---|---|
| Status: | New |
Apologies for marking this post as helpful. I gave myself a karma credit for it and that's not ok i guess...
This looks very useful! Could you provide a download file of what you did here? Or show an example of the end result, so others can understand what's going on? It would be much appreciated!
Also, are you using 1.9 or older, or 2.x?
Also, are you using 1.9 or older, or 2.x?
growthcurve:
yes, here is the file. it's a template file for the page list block, as mentioned specifically tailored for the flexcrete theme, using thumbnails as page list items.
the file location as i have it here: /blocks/page_list/templates/custom.php
and i attached the file for you. make sure when you add a page list block you have the css right.. let me see if i can pass that on as well for you:
NOTE:
i hardcoded some css classes in the attached php file as well, and changed the order of items, as the result needs to have thumbnails showing a description on top of them as you hover over them.
Ah heck,
here's the full css for that block with my custom classes:
yes, here is the file. it's a template file for the page list block, as mentioned specifically tailored for the flexcrete theme, using thumbnails as page list items.
the file location as i have it here: /blocks/page_list/templates/custom.php
and i attached the file for you. make sure when you add a page list block you have the css right.. let me see if i can pass that on as well for you:
a.thumbanchor { position: relative; display: block; overflow: hidden; }
NOTE:
i hardcoded some css classes in the attached php file as well, and changed the order of items, as the result needs to have thumbnails showing a description on top of them as you hover over them.
Ah heck,
here's the full css for that block with my custom classes:
/** FRONT PAGE INDEX **/ .thumbindex { margin-bottom: 1.4em; } a.thumbanchor { position: relative; display: block; overflow: hidden; } a.thumbanchor { text-decoration: none; } a.thumbanchor img { width: 100%; height: auto; z-index: 100 !important; } a.thumbanchor .thumbdesc { z-index: 10 !important; } a.thumbanchor:hover .thumbdesc { z-index: 900 !important; text-decoration: none; } a.thumbanchor:hover img { z-index: 0 !important; } a.thumbanchor .thumbdesc { background: rgba(0,0,0,0.6); } .thumbdesc { color: #FFF; margin-top: 0em; padding: 0; } .thumbdesc p, .thumbdesc h3 { } .thumbdesc h3 { font-size: 1.2em; line-height: 1.0em; color: #FFF; margin-top: 0em; display: block; padding: 2em 0.6em 0.4em; } .thumbdesc div.arrow { position: absolute; bottom: 0.6em; right: 0.8em; color: #FFF; font-size: 2em; }
Viewing 15 lines of 17 lines. View entire code block.
Hi Waldbach
I'm trying to implement this and I'm not sure what's happening. It seems to count correctly for the first 8 then it goes all wrong. The pattern it's putting out is this:
alpha
none
none
omega
alpha
none
none
omega
none
alpha
none
omega
none
Have you any ideas why this is happening?
I'm trying to implement this and I'm not sure what's happening. It seems to count correctly for the first 8 then it goes all wrong. The pattern it's putting out is this:
alpha
none
none
omega
alpha
none
none
omega
none
alpha
none
omega
none
Have you any ideas why this is happening?
Hi Rosie, not sure with this information. Have you checked if the css classes are correct? Are there other elements in between.
Else post your source code?
Good luck.
Else post your source code?
Good luck.
Cheers, here is the code
The Block
The page list that is produced
The Block
The page list that is produced
<div class=" first"> <h3>News article mmmmm</h3> </div> <div class=""> <h3>A course</h3> </div> <div class=""> <h3>Training Courses</h3> </div> <div class=" last"> <h3>Home</h3> </div> <div class=" first"> <h3>fahslkdjf</h3> </div>
Viewing 15 lines of 54 lines. View entire code block.
Sorry to be quite late to the party on this one... but in case anyone stumbles upon this, I believe a quick tweak to the PHP should make this work correctly...
Original code:
The problem is with using %5... Let's look at row numbers and whether they satisfy the criteria %4==0 and %5==0:
Row 0 | 0%4==0 true | 0%5==0 true
Row 1 | 1%4==0 false | 1%5==0 false
Row 2 | 2%4==0 false | 2%5==0 false
Row 3 | 3%4==0 false | 3%5==0 false
Row 4 | 4%4==0 true | 4%5==0 false
Row 5 | 5%4==0 false | 5%5==0 true
Row 6 | 6%4==0 false | 6%5==0 false
Row 7 | 7%4==0 false | 7%5==0 false
Row 8 | 8%4==0 true | 8%5==0 false
Row 9 | 9%4==0 false | 9%5==0 false
Row 10| 10%4==0 false | 10%5==0 true
You see that it doesn't follow that the criteria ($j%5==0) immediately follows ($j%4==0) because we're looking at multiples of that number.
In fact, for Row 20, both (20%4==0) is true and (20%5==0) is true as they're both factors!
Working code:
Instead of ($j%5==0), we're checking for (($j-1)%4==0)... in other words, "was the previous row exactly divisible by 4"?
Hope this helps somebody!
Original code:
The problem is with using %5... Let's look at row numbers and whether they satisfy the criteria %4==0 and %5==0:
Row 0 | 0%4==0 true | 0%5==0 true
Row 1 | 1%4==0 false | 1%5==0 false
Row 2 | 2%4==0 false | 2%5==0 false
Row 3 | 3%4==0 false | 3%5==0 false
Row 4 | 4%4==0 true | 4%5==0 false
Row 5 | 5%4==0 false | 5%5==0 true
Row 6 | 6%4==0 false | 6%5==0 false
Row 7 | 7%4==0 false | 7%5==0 false
Row 8 | 8%4==0 true | 8%5==0 false
Row 9 | 9%4==0 false | 9%5==0 false
Row 10| 10%4==0 false | 10%5==0 true
You see that it doesn't follow that the criteria ($j%5==0) immediately follows ($j%4==0) because we're looking at multiples of that number.
In fact, for Row 20, both (20%4==0) is true and (20%5==0) is true as they're both factors!
Working code:
Instead of ($j%5==0), we're checking for (($j-1)%4==0)... in other words, "was the previous row exactly divisible by 4"?
Hope this helps somebody!