Skip an entry of the iteration

support
1

How can I ‘skip’ an entry of a range iteration without knowing which one, by an specific offset maybe?

Because I don’t know a more effective way to do this, the condition to be skipped is the article have a parameter present, namely featured

If an article is marked as featured it’s going to have a big picture and more details. Everything that’s not featured will be part of a Carousel. This way I avoid a visual and unnecessary repetition.

Here’s the current markup:

{{ range where .Paginator.Pages "Params.category" "!=" nil }}

<div class="entry">

  <h2>
    {{ .Params.category }}
    <span class="fa fa-chevron-right"></span>
  </h2>

  <div class="row justify-content-center">

    <div class="col-11 col-md-5 d-flex justify-content-center align-items-center featured">

      <img src="{{ .Params.cover | absURL }}" />

    </div>

    <div class="col-7 col-md-7 d-flex justify-content-center align-items-center hidden-sm-down">

      Carousel

    </div>

  </div>

</div>

<hr />

{{- end }}

And an article example:

+++
date = "2017-05-27T11:04:59-03:00"
title = "Titlte"
cover = "featured/category_cover.jpg"
poster = "posters/poster1.jpg"
category = "Some Category"
weight = 7
featured = true
+++

Summary

<!--more-->

Lorem ipsum dolor blah blah blah

Of course, if you have a better and more elegant/efficient solution, I’m all ears

2

I think you need to include a check for the featured parameter, so that you don’t render duplicate content.

Something along the lines of:

{{ range where .Paginator.Pages "Params.featured" "eq" "true" }}
Featured Post markup
{{ end }}

And then

{{ range where .Paginator.Pages "Params.featured" "ne" "true" }}
Carousel markup
{{ end }}
3

I don’t think it’s not that simple. Your attempt rendered all <div> of all featured articles at once and then all Carousels at once. The markup created with Bootstrap was created to produce something like this:

EXAMPLE.png840×276 9.2 KB

4

You can specify how many articles you want rendered per page in the range function.

I only posted an example of how you could do a check to see if featured=true

5

I understand that but, although I don’t know Hugo/Go deeply, I know how to condition from what I’ve read in the manual and by checking on other themes.

My problem problem is how repeat that markup, fully functional statically, within Hugo

6

Repeat the markup? As in various sections? In that case you could place the featured posts and the carousel in partials and call them wherever you like.

See here for more on partials: https://gohugo.io/templates/partials/#readout

7

I believe you’re not understanding my question.

I already use partials, for header, footer, navigation… I don’t need to abstract a static markup to use multiple times in different parts of the theme. As far as I can tell, what I need is literally a way to control the range iteration and if .Params.featured is equal to true (of if it’s present, so I don’t need to define that parameter everywhere just to set as false) I render the <img/> tag and literally skip to next iteration.

I saw in Go docs and it seems there’s a continue keyword that, in theory, should do the trick, but I don’t if it’s supported within Hugo or if I can control the iteration flow the way I’m thinking.

An update to the code:

<div class="container" id="main">

  {{ range .Data.Pages.GroupByParam "category" }}

    <div class="items">

      <h2>
        {{ .Key }}
        <span class="fa fa-chevron-right"></span>
      </h2>

      {{ range .Pages }}

      <div class="row justify-content-center">

        {{ if .Params.featured }}

        <div class="col-11 col-md-5 d-flex justify-content-center align-items-center featured">

          <img src="{{ .Params.cover | absURL }}" />

        </div>

        {{ end }}

        <div class="col-7 col-md-7 d-flex justify-content-center align-items-center hidden-sm-down">

          {{ .Title }}

        </div>

      </div>

      {{ end }}

    </div>

    <hr />

  {{- end }}

  </div>

This way if an article has the featured parameter its big picture is rendered, but because the iteration flow still the same {{ .Title }} holds the Title of the Featured Article while the intention is move forward to, let’s say, the second article which, here, for example, will fail the test and not render the <img/> tag

8

In your code {{- end }} should be {{ end }}
also
{{ if .Params.featured }} should be {{ with .Params.featured }}
and I also think that
{{ .Title }} should be {{ with .Params.title }}{{ . }}{{ end }}

Also you should move

<div class="col-7 col-md-7 d-flex justify-content-center align-items-center hidden-sm-down">
          {{ with .Params.title }}{{ . }}{{ end }}
        </div>

Within the {{ with .Params.featured }} statement.

Try this and while you run Hugo server view the page’s source. You should have each post with {{ with .Params.featured }} rendered along with its img and title

Now how you decide to go through these featured posts e.g. with a slideshow or whatever is up to you, on the frontend.