For my website, I would like to make a new section that looks like this: [] = a row {} = a column

[{Image of post} {text of post}]

[{text of post} {image of post}]

[{Image of post} {text of post}] etc.

So with every row the image and text must switch. I can of course do this manually (static) by using a content builder, but I was wondering if this is also automatically possible. I already found post loop and post content of siteOrigin, but the design options are only limited to featured image and title and I can't switch it per row.

Theme: Tesseract

  • Do you actually need the html to be like this, or is it only for display reasons? In the latter case you could simply do this with css.
    – cjbj
    Jun 6 '16 at 15:05
  • @cjbj the brackets are just for explaining my objective. Jun 6 '16 at 15:27
  • @SvenCozijn. Yes, I get that. But do you want this order in html or is it fine if the switching is done in css.
    – cjbj
    Jun 6 '16 at 15:29
  • @cjbj If the switching is done in CSS then it's also fine, although I'm not very experienced with it. Jun 6 '16 at 15:49
  • Close voting as I fail to see what is the question here and it sounds too much like a "someone do work for me for free" even if you don't mean it that way Jun 8 '16 at 8:48

First check your template or source code to find the classes added to the article as a whole (or any html element that wraps around the whole post. It probably looks a bit like this:

<article class="my-article">
<title class="my-title">TITLE</title>
<img src="..." class="my-featured-image"/>
<div class="my-content">

Now, in your style.css file you must distinguish between even and odd posts:

.my-article:nth-child(even) .my-featured-image (float:left;)
.my-article:nth-child(even) .my-content (float:right;)
.my-article:nth-child(odd) .my-featured-image (float:right;)
.my-article:nth-child(odd) .my-content (float:left;)

Beware that above is how you would normally switch around two items with css. This might interfere with how your theme uses its css. In stead of floats you could also use flexbox.

Not the answer you're looking for? Browse other questions tagged or ask your own question.