Jump to content

Every second post align different? How to ...?


Roych
 Share

Recommended Posts

Hello

I need some help with aligning every second post different than the first.
First post with image on the left and text on the right and every second with text on the left and image on the right.

I have a repeater field with title, image and text. I would like to stick with repeater if possible. 

I tried to look on the forum and google but no luck as I'm not even sure how this function is called.

every-second.jpg.b0280fc618be4c697b3c9b6d0a11d742.jpg

It would be great if someone already did something similar.

Thank you very much

R

Link to comment
Share on other sites

If using flexbox you could use the order property to change the order of the columns, I normally add a class to a parent div that wraps both columns.

foreach($page->repeater as $i => $item){
	//Going to offset the count starting from 1 instead of 0 so I can use modulo operator
    $i = $i + 1;
    $class = "";
	// If the count is even, such as 2,4,6, etc.
	if($i%2 == 0){
		$class = "invert-order";
	}
    echo "<div class='row {$class}'>";
    //output the columns here
    echo "..."; 
    echo "</div>";
}

You should end up with something like this:

https://codepen.io/elabx/pen/RwPMaym

  • Like 3
Link to comment
Share on other sites

You don't even need to adjust your template, as long as the rows have one common parent you can use the CSS nth-selector:

.row {
    display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
    align-items: center;
}
.row:nth-child(2n) {
	flex-direction: row-reverse;
}

 

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...