M README.md => README.md +9 -0
@@ 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).
M _layouts/home.html => _layouts/home.html +4 -7
@@ 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 %}
M _layouts/page.html => _layouts/page.html +1 -0
@@ 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">
M _layouts/post.html => _layouts/post.html +1 -0
@@ 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">
M _posts/2011-03-10-sample-post.md => _posts/2011-03-10-sample-post.md +2 -0
@@ 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">
M about.md => about.md +2 -0
@@ 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.
M assets/css/ie.css => assets/css/ie.css +3 -5
@@ 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%;}
M assets/css/main.css => assets/css/main.css +2 -6
@@ 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){}
M assets/less/1382.less => assets/less/1382.less +3 -0
@@ 18,6 18,9 @@
.prefix(12,1);
}
}
+.image-credit {
+ .grid(12,8.5);
+}
#main article {
.grid(12,4.5);
}
M assets/less/600.less => assets/less/600.less +5 -0
@@ 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);
M assets/less/typography.less => assets/less/typography.less +6 -7
@@ 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);
}
M index.md => index.md +2 -0
@@ 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
---=
\ No newline at end of file
M theme-setup.md => theme-setup.md +11 -0
@@ 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.