Add image attribution for post and page feature images
This commit is contained in:
Michael Rose
parent
07b98f3459
commit
3d59923b7f
13 changed files with 51 additions and 25 deletions
|
|
@ -112,6 +112,15 @@ image:
|
|||
|
||||
The large texture images used in *Minimal Mistakes* are from [Love Textures](http://lovetextures.com), probably a good idea to swap these out with your own photos...
|
||||
|
||||
If you want to apply attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source.
|
||||
|
||||
``` yaml
|
||||
image:
|
||||
feature: feature-image-filename.jpg
|
||||
credit: Michael Rose #name of the person or site you want to credit
|
||||
creditlink: http://mademistakes.com #url to their site or licensing
|
||||
```
|
||||
|
||||
#### Categories
|
||||
|
||||
In the sample `_posts` folder you may have noticed `category: articles` in the front matter. I like keeping all posts grouped in the same folder. If you decide to rename or add categories you will need to modify the permalink in `articles.md` along with the filename (if renaming).
|
||||
|
|
|
|||
|
|
@ -13,13 +13,10 @@
|
|||
|
||||
{% include navigation.html %}
|
||||
|
||||
<div class="image-wrap">
|
||||
<div class="headline-wrap">
|
||||
<h1>{{ page.title }}</h1>
|
||||
{% if page.tagline %}<h2>{{ page.tagline }}</h2>{% endif %}
|
||||
</div><!--/ .headline-wrap -->
|
||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
|
||||
</div><!-- /.image-wrap -->
|
||||
{% if page.image.feature %}<div class="image-wrap">
|
||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
|
||||
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
|
||||
</div><!-- /.image-wrap -->{% endif %}
|
||||
|
||||
<div class="article-author-top">
|
||||
{% include author-bio.html %}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
|
||||
{% if page.image.feature %}<div class="image-wrap">
|
||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
|
||||
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
|
||||
</div><!-- /.image-wrap -->{% endif %}
|
||||
|
||||
<div id="main" role="main" itemprop="mainContentOfPage">
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
|
||||
{% if page.image.feature %}<div class="image-wrap">
|
||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
|
||||
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
|
||||
</div><!-- /.image-wrap -->{% endif %}
|
||||
|
||||
<div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ category: articles
|
|||
tags: [intro, beginner, jekyll, tutorial]
|
||||
image:
|
||||
feature: texture-feature-05.jpg
|
||||
credit: Texture Lovers
|
||||
creditlink: http://texturelovers.com
|
||||
---
|
||||
|
||||
<section id="table-of-contents" class="toc">
|
||||
|
|
|
|||
2
about.md
2
about.md
|
|
@ -6,6 +6,8 @@ tagline: Minimal Mistakes, a Jekyll Theme
|
|||
tags: [about, Jekyll, theme, responsive]
|
||||
image:
|
||||
feature: texture-feature-02.jpg
|
||||
credit: Texture Lovers
|
||||
creditlink: http://texturelovers.com
|
||||
---
|
||||
|
||||
Jekyll is pretty rad and figured releasing a cleaned up version of [my site](http://mademistakes.com) as a theme for others to hack and build on would be fun. So here be that theme --- I call it **Minimal Mistakes**, a responsive Jekyll theme with large featured images and solid typography.
|
||||
|
|
|
|||
|
|
@ -52,11 +52,7 @@ a:focus{outline:thin dotted;color:#010101;}
|
|||
a:hover,a:active{outline:0;}
|
||||
.link-arrow{font-weight:100;text-decoration:underline;font-style:normal;}
|
||||
figcaption{padding-top:10px;font-size:14px;font-size:0.875rem;line-height:1.8571;line-height:1.3;color:#4d4d4b;}
|
||||
.image-credit{margin:0 auto;max-width:440px;padding-top:5px;padding-right:20px;padding-left:20px;text-align:right;font-size:14px;font-size:0.875rem;line-height:1.8571;line-height:1.3;color:#80807e;*zoom:1;}.image-credit:before,.image-credit:after{display:table;content:"";}
|
||||
.image-credit:after{clear:both;}
|
||||
.image-credit:before,.image-credit:after{display:table;content:"";line-height:0;}
|
||||
.image-credit:after{clear:both;}
|
||||
.image-credit a{color:#80807e;}
|
||||
.image-credit{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;display:block;text-align:right;font-size:12px;font-size:0.75rem;line-height:2.1667;line-height:1.3;font-style:italic;color:#80807e;}.image-credit a{color:#80807e;}
|
||||
.notice{margin-top:1.5em;padding:.5em 1em;text-indent:0;font-size:14px;font-size:0.875rem;background-color:#ffffff;border:1px solid #cccccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
blockquote{margin-left:-28px;padding-left:20px;border-left:8px solid #333332;font-family:'PT Serif',serif;font-style:italic;font-size:24px;font-size:1.5rem;}
|
||||
.entry-content .footnotes ol,.entry-content .footnotes li,.entry-content .footnotes p{font-size:14px;font-size:0.875rem;line-height:1.8571;margin-bottom:26px;margin-bottom:1.625rem;}
|
||||
|
|
@ -200,6 +196,7 @@ html{font-size:95%;}
|
|||
.top-navigation{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%;}
|
||||
.image-wrap .headline-wrap,.image-wrap:after{left:25%;}
|
||||
.image-wrap .headline-wrap{margin-left:0;}
|
||||
.image-credit{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%;}
|
||||
#main article{display:inline;float:left;width:50%;margin-left:0%;margin-right:0%;}
|
||||
#index{display:inline;float:left;width:50%;margin-left:0%;margin-right:0%;}
|
||||
.footer-wrap footer{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%;}
|
||||
|
|
@ -216,6 +213,7 @@ html{font-size:112.5%;}
|
|||
.top-navigation{display:inline;float:left;width:66.66666666666667%;}
|
||||
.image-wrap:after{left:33.333333333%;}
|
||||
.image-wrap .headline-wrap{margin-left:8.333333333333334%;}
|
||||
.image-credit{display:inline;float:left;width:70.83333333333334%;}
|
||||
#main article{display:inline;float:left;width:37.5%;}
|
||||
#index{display:inline;float:left;width:37.5%;}
|
||||
.related-articles{display:inline;float:left;width:37.5%;margin-left:33.333333333333336%;margin-right:29.166666666666668%;}
|
||||
|
|
|
|||
|
|
@ -52,11 +52,7 @@ a:focus{outline:thin dotted;color:#010101;}
|
|||
a:hover,a:active{outline:0;}
|
||||
.link-arrow{font-weight:100;text-decoration:underline;font-style:normal;}
|
||||
figcaption{padding-top:10px;font-size:14px;font-size:0.875rem;line-height:1.8571;line-height:1.3;color:#4d4d4b;}
|
||||
.image-credit{margin:0 auto;max-width:440px;padding-top:5px;padding-right:20px;padding-left:20px;text-align:right;font-size:14px;font-size:0.875rem;line-height:1.8571;line-height:1.3;color:#80807e;*zoom:1;}.image-credit:before,.image-credit:after{display:table;content:"";}
|
||||
.image-credit:after{clear:both;}
|
||||
.image-credit:before,.image-credit:after{display:table;content:"";line-height:0;}
|
||||
.image-credit:after{clear:both;}
|
||||
.image-credit a{color:#80807e;}
|
||||
.image-credit{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;display:block;text-align:right;font-size:12px;font-size:0.75rem;line-height:2.1667;line-height:1.3;font-style:italic;color:#80807e;}.image-credit a{color:#80807e;}
|
||||
.notice{margin-top:1.5em;padding:.5em 1em;text-indent:0;font-size:14px;font-size:0.875rem;background-color:#ffffff;border:1px solid #cccccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
blockquote{margin-left:-28px;padding-left:20px;border-left:8px solid #333332;font-family:'PT Serif',serif;font-style:italic;font-size:24px;font-size:1.5rem;}
|
||||
.entry-content .footnotes ol,.entry-content .footnotes li,.entry-content .footnotes p{font-size:14px;font-size:0.875rem;line-height:1.8571;margin-bottom:26px;margin-bottom:1.625rem;}
|
||||
|
|
@ -334,4 +330,4 @@ img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;-w
|
|||
.mfp-fade.mfp-bg{opacity:0;-webkit-transition:opacity 0.3s ease-out;-moz-transition:opacity 0.3s ease-out;-ms-transition:opacity 0.3s ease-out;-o-transition:opacity 0.3s ease-out;transition:opacity 0.3s ease-out;}
|
||||
.mfp-fade.mfp-ready.mfp-bg{opacity:0.8;}
|
||||
.mfp-fade.mfp-removing.mfp-bg{opacity:0;}
|
||||
@media print{*{background:transparent !important;color:black !important;box-shadow:none !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important;position:static !important;} @page {margin:0.5cm;}h2,h3{orphans:3;widows:3;page-break-after:avoid;} p{orphans:3;widows:3;} pre,blockquote{border:1px solid #333;page-break-inside:avoid;padding:1em;} abbr[title]:after{content:" (" attr(title) ")";} a,a:visited{text-decoration:underline;} a[href]:after{content:" (" attr(href) ")";} a[href^="javascript:"]:after,a[href^="#"]:after{content:"";} img{max-width:100% !important;page-break-inside:avoid;} thead{display:table-header-group;} tr{page-break-inside:avoid;}}@media only screen and (min-width:30em){.image-grid li{width:33.333333%;}}@media only screen and (min-width:37.5em){html{font-size:95%;} .site-name{display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;} .top-navigation{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%;} .image-wrap .headline-wrap,.image-wrap:after{left:25%;} .image-wrap .headline-wrap{margin-left:0;} #main article{display:inline;float:left;width:50%;margin-left:0%;margin-right:0%;} #index{display:inline;float:left;width:50%;margin-left:0%;margin-right:0%;} .footer-wrap footer{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%;} .article-author-top{display:block;display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;} .article-author-bottom{display:none;} .toc{display:block;display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;position:fixed;top:120px;right:0;-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);box-shadow:0 0 5px rgba(0, 0, 0, 0.5);} .image-grid li{width:25%;} .related-articles{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%;}}@media only screen and (min-width:48em){html{font-size:100%;} .image-grid li{width:20%;}}@media only screen and (min-width:62em){html{font-size:112.5%;} .image-grid li{width:16.666666666%;}}@media only screen and (min-width:86.375em){.site-name{display:inline;float:left;width:12.5%;margin-left:16.666666666666668%;} .top-navigation{display:inline;float:left;width:66.66666666666667%;} .image-wrap:after{left:33.333333333%;} .image-wrap .headline-wrap{margin-left:8.333333333333334%;} #main article{display:inline;float:left;width:37.5%;} #index{display:inline;float:left;width:37.5%;} .related-articles{display:inline;float:left;width:37.5%;margin-left:33.333333333333336%;margin-right:29.166666666666668%;} .footer-wrap footer{display:inline;float:left;width:37.5%;margin-left:33.333333333333336%;margin-right:29.166666666666668%;} .article-author-top{display:inline;float:left;width:12.5%;margin-left:16.666666666666668%;}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){}
|
||||
@media print{*{background:transparent !important;color:black !important;box-shadow:none !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important;position:static !important;} @page {margin:0.5cm;}h2,h3{orphans:3;widows:3;page-break-after:avoid;} p{orphans:3;widows:3;} pre,blockquote{border:1px solid #333;page-break-inside:avoid;padding:1em;} abbr[title]:after{content:" (" attr(title) ")";} a,a:visited{text-decoration:underline;} a[href]:after{content:" (" attr(href) ")";} a[href^="javascript:"]:after,a[href^="#"]:after{content:"";} img{max-width:100% !important;page-break-inside:avoid;} thead{display:table-header-group;} tr{page-break-inside:avoid;}}@media only screen and (min-width:30em){.image-grid li{width:33.333333%;}}@media only screen and (min-width:37.5em){html{font-size:95%;} .site-name{display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;} .top-navigation{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%;} .image-wrap .headline-wrap,.image-wrap:after{left:25%;} .image-wrap .headline-wrap{margin-left:0;} .image-credit{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%;} #main article{display:inline;float:left;width:50%;margin-left:0%;margin-right:0%;} #index{display:inline;float:left;width:50%;margin-left:0%;margin-right:0%;} .footer-wrap footer{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%;} .article-author-top{display:block;display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;} .article-author-bottom{display:none;} .toc{display:block;display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;position:fixed;top:120px;right:0;-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);box-shadow:0 0 5px rgba(0, 0, 0, 0.5);} .image-grid li{width:25%;} .related-articles{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%;}}@media only screen and (min-width:48em){html{font-size:100%;} .image-grid li{width:20%;}}@media only screen and (min-width:62em){html{font-size:112.5%;} .image-grid li{width:16.666666666%;}}@media only screen and (min-width:86.375em){.site-name{display:inline;float:left;width:12.5%;margin-left:16.666666666666668%;} .top-navigation{display:inline;float:left;width:66.66666666666667%;} .image-wrap:after{left:33.333333333%;} .image-wrap .headline-wrap{margin-left:8.333333333333334%;} .image-credit{display:inline;float:left;width:70.83333333333334%;} #main article{display:inline;float:left;width:37.5%;} #index{display:inline;float:left;width:37.5%;} .related-articles{display:inline;float:left;width:37.5%;margin-left:33.333333333333336%;margin-right:29.166666666666668%;} .footer-wrap footer{display:inline;float:left;width:37.5%;margin-left:33.333333333333336%;margin-right:29.166666666666668%;} .article-author-top{display:inline;float:left;width:12.5%;margin-left:16.666666666666668%;}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@
|
|||
.prefix(12,1);
|
||||
}
|
||||
}
|
||||
.image-credit {
|
||||
.grid(12,8.5);
|
||||
}
|
||||
#main article {
|
||||
.grid(12,4.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,11 @@ html {
|
|||
.image-wrap .headline-wrap {
|
||||
margin-left: 0;
|
||||
}
|
||||
.image-credit {
|
||||
.grid(12,9);
|
||||
.prefix(12,0);
|
||||
.suffix(12,0);
|
||||
}
|
||||
#main article {
|
||||
.grid(12,6);
|
||||
.prefix(12,0);
|
||||
|
|
|
|||
|
|
@ -53,16 +53,15 @@ figcaption {
|
|||
// Feature Image Caption
|
||||
// --------------------------------------------------
|
||||
.image-credit {
|
||||
margin: 0 auto;
|
||||
max-width: 440px;
|
||||
padding-top: 5px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
.grid(12,10);
|
||||
.prefix(12,1);
|
||||
.suffix(12,1);
|
||||
display: block;
|
||||
text-align: right;
|
||||
.font(14);
|
||||
.font(12);
|
||||
line-height: 1.3;
|
||||
font-style: italic;
|
||||
color: lighten(@text-color, 30);
|
||||
.clearfix();
|
||||
a {
|
||||
color: lighten(@text-color, 30);
|
||||
}
|
||||
|
|
|
|||
2
index.md
2
index.md
|
|
@ -4,4 +4,6 @@ description: "A responsive Jekyll theme with editorial tendencies by designer Mi
|
|||
tags: [Jekyll, theme, responsive, blog, template]
|
||||
image:
|
||||
feature: texture-feature-01.jpg
|
||||
credit: Texture Lovers
|
||||
creditlink: http://texturelovers.com
|
||||
---
|
||||
|
|
@ -6,6 +6,8 @@ description: "Instructions on how to install and customize the Jekyll theme Mini
|
|||
tags: [Jekyll, theme, responsive]
|
||||
image:
|
||||
feature: texture-feature-02.jpg
|
||||
credit: Texture Lovers
|
||||
creditlink: http://texturelovers.com
|
||||
---
|
||||
|
||||
<section id="table-of-contents" class="toc">
|
||||
|
|
@ -106,6 +108,15 @@ image:
|
|||
thumb: thumbnail-image.jpg #keep it square 200x200 px is good
|
||||
{% endhighlight %}
|
||||
|
||||
If you want to apply attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source.
|
||||
|
||||
{% highlight yaml %}
|
||||
image:
|
||||
feature: feature-image-filename.jpg
|
||||
credit: Michael Rose #name of the person or site you want to credit
|
||||
creditlink: http://mademistakes.com #url to their site or licensing
|
||||
{% endhighlight %}
|
||||
|
||||
#### Thumbnails for OG and Twitter Cards
|
||||
|
||||
Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in *head.html*. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.
|
||||
|
|
|
|||
Loading…
Reference in a new issue