News Box for Magazine Layout

tips & tricks
2

Here is a second example. The Newsbox is divided into 2 columns. Left and right.
In the right column i use a Param “thumbnailteaser” which is the text beside the thumbnail.
In the frontmatter it looks like:

thumbnailteaser = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor"
And then style it with css as you like.

news-box-vertical.jpg614×501 30 KB 

{{ $ctitle := "All Articles" }}
{{ $filter := "post"  }}


<div class="row newsbox">
    <h3> <span class="tag tag-default">{{$ctitle}}</span></h3>
  <div class="col-md-6 box-left">
      {{ range (first 1 (where .Data.Pages "Section" $filter )) }}
        <a href="{{ .Permalink }}">
        <img class="featurepic" src='{{ $.Site.BaseURL }}/images/{{ .Params.image }}'/>
      </a>
      <p>
        <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
        {{ .Summary }}
      </p>
      {{ end }}

  </div>
  <div class="col-md-6 box-right">
        {{ range after 1 (first 5 (where .Data.Pages "Section" $filter )) }}
          <div class="box-item">
            <a href="{{ .Permalink }}">
            <img class="boxpic" width="100px" src='{{ $.Site.BaseURL }}/images/{{ .Params.image }}'/>
          </a>
              <h5><a href="{{ .Permalink }}">{{ .Title }}</a></h5>
              <small> {{  .Params.thumbnailteaser }} </small>

          </div>
       {{ end }}
  </div>
</div>