More Premium Hugo Themes Premium Jekyll Themes

Jekyll Cloudinary

Jekyll plugin adding a Liquid tag for Cloudinary, for better responsive images

Jekyll Cloudinary

Jekyll plugin adding a Liquid tag for Cloudinary, for better responsive images

Author Avatar Theme by nhoizey
Github Stars Github Stars: 92
Last Commit Last Commit: Jul 6, 2023 -
First Commit Created: Aug 8, 2025 -
Jekyll Cloudinary screenshot

Overview

The Jekyll Cloudinary Liquid tag is an innovative plugin that enhances Jekyll’s capabilities by integrating Cloudinary for handling responsive images in your Markdown or Kramdown posts. By employing this plugin, users can effortlessly create HTML with optimized image loading, using the srcset and sizes attributes to ensure that images are delivered in the most appropriate sizes for various device screens. This makes it a valuable tool for bloggers and web developers looking to improve the performance and responsiveness of their sites.

With full control over image sizing and fetching via Cloudinary’s dynamic resizing capabilities, this plugin simplifies the management of images across diverse viewing contexts. It’s designed for users that want to streamline their workflow while still maintaining high standards for responsive design.

Features

  • Easy Integration: Simple setup by adding gem 'jekyll-cloudinary' to your Gemfile and configuring your Cloudinary account.
  • Responsive Images: Generates HTML for responsive images using srcset and sizes attributes, optimizing loading for different screen sizes.
  • Control Over Sizes: Users can specify the number of generated images and their respective sizes, allowing customization for various devices.
  • Production-Only Settings: The option to generate responsive images only in a production environment, reducing overhead during development.
  • Verbose Error Reporting: Ability to enable verbose mode to receive console messages when errors occur during the image generation process.
  • Flexible Configurations: Offers both mandatory and optional settings for fine-tuning, including presets and origin URLs for image sources.
  • Fallback Options: Comes with default settings for fallback image widths, accommodating older browsers and enhancing compatibility.
  • Live Examples and Support: Provides a live example for reference and ongoing community support for contributions and enhancements.