homegrown cloudinary.com integration

Gemfile

@@ -5,7 +5,6 @@ group :jekyll do
     gem 'jekyll', '3.4.3'
     gem 'jekyll-sitemap'
     gem 'jekyll-redirect-from'
-    gem 'jekyll-picture-tag'
     gem 'jekyll-archives'
     gem 'jekyll-paginate'
 end

_config.yml

@@ -31,6 +31,7 @@ paginate:               15
 paginate_path:          "/page/:num"
 category_dir:           "/"
 category_title_prefix:  ""
+media_url:              "https://res.cloudinary.com/kremalicious"
 
 
 # Content Parsing
@@ -48,7 +49,7 @@ redcarpet:
 
 source:                 ./_src
 destination:            ./_site
-keep_files:             ['media', 'gen']
+keep_files:             ['media']
 
 
 # Plugins
@@ -57,7 +58,6 @@ keep_files:             ['media', 'gen']
 gems:
     - jekyll-sitemap
     - jekyll-redirect-from
-    - jekyll-picture-tag
     - jekyll-paginate
     - jekyll-archives
 

_src/_assets/styl/_kremalicious/content-photo.styl

@@ -7,6 +7,9 @@
 .hentry.format-photo
     @extend .textcenter
 
+    .entry-title
+        margin-top: -($spacer * 1.5)
+
     figure
         @extend .aligncenter
         position: relative
@@ -29,7 +32,7 @@
             text-shadow: 0 1px 0 #000
 
             left: -($spacer)
-            top: $spacer
+            top: $spacer * 6
 
             @media $screen-sm
                 left: -($spacer * 4)
@@ -59,16 +62,10 @@
         figure img
             max-height: none
 
