Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: support featured images (resolves #281) #278

Merged
merged 5 commits into from
Jun 12, 2020
Merged

feat: support featured images (resolves #281) #278

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d4d5f08
feat: display featured images on views grid
cindyli Jun 11, 2020
52d3e98
fix: improve the display of views grid images; remove image lazy loading
cindyli Jun 11, 2020
ee0e7b6
Merge branch 'dev' into feat/feature-image-for-views
cindyli Jun 12, 2020
6d8637b
feat: support the display of featured images on the views grid and posts
cindyli Jun 12, 2020
1feb1f5
fix: fix the issue that post preview contents are too narrow
cindyli Jun 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 26 additions & 17 deletions src/_includes/components/grid-item.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
<article class="news-item">
{% if item.category === 'views' %}
<div class="preview-media-wrapper">
<figure class="content">
{% if item.picture %}
<img src="{{ item.picture | safe }}" alt="{{ item.altTag }}">
{% else %}
<svg class="logo placeholder-img">
<use xlink:href="#placeholder" />
</svg>
{% endif %}
</figure>
</div>
{% endif %}

<div class="content-preview">
<h2 class="h3">
<a href="{{ item.href }}">{{ item.title | safe }}</a>
</h2>
{% if item.category === 'views' %}
<figure class="preview-media">
<svg class="logo news-item-img">
<use xlink:href="#placeholder" />
</svg>
</figure>
<div class="author">{{ item.author | safe }}</div>
{% endif %}
<h2 class="h3">
<a href="{{ item.href }}">{{ item.title | safe }}</a>
</h2>
{% if item.category === 'views' %}
<div class="author">{{ item.author | safe }}</div>
{% endif %}
<div class="date">
<time datetime="{{ item.dateTime | w3DateFilter }}" class="dt-published">{{ item.dateTime | dateFilter }}</time>
</div>
<div class="preview-content">
{{ item.excerpt | striptags | safe }}
</div>
<div class="date">
<time datetime="{{ item.dateTime | w3DateFilter }}" class="dt-published">{{ item.dateTime | dateFilter }}</time>
</div>
<div class="preview-content">
{{ item.excerpt | striptags | safe }}
</div>
</div>
</article>
12 changes: 10 additions & 2 deletions src/_includes/layouts/page.njk → src/page.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
---
pagination:
data: collections.pages
size: 1
alias: pageItem
permalink: "/{{ '/' if pageItem.slug === 'home' else pageItem.slug }}/"
---

{% extends 'layouts/base.njk' %}

{% set pageTitle = pageItem.title %}
Expand All @@ -9,7 +17,7 @@
<article>
<h1 class="title">{{ pageTitle }}</h1>
<div class="api-content">
{{ content | safe }}
{{ pageItem.content | safe }}
</div>
</article>
<div class="homepage-cards">
Expand All @@ -29,7 +37,7 @@
<article class="page">
<h1>{{ pageTitle }}</h1>
<div class="api-content">
{{ content | safe }}
{{ pageItem.content | safe }}
</div>
</article>
{% endif %}
Expand Down
9 changes: 0 additions & 9 deletions src/pageItem.njk
View file
Open in desktop

This file was deleted.

15 changes: 15 additions & 0 deletions src/_includes/layouts/post.njk → src/post.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
---
pagination:
data: collections.views
size: 1
alias: postItem
permalink: "views/{{ postItem.slug }}/"
---

{% extends 'layouts/base.njk' %}

{% set pageTitle = postItem.title %}
Expand All @@ -8,6 +16,13 @@
<h1>{{ postItem.title | safe }}</h1>
<div class="author">By {{ postItem.author }}</div>
<time class="date" datetime="{{ postItem.dateTime | w3DateFilter }}" class="dt-published">{{ postItem.dateTime | dateFilter }}</time>
{% if postItem.picture %}
<div class="preview-media-wrapper">
<figure class="content">
<img src="{{ postItem.picture | safe }}" alt="{{ postItem.altTag }}">
</figure>
</div>
{% endif %}
<div class="api-content">{{ postItem.content | safe }}</div>
{% if postItem.tags.length > 0 %}
<section class="tags-info">
Expand Down
22 changes: 22 additions & 0 deletions src/scss/abstracts/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,27 @@
// Mixins.

// Maintain aspect ration of a container
@mixin aspect-ratio($width, $height) {
position: relative;

&::before {
content: " ";
display: block;
padding-top: ($height / $width) * 100%;
width: 100%;
}

> .content {
bottom: 0;
display: block;
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
}
}

// To adapt to UIO contrast themes
@mixin adapt-to-uioThemes($fColor, $bColor) {
// WeCount logo
Expand Down
37 changes: 23 additions & 14 deletions src/scss/components/_news-and-views.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,19 +142,12 @@
box-sizing: border-box;

.news-item {
padding: rem(8) rem(34);

figure {
.preview-media-wrapper .content {
display: none;
height: rem(298);
}

// resize images
.news-item-img {
display: block;
height: 100%;
margin: 0 auto;
width: 100%;
}
.content-preview {
padding: rem(1) rem(60);
}

.author {
Expand Down Expand Up @@ -205,9 +198,25 @@
.news-grid {
grid-template-columns: repeat(2, 1fr);

.api-content .news-item figure {
display: block;
height: rem(252);
.api-content .news-item {
padding: 0;

.preview-media-wrapper {
@include aspect-ratio(16, 9);

// Style the placeholder images
.placeholder-img {
height: 100%;
width: 100%;
}

// Style featured images
img {
height: 100%;
object-fit: cover;
width: 100%;
}
}
}
}
}
12 changes: 12 additions & 0 deletions src/scss/components/_post-article.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,16 @@
.post-article {
.preview-media-wrapper {
@include aspect-ratio(16, 9);

margin-top: rem(16);

img {
height: 100%;
object-fit: cover;
width: 100%;
}
}

.author {
color: $grey-light;
font-style: italic;
Expand Down
39 changes: 22 additions & 17 deletions src/search.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,27 +25,32 @@ permalink: /search/
{# TODO: The gride item layout below can go into a sharable vue template script
when https://github.com/11ty/eleventy-plugin-vue is released #}
<article class="news-item">
<figure v-if="item.category==='views'" class="preview-media">
<svg class="logo news-item-img">
<use xlink:href="#placeholder" />
</svg>
</figure>
<div class="preview-media-wrapper">
<figure v-if="item.category==='views'" class="content">
<svg v-if="item.picture===null" class="logo placeholder-img">
<use xlink:href="#placeholder" />
</svg>
<img v-else :src="item.picture" :alt="item.altTag">
</figure>
</div>

<h2 class="h3">
<a :href="item.href">
{{ '{{ item.title }}' }}
</a>
</h2>
<div class="content-preview">
<h2 class="h3">
<a :href="item.href">
{{ '{{ item.title }}' }}
</a>
</h2>

<div v-if="item.category==='views'" class="author">
{{ '{{ item.author }}' }}
</div>
<div v-if="item.category==='views'" class="author">
{{ '{{ item.author }}' }}
</div>

<div v-if="item.dateTime" class="date">
<time :datetime="item.dateTime" class="dt-published">{{ '{{ item.dateTime }}' }}</time>
</div>
<div v-if="item.dateTime" class="date">
<time :datetime="item.dateTime" class="dt-published">{{ '{{ item.dateTime }}' }}</time>
</div>

<div v-html="item.excerpt" class="preview-content" />
<div v-html="item.excerpt" class="preview-content" />
</div>
</article>
</div>
</div>
Expand Down
9 changes: 0 additions & 9 deletions src/viewsItem.njk
View file
Open in desktop

This file was deleted.