diff --git a/README.md b/README.md index 60831cdd..c72cc9a8 100644 --- a/README.md +++ b/README.md @@ -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). diff --git a/_layouts/home.html b/_layouts/home.html index bdced321..6fdc15f1 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -13,13 +13,10 @@ {% include navigation.html %} -
-
-

{{ page.title }}

- {% if page.tagline %}

{{ page.tagline }}

{% endif %} -
- {{ page.title }} feature image -
+{% if page.image.feature %}
+ {{ page.title }} feature image + {% if page.image.credit %}Photo Credit: {{ page.image.credit }}{% endif %} +
{% endif %}
{% include author-bio.html %} diff --git a/_layouts/page.html b/_layouts/page.html index 754c0651..00d1bd16 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -15,6 +15,7 @@ {% if page.image.feature %}
{{ page.title }} feature image + {% if page.image.credit %}Photo Credit: {{ page.image.credit }}{% endif %}
{% endif %}
diff --git a/_layouts/post.html b/_layouts/post.html index de352d0d..6d27a1b0 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -15,6 +15,7 @@ {% if page.image.feature %}
{{ page.title }} feature image + {% if page.image.credit %}Photo Credit: {{ page.image.credit }}{% endif %}
{% endif %}
diff --git a/_posts/2011-03-10-sample-post.md b/_posts/2011-03-10-sample-post.md index 62112a74..738f57a0 100644 --- a/_posts/2011-03-10-sample-post.md +++ b/_posts/2011-03-10-sample-post.md @@ -7,6 +7,8 @@ category: articles tags: [intro, beginner, jekyll, tutorial] image: feature: texture-feature-05.jpg + credit: Texture Lovers + creditlink: http://texturelovers.com ---
diff --git a/about.md b/about.md index 492933c6..e6a825fc 100644 --- a/about.md +++ b/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. diff --git a/assets/css/ie.css b/assets/css/ie.css index fd3a4239..0377c607 100644 --- a/assets/css/ie.css +++ b/assets/css/ie.css @@ -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%;} diff --git a/assets/css/main.css b/assets/css/main.css index bf14781f..9dbf8531 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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){} diff --git a/assets/less/1382.less b/assets/less/1382.less index 617b2aeb..8402d8c3 100644 --- a/assets/less/1382.less +++ b/assets/less/1382.less @@ -18,6 +18,9 @@ .prefix(12,1); } } +.image-credit { + .grid(12,8.5); +} #main article { .grid(12,4.5); } diff --git a/assets/less/600.less b/assets/less/600.less index 47fd85e8..615105c0 100644 --- a/assets/less/600.less +++ b/assets/less/600.less @@ -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); diff --git a/assets/less/typography.less b/assets/less/typography.less index e56044a7..eddd31bd 100644 --- a/assets/less/typography.less +++ b/assets/less/typography.less @@ -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); } diff --git a/index.md b/index.md index e176244e..0d6d247c 100644 --- a/index.md +++ b/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 --- \ No newline at end of file diff --git a/theme-setup.md b/theme-setup.md index 6e139e6c..3e8a6c03 100644 --- a/theme-setup.md +++ b/theme-setup.md @@ -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 ---
@@ -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.