News Box for Magazine Layout

Hi All,
Magazine Layouts are important parts for Newssites.
Here i share my Newspaper Layout. See Screenshot.
You need bootstrap 3.

There are two parts. Top and bottom.

You define the image in the frontmatter:
image = “image-name.jpg”

Change Taxonomy ($cat) and Title($ctitle).

With that technique you can create every box you like.

Sorry but i have not much time to explain in details. Hope you got the idea.

{{ $cat := .Site.Taxonomies.categories.cities }}
{{ $ctitle := "cities" }}

<div class="row newsbox">
      <h3><span class="label label-default">{{ $ctitle }} </span></h3>
      <div class="row cardbox-top">
        <div class="col-md-6 box-left">
            {{ range (first 1 ( $cat )) }}
            <a href="{{ .Page.Permalink }}"><img class="featurepic img-rounded" src='{{ $.Site.BaseURL }}/images/{{ .Page.Params.image }}'/></a>
          {{ end }}
           </div>
        <div class="col-md-6 box-right">
            {{ range (first 1 ( $cat )) }}
            <div class="box-item">
              <h3><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a></h3>
              <p>
                {{ .Page.Summary }}
              </p>
                </div>
            {{ end }}
        </div>
      </div>


      <div class="row cardbox-bottom">
            {{ range after 1 (first 5 ( $cat )) }}
                  <div class="col-md-3">
                      <div class="card-group">
                      <div class="card">
                          <a href="{{ .Page.Permalink }}">
                          <img class="card-img-top" src='{{ $.Site.BaseURL }}/images/{{ .Page.Params.image }}'/>
                          </a>
                          <div class="card-block">
                            <h4 class="card-title"><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a></h4>
                          </div>
                      </div>
                  </div>
              </div>
           {{ end }}
      </div>
</div>

2 Likes

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.

{{ $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>