Skip to content

Instantly share code, notes, and snippets.

@jnschrag

jnschrag/cloudinary-images.rb

Created October 22, 2018 19:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jnschrag/fbfcf16d68562f24696d35902e7232c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jnschrag/fbfcf16d68562f24696d35902e7232c9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jnschrag created this gist Oct 22, 2018.
    9 changes: 9 additions & 0 deletions cloudinary-images.rb
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    # Finds images in markdown files and replace them with a cloudinary responsive image include
    Jekyll::Hooks.register :documents, :pre_render do |post, payload|
    docExt = post.extname.tr('.', '')
    # only process if we deal with a markdown file
    if payload['site']['markdown_ext'].include? docExt
    newContent = post.content.gsub(/\!\[(.*)?\]\((.*?)(?=\"|\))(\".*\")?\)/, '{% include cloudinary-responsive-img.html title=\3 alt="\1" path="\2" %}')
    post.content = newContent
    end
    end
    25 changes: 25 additions & 0 deletions cloudinary-responsive-img.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    {% if include.path.size > 0 %}
    <figure class="{{ include.classes | default: post__image }}">
    {% if include.path contains 'cloudinary' %}
    {% assign image_name = include.path | split: "/upload/" | last %}
    <img
    sizes="(max-width: 320px) 320px,
    (max-width: 375px) 335px,
    (max-width: 480px) 440px,
    (max-width: 675px) 635px,
    800px"
    srcset="{{ site.cloudinary_url }}f_auto,q_70,w_320/{{ image_name }} 320w,
    {{ site.cloudinary_url }}f_auto,q_70,w_335/{{ image_name }} 335w,
    {{ site.cloudinary_url }}f_auto,q_70,w_480/{{ image_name }} 480w,
    {{ site.cloudinary_url }}f_auto,q_70,w_635/{{ image_name }} 635w,
    {{ site.cloudinary_url }}f_auto,w_800/{{ image_name }} 800w"
    src="{{ site.cloudinary_url }}f_auto,w_800/v2/health-commission/{{ image_name }}" title="{{ include.title }}"
    alt="{{ include.title }}" />
    {% else %}
    <img src="{{ include.path }}" title="{{ include.title }}" alt="{{ include.title }}" />
    {% endif %}
    {% if include.title %}
    <figcaption class="img-caption">{{ include.title }} <span class="img-caption__source">{{ include.alt }}</span></figcaption>
    {% endif %}
    </figure>
    {% endif %}
    3 changes: 3 additions & 0 deletions config.yml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    # Add to config.yml

    cloudinary_url: <CLOUDINARY_URL>