-        figcaption
-            opacity: 1
-            transform: translate(0,0)
-            background: #000
-            background: rgba(#000, .4)
-
 
 .photo-link
     display: block;
-    
+
     img
         @extend .media-frame
 
@@ -87,7 +84,7 @@
     &:active
         background: none
 
-    
+
 //
 // Photo background change adjustment
 //

_src/_includes/articles.html

@@ -38,7 +38,7 @@
         <a class="photo-link" href="{{ post.url }}">
             <figure class="hentry__teaser hmedia">
 
-                {% picture phototeaser {{ post.image }} %}
+                {% include picture.html size='phototeaser' %}
 
                 <figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
             </figure>
@@ -57,7 +57,7 @@
 
             {% if post.image %}
                 <a class="hentry__teaser hentry__teaser--link" href="{{ post.url }}">
-                    {% picture {{ post.image }} %}
+                    {% include picture.html %}
                 </a>
             {% endif %}
 

_src/_includes/featured.html

@@ -5,7 +5,7 @@
             {% if post.featured %}
             <article class="grid__col">
                 <a class="hentry__teaser featured-link" href="{{ post.url }}" title="{{ post.title }}">
-                    {% picture featured {{ post.image }} %}
+                    {% include picture.html size='featured' %}
                     <h1 class="featured-title">{{ post.title | titlecase }}</h1>
                 </a>
             </article>

_src/_includes/photos.html

@@ -1,7 +1,7 @@
 <article class="grid__col">
 
     <a class="photo-link" href="{{ post.url }}" title="{{ post.title }}">
-        {% picture photothumb {{ post.image }} %}
+        {% include picture.html size='photothumb' %}
     </a>
 
-</article>
+</article>

_src/_includes/picture.html

@@ -0,0 +1,30 @@
+{% case include.size %}
+
+{% when 'phototeaser' %}
+     {% assign pictureSize = 'w_940,h_700,c_fill' %}
+     {% assign pictureSizeRetina = 'w_1880,h_1400,c_fill' %}
+{% when 'photothumb' %}
+    {% assign pictureSize = 'w_190,h_190,c_thumb' %}
+    {% assign pictureSizeRetina = 'w_380,h_380,c_thumb' %}
+{% when 'featured' %}
+    {% assign pictureSize = 'w_275,h_100,c_fill' %}
+    {% assign pictureSizeRetina = 'w_550,h_200,c_fill' %}
+{% else %}
+     {% assign pictureSize = 'w_940' %}
+     {% assign pictureSizeRetina = 'w_1880' %}
+{% endcase %}
+
+{% if include.file %}
+    {% assign pictureSrc = include.file %}
+{% else %}
+    {% if page.image %}
+        {% assign pictureSrc = page.image %}
+    {% else %}
+        {% assign pictureSrc = post.image %}
+    {% endif %}
+{% endif %}
+
+<picture>
+    <source srcset="{{ site.media_url }}/{{ pictureSizeRetina }}/media/{{ pictureSrc }}" media="(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)">
+    <img srcset="{{ site.media_url }}/{{ pictureSize }}/media/{{ pictureSrc }}" alt="">
+</picture>

_src/_includes/relatedphotos.html

@@ -2,11 +2,11 @@
 
     <div class="grid grid--gutters grid--half grid-medium--third">
 
-        {% for post in site.categories['photos'] limit:6 %}
+        {% for post in site.categories['photos'] limit:9 %}
 
             <article class="related-photo grid__col">
                 <a class="photo-link" href="{{ post.url }}">
-                    {% picture photothumb {{ post.image }} %}
+                    {% include picture.html size='photothumb' file=post.image %}
                 </a>
             </article>
 

_src/_includes/relatedposts.html

@@ -10,7 +10,7 @@
                 <article class="related-post grid__col">
                     <a class="post-title-link" href="{{ post.url }}">
                         {% if post.image %}
-                            {% picture featured {{ post.image }} %}
+                            {% include picture.html size='photothumb' %}
                         {% endif %}
                         <h1 class="post-title">{{ post.title | titlecase }}</h1>
                     </a>

_src/_layouts/page.html

@@ -11,7 +11,7 @@ layout: base
 
         <section class="entry-content">
             {% if page.image %}
-                {% picture {{ page.image }} class="teaser" %}
+                {% include picture.html %}
             {% endif %}
 
             {{ content }}

_src/_layouts/photo.html

@@ -6,11 +6,13 @@ layout: base
 
     <article class="hentry format-photo">
 
+        <header>
+            <h1 class="entry-title fn">{{ page.title | titlecase }}</h1>
+        </header>
+
         <figure class="hentry__teaser hmedia">
 
-            {% picture {{ page.image }} %}
-
-            <figcaption class="entry-title fn">{{ page.title | titlecase }}</figcaption>
+            {% include picture.html %}
 
         </figure>
 

_src/_layouts/post.html

@@ -15,7 +15,7 @@ layout: base
         <section class="entry-content">
             {% if page.image %}
                 <figure class="hentry__teaser">
-                    {% picture {{ page.image }} %}
+                    {% include picture.html %}
                 </figure>
             {% endif %}
 

_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md

@@ -24,10 +24,10 @@ redirect_from:
 
 These two desktop icons show the Camera Obscura as it was used by Nicéphore Niépce in an Aperture and iPhoto style and are intended as an homage to him. Nicéphore Niépce made it first possible to preserve an image taken with a camera obscura in 1826 or 1827 by using a special mixture of bitumen on a pewter plate, naming it Heliography. This first preserved photograph "View from the Window at Le Gras" is the one you can see in the iPhoto icon contained in this package. The third icon is the folder icon I have created for this icon package.
 
-{% picture cameraobscura11_all.png %}
-
 Either just download the icons or read the exciting story about the First Photograph.
 
+{% include picture.html file='cameraobscura11_all.png' %}
+
 # The story behind these icons
 
 There's a fascinating story behind these icons which is nothing more than the story of the invention of photography. Grab yourself a cup of coffee or tea and sit back while reading this story. Of course, if you're bored already just grab the download package further down this page.
@@ -47,7 +47,7 @@ In 1822 he created a first non-fading negative contact print by utilizing a bitu
 
 After some more tries and combining other elements in his procedure he was able to produce the famous First Photograph "View from the Window at Le Gras" in 1826 or 1827 by utilizing a bitumen of Judea-coated pewter plate and improved lenses from the Paris optician, Charles Chevalier. He called this procedure Heliography and the bitumen-coated pewter plate needed an exposure of eight or more hours!
 
-{% picture View-from-the-Window-at-Le-Gras.png %}
+{% include picture.html file='View-from-the-Window-at-Le-Gras.png' %}
 View from the Window at Le Gras
 
 By the way, in 2002 another Picture made by Niépce was discovered which dates back to 1825. It was made in a process he called Heliogravure and it was an image of an (engraving) image (showing a man leading a horse). But since the scientific definition of the First Photograph is "the world's first permanent photograph from nature", "View from the Window at Le Gras" remains the First "real" photograph.

gulpfile.babel.js

@@ -217,12 +217,6 @@ const js = () =>
     .pipe(dest(DIST + '/assets/js/'))
 
 
-//
-// SVG sprite
-//
-
-
-
 //
 // Images
 //
@@ -244,11 +238,6 @@ export const svg = () => src(SRC + '/_assets/img/**/*.svg')
     .pipe($.svgSprite(SPRITECONFIG))
     .pipe(dest(DIST + '/assets/img/'))
 
-// optimize Jekyll generated images
-export const imagesGenerated = () => src(DIST + '/media/gen/**/*')
-    .pipe($.if(isProduction, $.imagemin(imageminPlugins)))
-    .pipe(dest(DIST + '/media/gen/'))
-
 
 //
 // Copy fonts
@@ -373,7 +362,15 @@ export const buildBanner = (done) => {
 // `gulp build` is the development build
 // `gulp build --production` is the production build
 //
-export const build = series(buildBanner, clean, jekyll, parallel(html, css, js, svg, images, imagesGenerated, fonts, media), rev, revReplace, criticalCss)
+export const build = series(
+    buildBanner,
+    clean,
+    jekyll,
+    parallel(html, css, js, svg, images, fonts, media),
+    rev,
+    revReplace,
+    criticalCss
+)
 
 //
 // Build site, run server, and watch for file changes