Highlight multiple post
Now the highlight post is based on the post data, so now we have more than only one highlight post. If you want make a highlighted post add highlight: true in your post data.
This commit is contained in:
Oscar Cortez
parent
3878e76dea
commit
2d264bfe74
4 changed files with 32 additions and 28 deletions
|
|
@ -23,13 +23,14 @@ Now add this in the _includes/head.html file, under the main css and enjoy your
|
|||
|
||||
## Post Options
|
||||
|
||||
All the post, require an image and maybe an author, the image are used in the cards and the autor used for the footer in the cards. For use the images and author, just add a new key in the post config, something like this:
|
||||
All the post, require an image and maybe an author and declare if the post is highlighted or not, the image are used in the cards and the autor used for the footer in the cards, the highlighted post is used for make this 12 cols and not a card, if you want to use the custom images and set the author and the highlight post, just add a new key in the post config, something like this:
|
||||
|
||||
---
|
||||
layout: post
|
||||
title: "Welcome to jekyll-mdl"
|
||||
date: 2015-07-11 11:34:20
|
||||
categories: jekyll
|
||||
highlight: true
|
||||
image: http://www.wchs4pets.org/wp-content/uploads/2015/03/cat_1-jpg.jpg
|
||||
author: Google Developers Group Managua
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
{% assign post = site.posts.first %}
|
||||
<div class="section-highlight section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
|
||||
|
||||
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}></header>
|
||||
|
||||
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
|
||||
<div class="mdl-card__supporting-text">
|
||||
<h4>{{ post.title }}</h4>
|
||||
{{ post.excerpt }}
|
||||
</div>
|
||||
<div class="mdl-card__actions">
|
||||
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn-high">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn-high">
|
||||
<li><a href="https://www.facebook.com/dialog/share?app_id={app_id}&display=page&href={{ post.url | prepend: site.baseurl }}&redirect_uri={{ site.baseurl }}" class="mdl-menu__item">Facebook</a></li>
|
||||
<li><a href="https://twitter.com/share?url={{ post.url | prepend: site.baseurl }}&text={{ post.title }}&via={{ site.twitter_username }}" class="mdl-menu__item">Twitter</a></li>
|
||||
<li><a href="https://plus.google.com/share?url={{ post.url | prepend: site.baseurl }}" class="mdl-menu__item">Google+</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
|
@ -3,6 +3,7 @@ layout: post
|
|||
title: "Google Developers Group"
|
||||
date: 2015-10-11 04:34:20
|
||||
categories: GDG
|
||||
highlight: true
|
||||
image: http://4.bp.blogspot.com/-IOD6VutWGlA/UW8Jq05M0DI/AAAAAAAAAeA/OVckWFybKqg/s1600/DSC01317.JPG
|
||||
---
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
|
||||
|
|
|
|||
31
index.html
31
index.html
|
|
@ -5,9 +5,35 @@ layout: default
|
|||
<div class="mdl-grid">
|
||||
{% if site.post_type == 'highlight' %}
|
||||
|
||||
{% include highlight_post.html %}
|
||||
{% for post in site.posts %}
|
||||
{% if post.highlight %}
|
||||
|
||||
{% for post in site.posts offset:1 %}
|
||||
<div class="section-highlight section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
|
||||
|
||||
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}></header>
|
||||
|
||||
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
|
||||
<div class="mdl-card__supporting-text">
|
||||
<h4>{{ post.title }}</h4>
|
||||
{{ post.excerpt }}
|
||||
</div>
|
||||
<div class="mdl-card__actions">
|
||||
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn-high">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn-high">
|
||||
<li><a href="https://www.facebook.com/dialog/share?app_id={app_id}&display=page&href={{ post.url | prepend: site.baseurl }}&redirect_uri={{ site.baseurl }}" class="mdl-menu__item">Facebook</a></li>
|
||||
<li><a href="https://twitter.com/share?url={{ post.url | prepend: site.baseurl }}&text={{ post.title }}&via={{ site.twitter_username }}" class="mdl-menu__item">Twitter</a></li>
|
||||
<li><a href="https://plus.google.com/share?url={{ post.url | prepend: site.baseurl }}" class="mdl-menu__item">Google+</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
|
||||
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone">
|
||||
<div class="mdl-card__title" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}>
|
||||
|
|
@ -35,6 +61,7 @@ layout: default
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue