N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add image attribution for post and page feature images

Browse source
This commit is contained in:
Michael Rose 2013-09-07 09:05:36 -04:00
parent 07b98f3459
commit 3d59923b7f
13 changed files with 51 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
README.md
View file

@ -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... 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 #### 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). 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).

11
_layouts/home.html
View file

@ -13,13 +13,10 @@
{% include navigation.html %} {% include navigation.html %}
<div class="image-wrap"> {% if page.image.feature %}<div class="image-wrap">
<div class="headline-wrap"> <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
<h1>{{ page.title }}</h1> {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
{% if page.tagline %}<h2>{{ page.tagline }}</h2>{% endif %} </div><!-- /.image-wrap -->{% endif %}
</div><!--/ .headline-wrap -->
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
</div><!-- /.image-wrap -->
<div class="article-author-top"> <div class="article-author-top">
{% include author-bio.html %} {% include author-bio.html %}

1
_layouts/page.html
View file

@ -15,6 +15,7 @@
{% if page.image.feature %}<div class="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"> <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><!-- /.image-wrap -->{% endif %}
<div id="main" role="main" itemprop="mainContentOfPage"> <div id="main" role="main" itemprop="mainContentOfPage">

1
_layouts/post.html
View file

@ -15,6 +15,7 @@
{% if page.image.feature %}<div class="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"> <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><!-- /.image-wrap -->{% endif %}
<div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog"> <div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">

2
_posts/2011-03-10-sample-post.md
View file

@ -7,6 +7,8 @@ category: articles
tags: [intro, beginner, jekyll, tutorial] tags: [intro, beginner, jekyll, tutorial]
image: image:
feature: texture-feature-05.jpg feature: texture-feature-05.jpg
credit: Texture Lovers
creditlink: http://texturelovers.com
--- ---
<section id="table-of-contents" class="toc"> <section id="table-of-contents" class="toc">

2
about.md
View file

@ -6,6 +6,8 @@ tagline: Minimal Mistakes, a Jekyll Theme
tags: [about, Jekyll, theme, responsive] tags: [about, Jekyll, theme, responsive]
image: image:
feature: texture-feature-02.jpg 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. 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.

8
assets/css/ie.css
View file

@ -52,11 +52,7 @@ a:focus{outline:thin dotted;color:#010101;}
a:hover,a:active{outline:0;} a:hover,a:active{outline:0;}
.link-arrow{font-weight:100;text-decoration:underline;font-style:normal;} .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;} 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{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;}
.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;}
.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;} .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;} 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;} .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%;} .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,.image-wrap:after{left:25%;}
.image-wrap .headline-wrap{margin-left:0;} .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%;} #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%;} #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%;} .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%;} .top-navigation{display:inline;float:left;width:66.66666666666667%;}
.image-wrap:after{left:33.333333333%;} .image-wrap:after{left:33.333333333%;}
.image-wrap .headline-wrap{margin-left:8.333333333333334%;} .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%;} #main article{display:inline;float:left;width:37.5%;}
#index{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%;} .related-articles{display:inline;float:left;width:37.5%;margin-left:33.333333333333336%;margin-right:29.166666666666668%;}

8
assets/css/main.css
View file

@ -52,11 +52,7 @@ a:focus{outline:thin dotted;color:#010101;}
a:hover,a:active{outline:0;} a:hover,a:active{outline:0;}
.link-arrow{font-weight:100;text-decoration:underline;font-style:normal;} .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;} 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{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;}
.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;}
.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;} .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;} 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;} .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-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-ready.mfp-bg{opacity:0.8;}
.mfp-fade.mfp-removing.mfp-bg{opacity:0;} .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){}

3
assets/less/1382.less
View file

@ -18,6 +18,9 @@
.prefix(12,1); .prefix(12,1);
} }
} }
.image-credit {
.grid(12,8.5);
}
#main article { #main article {
.grid(12,4.5); .grid(12,4.5);
} }

5
assets/less/600.less
View file

@ -23,6 +23,11 @@ html {
.image-wrap .headline-wrap { .image-wrap .headline-wrap {
margin-left: 0; margin-left: 0;
} }
.image-credit {
.grid(12,9);
.prefix(12,0);
.suffix(12,0);
}
#main article { #main article {
.grid(12,6); .grid(12,6);
.prefix(12,0); .prefix(12,0);

13
assets/less/typography.less
View file

@ -53,16 +53,15 @@ figcaption {
// Feature Image Caption // Feature Image Caption
// -------------------------------------------------- // --------------------------------------------------
.image-credit { .image-credit {
margin: 0 auto; .grid(12,10);
max-width: 440px; .prefix(12,1);
padding-top: 5px; .suffix(12,1);
padding-right: 20px; display: block;
padding-left: 20px;
text-align: right; text-align: right;
.font(14); .font(12);
line-height: 1.3; line-height: 1.3;
font-style: italic;
color: lighten(@text-color, 30); color: lighten(@text-color, 30);
.clearfix();
a { a {
color: lighten(@text-color, 30); color: lighten(@text-color, 30);
} }

2
index.md
View file

@ -4,4 +4,6 @@ description: "A responsive Jekyll theme with editorial tendencies by designer Mi
tags: [Jekyll, theme, responsive, blog, template] tags: [Jekyll, theme, responsive, blog, template]
image: image:
feature: texture-feature-01.jpg feature: texture-feature-01.jpg
credit: Texture Lovers
creditlink: http://texturelovers.com
--- ---

11
theme-setup.md
View file

@ -6,6 +6,8 @@ description: "Instructions on how to install and customize the Jekyll theme Mini
tags: [Jekyll, theme, responsive] tags: [Jekyll, theme, responsive]
image: image:
feature: texture-feature-02.jpg feature: texture-feature-02.jpg
credit: Texture Lovers
creditlink: http://texturelovers.com
--- ---
<section id="table-of-contents" class="toc"> <section id="table-of-contents" class="toc">
@ -106,6 +108,15 @@ image:
thumb: thumbnail-image.jpg #keep it square 200x200 px is good thumb: thumbnail-image.jpg #keep it square 200x200 px is good
{% endhighlight %} {% 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 #### 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. 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.