Jekyll Cloudinary

cloudinary-images.rb

# 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

cloudinary-responsive-img.html

{% 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 %}

config.yml

# Add to config.yml

cloudinary_url: <CLOUDINARY_URL>