Jump to content
Roych

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

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hello, 

elabx I tried your code and it works perfect. I was looking for this so long. You are the best 🤩

Thank you very much

R

  • Like 1

Share this post


Link to post
Share on other sites
5 hours ago, MoritzLost said:

.row:nth-child(2n) { flex-direction: row-reverse; }

Smarter solution!

  • Like 3

Share this post


Link to post
Share on other sites

Thank you all, got it up and running perfectly. 😉

R

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...