Templating: Alternating css/columns

support
1

Sorry if this has been asked before, I couldn’t find any help (quite hard to search for the feature)

So I’m looking at setting a different structure for every alternating item. Say, switch an image/text in columns for every alternate item (i.e. https://atom.io)

My idea is to just use a variable and modBool to verify and switch templates, but interested if the community has a better way in handling this.

Thanks!

2

What part of atom.io does what you’re describing? Do you mean like alternating background colors of table rows?

3

The alternating left/right column/grid (Packages/Themes/Customization text)

4

Maybe it’s just me not getting it. It just looks likes a standard bootstrappy grid to me. I don’t see any Customzation page or what iis alternating. Perhaps someone else willl know exactly what you mean and can help.

5

Yup, it’s a bit hard to explain/put into words exactly. It’s mainly just how the content/image gets swapped (right/left) and I imagine it would also apply to something like tables alternating (which bootstrap has too I guess).

I’ve currently implemented it on hugo like so:

{{ range where .Data.Pages.ByDate "Type" "features"}}
    {{ $.Scratch.Add "i" 1 }}
    {{ $i := $.Scratch.Get "i" }}
    <div class="feature">
      {{ if modBool $i 2 }}
        <div class="column">
          IMAGE
        </div>
        <div class="column">
          CONTENT
        </div>
      {{ else }}
        <div class="column">
          CONTENT
        </div>
        <div class="column">
          IMAGE
        </div>
      {{ end }}
    </div>
  {{ end }}

As you can see, I alternate between IMAGE-CONTENT and CONTENT-IMAGE depending on modBool’s results

6

I’ve just implemented something like this using CSS nth-... selectors, on a site I’m building at the moment. It floats alternate images left then right within a post, to make a more balanced layout.

Unfortunately no live demo yet, as the site’s still got a bit of fettling before it goes online, but see attached image for a crude demonstration of what it does.

Here’s the CSS basics. You may be able to use something similar to achieve what you’re after:

figure:nth-of-type(odd) {
  float: left;
}

figure:nth-of-type(even) {
  float: right;
}