I have a bunch of content (Image & Text) that I would like to layout dynamically in the following manner.
IMAGE | TEXT
TEXT | IMAGE
IMAGE | TEXT
TEXT | IMAGE
How can I implement this with toolset?
If I was doing this manually outside of wordpress, I would have a query result counter "$ct" and then I'd have a loop like this:
$ct=6; // count of items in returned array
for ($i=$ct;$i>0;$i--) {
if ($i%2==0) { // even
echo "PHOTO | TEXT<br>\n";
} else { // odd
echo "TEXT | PHOTO<br>\n";
}
}
but how can I do this toolset?
thx
Hello and thank you for contacting Toolset support.
I assume that you are talking about a view or an archive template, as they are used to display lists, right?
Well, you can either go with a CSS solution, which will let you style the odd and even sections differently. For example:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
hidden link
Or you can use a condition on the current index of the loop. Either use a conditional block if you are building with blocks, or use a conditional shortcode, or the wpv-item shortcode if you are building with the legacy editor.
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-item
I hope this helps. Let me know if you have any questions.
its in a view ... I am using a grid block to make a two column display and i'd like the column contents to alternate sides ... can that be done with CSS?
Otherwise, using a conditional wrapper based off of the current index of the loop ... that is what I want to do, but how do I get the loop index number to test if even or odd?
Well, it can be done using CSS, but it may be a bit complicated. Especially because you want to use grids.
So, I gave it a try using the conditional block, but I could not make it work. Because in conditional blocks we do not have a modulo(%) operator. So, I built a custom shortcode, registered it in Toolset settings, then used it in the conditional block.
You can check the results here hidden link
Please log in to my test site with this URL hidden link
1. The custom shortcode that will return 0 or 1 depending on the index of the post in the current loop. This shortcode uses our wpv-loop-index under the hood. I added the code to the theme's functions.php file.
add_shortcode('odd', 'my_odd_function');
function my_odd_function($atts, $content){
$index = (int) do_shortcode('[wpv-loop-index]');
return $index % 2;
}
Check it between lines 642-647 in here hidden link
2. The shortcode needs to be registered in the Toolset settings. Check this screenshot hidden link
3. Use the shortcode in conditionals. Check this screenshot hidden link
You will need two conditional blocks, one for odd indexes and the other for even indexes. Check my page here hidden link
I hope this helps. Let me know if you have any questions.
Thank you Jamal!
My issue is resolved now. Thank you!
