diff options
| author | Matt Rude <[email protected]> | 2019-10-08 21:01:52 +0000 |
|---|---|---|
| committer | Matt Rude <[email protected]> | 2019-10-08 21:01:52 +0000 |
| commit | 586492ed8781c501e95f46f241fa7f3bd1d0264e (patch) | |
| tree | f6b7ee58e307cc91081efa9e322998d36bd2d585 | |
| parent | f105b573fce24717fea3f9f1267e31b0656a0438 (diff) | |
| download | therudes_com-586492ed8781c501e95f46f241fa7f3bd1d0264e.tar.gz therudes_com-586492ed8781c501e95f46f241fa7f3bd1d0264e.tar.bz2 therudes_com-586492ed8781c501e95f46f241fa7f3bd1d0264e.zip | |
Adding image resizing to size
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | Gemfile | 1 | ||||
| -rw-r--r-- | _config.yml | 11 | ||||
| -rw-r--r-- | _includes/photo.html | 7 | ||||
| -rw-r--r-- | _includes/responsive-image.html | 6 |
5 files changed, 24 insertions, 2 deletions
@@ -3,3 +3,4 @@ _site .jekyll-metadata .sass-cache Gemfile.lock +assets/resized/* @@ -5,6 +5,7 @@ gem 'jekyll' gem 'execjs' gem 'therubyracer' gem 'jekyll-watch' +gem 'jekyll-responsive-image' gem 'jekyll-paginate-v2' gem 'jekyll-minifier' gem 'jekyll-sitemap' diff --git a/_config.yml b/_config.yml index e2b800f..42fcd65 100644 --- a/_config.yml +++ b/_config.yml @@ -24,10 +24,19 @@ exclude: - LICENSE - README.md -#plugins: +plugins: +- jekyll-responsive-image #- jekyll-minifier #- jekyll-sitemap +responsive_image: + template: _includes/responsive-image.html + default_quality: 90 + sizes: + - width: 920 + strip: true + cache: true + #jekyll-minifier: # exclude: # - robots.txt diff --git a/_includes/photo.html b/_includes/photo.html index 85d4585..307284d 100644 --- a/_includes/photo.html +++ b/_includes/photo.html @@ -15,7 +15,12 @@ <div class="tab-content"> {% for photo in site.data.photos %} <div role="tabpanel" class="tab-pane {% if forloop.first %}active{% endif %}" id="{{ photo.year }}"> - <img src="/assets/img/family-photos/{{ photo.image }}" class="img-responsive" alt="Responsive image" style="width:80%"> + {% responsive_image_block %} + path: assets/img/family-photos/{{ photo.image }} + class: "img-responsive" + alt: "{{ item.year }}" + title: "{{ item.year }}" + {% endresponsive_image_block %} {% if photo.discription %} <div> <h2>{{ photo.title }}</h2> diff --git a/_includes/responsive-image.html b/_includes/responsive-image.html new file mode 100644 index 0000000..d81ff1f --- /dev/null +++ b/_includes/responsive-image.html @@ -0,0 +1,6 @@ +<picture> + {% for i in resized %} + <source media="(min-width: {{ i.width }}px)" srcset="/{{ i.path }}"> + {% endfor %} + <img src="/{{ path }}"> +</picture> |