From 9b9bf820fa6c09f13377e33f2190311d749b88eb Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 23 Jul 2017 20:40:33 +0200 Subject: [PATCH] homegrown cloudinary.com integration --- Gemfile | 1 - _config.yml | 4 +-- .../styl/_kremalicious/content-photo.styl | 15 ++++------ _src/_includes/articles.html | 4 +-- _src/_includes/featured.html | 2 +- _src/_includes/photos.html | 4 +-- _src/_includes/picture.html | 30 +++++++++++++++++++ _src/_includes/relatedphotos.html | 4 +-- _src/_includes/relatedposts.html | 2 +- _src/_layouts/page.html | 2 +- _src/_layouts/photo.html | 8 +++-- _src/_layouts/post.html | 2 +- ...and-the-history-of-the-first-photograph.md | 6 ++-- gulpfile.babel.js | 21 ++++++------- 14 files changed, 65 insertions(+), 40 deletions(-) create mode 100644 _src/_includes/picture.html diff --git a/Gemfile b/Gemfile index 33bd04af..1fce74b2 100644 --- a/Gemfile +++ b/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 diff --git a/_config.yml b/_config.yml index 83e05a00..f429fdbf 100644 --- a/_config.yml +++ b/_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 diff --git a/_src/_assets/styl/_kremalicious/content-photo.styl b/_src/_assets/styl/_kremalicious/content-photo.styl index aff57f3d..d8af08c7 100644 --- a/_src/_assets/styl/_kremalicious/content-photo.styl +++ b/_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 // diff --git a/_src/_includes/articles.html b/_src/_includes/articles.html index bcc67e9d..117c54dd 100644 --- a/_src/_includes/articles.html +++ b/_src/_includes/articles.html @@ -38,7 +38,7 @@
- {% picture phototeaser {{ post.image }} %} + {% include picture.html size='phototeaser' %}
{{ post.title | titlecase }}
@@ -57,7 +57,7 @@ {% if post.image %} - {% picture {{ post.image }} %} + {% include picture.html %} {% endif %} diff --git a/_src/_includes/featured.html b/_src/_includes/featured.html index f7223b15..3261fad5 100644 --- a/_src/_includes/featured.html +++ b/_src/_includes/featured.html @@ -5,7 +5,7 @@ {% if post.featured %}
- {% picture featured {{ post.image }} %} + {% include picture.html size='featured' %}

{{ post.title | titlecase }}
diff --git a/_src/_includes/photos.html b/_src/_includes/photos.html index d4a288a5..7ea3a3b2 100644 --- a/_src/_includes/photos.html +++ b/_src/_includes/photos.html @@ -1,7 +1,7 @@
- {% picture photothumb {{ post.image }} %} + {% include picture.html size='photothumb' %} -
\ No newline at end of file + diff --git a/_src/_includes/picture.html b/_src/_includes/picture.html new file mode 100644 index 00000000..bca0febe --- /dev/null +++ b/_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 %} + + + + + diff --git a/_src/_includes/relatedphotos.html b/_src/_includes/relatedphotos.html index 4213f7cb..ff9692b1 100644 --- a/_src/_includes/relatedphotos.html +++ b/_src/_includes/relatedphotos.html @@ -2,11 +2,11 @@
- {% for post in site.categories['photos'] limit:6 %} + {% for post in site.categories['photos'] limit:9 %} diff --git a/_src/_includes/relatedposts.html b/_src/_includes/relatedposts.html index 269cb9dc..5dc9ffb6 100644 --- a/_src/_includes/relatedposts.html +++ b/_src/_includes/relatedposts.html @@ -10,7 +10,7 @@
{% if post.image %} - {% picture featured {{ post.image }} %} + {% include picture.html size='photothumb' %} {% endif %}

{{ post.title | titlecase }}

 diff --git a/_src/_layouts/page.html b/_src/_layouts/page.html index 60ba44e6..a8162166 100644 --- a/_src/_layouts/page.html +++ b/_src/_layouts/page.html @@ -11,7 +11,7 @@ layout: base
{% if page.image %} - {% picture {{ page.image }} class="teaser" %} + {% include picture.html %} {% endif %} {{ content }} diff --git a/_src/_layouts/photo.html b/_src/_layouts/photo.html index fc208277..343aa75d 100644 --- a/_src/_layouts/photo.html +++ b/_src/_layouts/photo.html @@ -6,11 +6,13 @@ layout: base
+
+

{{ page.title | titlecase }}

+
+
- {% picture {{ page.image }} %} - -
{{ page.title | titlecase }}
+ {% include picture.html %}
diff --git a/_src/_layouts/post.html b/_src/_layouts/post.html index c1eba82f..fdd25d7c 100644 --- a/_src/_layouts/post.html +++ b/_src/_layouts/post.html @@ -15,7 +15,7 @@ layout: base
{% if page.image %}
- {% picture {{ page.image }} %} + {% include picture.html %}
{% endif %} diff --git a/_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md index 034e1e44..6bc1b7e0 100644 --- a/_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md +++ b/_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. diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 6e7b0df7..6282660e 100644 --- a/gulpfile.babel.js +++ b/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