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>