Ensure cover images show in article carousel

This commit is contained in:
Matthew Grove
2019-03-06 18:23:13 +00:00
parent 55ac39b145
commit d903886346
9 changed files with 178 additions and 156 deletions

View File

@@ -24,26 +24,28 @@
{% assign article_list_displayed = true %}
{% endif %}
<!-- display article -->
<div class="mdc-card carousel-item">
<div class="mdc-card__media mdc-card__media--16-9 {{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }}"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">{{ article.title }}</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%A %e %B %Y' }}</time>
| by {{ article.authors }}
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ article.url | relative_url }}';">Read</button>
<div class="carousel-item">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 {{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }}"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">{{ article.title }}</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%A %e %B %Y' }}</time>
| by {{ article.authors }}
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ article.url | relative_url }}';">Read</button>
</div>
</div>
</div>
<style>
.{{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }} {
background-image: url("/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--cover.jpg");
}
</style>
<style>
.{{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }} {
background-image: url("/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--cover.jpg");
}
</style>
</div>
</div>
{% assign break = true %}
{% break %}