0

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

closed as unclear what you're asking by Mayeenul Islam, TheDeadMedic, Mark Kaplun, Howdy_McGee, bueltge Jun 14 '16 at 14:49

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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. – Sven Cozijn 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. – Sven Cozijn 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 – Mark Kaplun Jun 8 '16 at 8:48
2

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">
POST TEXT
</div>
</article>

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.