### Setup Jekyll Documentation Environment

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/devs/contributing/docs.md

Installs project dependencies for the Jekyll documentation site. Requires Git and Bundler. Ensures all necessary gems are available for local development and preview.

```sh
git clone https://github.com/rbuchberger/jekyll_picture_tag.git # if you haven't already
cd jekyll_picture_tag/docs
direnv allow # (optional)
bundle install --binstubs # --binstubs is optional.
```

--------------------------------

### GitHub Actions Workflow for Jekyll Deployment

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/deployment.md

An example GitHub Actions workflow that automates the build and deployment of a Jekyll site, particularly useful for JPT when GitHub Pages' plugin restrictions are a concern. This workflow is triggered on push events to the main branch.

```yaml
name: Deploy Jekyll Site

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.0'
          bundler-cache: true # runs 'bundle install' and caches gems
      - name: Build Jekyll Site
        run: JEKYLL_ENV=production bundle exec jekyll build
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: _site
```

--------------------------------

### Jekyll Picture Tag: New Configuration Example (_data/picture.yml)

Source: https://github.com/rbuchberger/jekyll_picture_tag/wiki/Migrating-from-versions-prior-to-1.0

This snippet illustrates the new location for media presets in the _data/picture.yml file for Jekyll Picture Tag. Presets are now named media queries, replacing the old 'source keys'.

```yaml
# _data/picture.yml

# Media presets are named media queries. To maintain compatibility with your tags, you need to

```

--------------------------------

### Verify ImageMagick Installation (Shell)

Source: https://github.com/rbuchberger/jekyll_picture_tag/wiki/Installation

This command verifies if ImageMagick is installed on your system. ImageMagick is a required dependency for jekyll_picture_tag to process and generate images in various formats. Successful execution will display the ImageMagick version information.

```bash
$ convert --version
```

--------------------------------

### Jekyll Picture Tag: New Configuration Example (_config.yml)

Source: https://github.com/rbuchberger/jekyll_picture_tag/wiki/Migrating-from-versions-prior-to-1.0

This snippet shows the new, simplified structure for global settings in the _config.yml file for Jekyll Picture Tag, indicating that only global settings reside here.

```yaml
# _config.yml

picture:
  source: assets/images/_fullsize
  output: generated

```

--------------------------------

### Install Jekyll Picture Tag Gem and Dependencies

Source: https://context7.com/rbuchberger/jekyll_picture_tag/llms.txt

Instructions for adding the jekyll_picture_tag gem to your project's Gemfile, installing it via bundle, and setting up required system dependencies like libvips and format-specific libraries. ImageMagick is optional for extended format support.

```ruby
# Gemfile
gem 'jekyll', '~> 4.0'

group :jekyll_plugins do
  gem 'jekyll_picture_tag', '~> 2.0'
end
```

```bash
# Install the gem
bundle install

# Install libvips (required)
# On macOS:
brew install vips

# On Ubuntu/Debian:
apt-get install libvips libvips-dev

# Install format-specific dependencies
apt-get install libpng-dev libwebp-dev libjpeg-dev libheif-dev

# Optional: Install ImageMagick for additional format support
brew install imagemagick
```

--------------------------------

### Jekyll Picture Tag Configuration Example (_data/picture.yml)

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/index.md

This is an example configuration file for Jekyll Picture Tag. It defines media queries and presets that control image generation, including widths, formats, and sizes for different screen conditions. This YAML file is essential for customizing the plugin's behavior.

```yaml
media_queries:
  mobile: 'max-width: 600px'

presets:
  default:
    widths: [600, 900, 1200]
    formats: [webp, original]
    sizes:
      mobile: 80vw
    size: 500px
```

--------------------------------

### Jekyll Picture Tag: Old Configuration Example

Source: https://github.com/rbuchberger/jekyll_picture_tag/wiki/Migrating-from-versions-prior-to-1.0

This snippet demonstrates the structure of the old configuration file (_config.yml) for the Jekyll Picture Tag plugin, showcasing how presets, source image details, and attributes were defined.

```yaml
# _config.yml

picture:
  source: assets/images/_fullsize
  output: generated
  markup: picture
  presets:
    # Full width pictures
    default:
      ppi: [1, 1.5]
      attr:
        class: blog-full
        itemprop: image
      source_lrg:
        media: "(min-width: 40em)"
        width: 700
      source_med:
        media: "(min-width: 30em)"
        width: 450
      source_default:
        width: 350
        height: 200
    # Half width pictures
    half:
      ppi: [1, 1.5]
      attr:
        data-location: "{{location}}"
        data-active: nil
      source_lrg:
        media: "(min-width: 40em)"
        width: 400
      source_med:
        media: "(min-width: 30em)"
        width: 250
      source_default:
        width: 350
    # Self-set resolution sources. Useful if you don't want a 1:1 image size to dppx ratio.
    gallery:
      source_wide_hi:
        media: "(min-width: 40em) and (min-resolution: 1.5dppx)"
        width: 900
        height: 600
      source_wide:
        media: "(min-width: 40em)"
        width: 600
        height: 400
      source_default:
        width: 250
        height: 250

```

--------------------------------

### Merge Base Preset into 'project_showcase' Preset

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/subpresets.md

This snippet shows another example of creating a 'project_showcase' preset by merging the 'base' preset with `<<`. It specifies different 'widths' while inheriting other settings from the base.

```yaml
project_showcase:
  <<: *base
  widths: [700, 864, 900, 1296, 1600, 1728]
```

--------------------------------

### Jekyll Media Widths Configuration Example

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/width_srcsets.md

Configuration example for 'media_widths' in Jekyll's picture tag. This allows specifying different sets of image widths for different media query conditions, optimizing image generation for various device types and screen sizes.

```yaml
media_widths:
  mobile: [400, 600, 800]
```

--------------------------------

### Add jekyll_picture_tag to Gemfile (Ruby)

Source: https://github.com/rbuchberger/jekyll_picture_tag/wiki/Installation

This snippet shows how to add the jekyll_picture_tag gem to your Jekyll project's Gemfile. It must be placed within the `:jekyll_plugins` group to be recognized by Jekyll. After adding this, you will need to run `bundle install`.

```ruby
group :jekyll_plugins do
  gem 'jekyll_picture_tag'
end
```

--------------------------------

### Serve Jekyll Documentation Locally

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/devs/contributing/docs.md

Starts a local Jekyll development server with live reloading. This command allows for real-time preview of documentation changes in a web browser. May require 'bundle exec' depending on PATH configuration.

```sh
jekyll serve --livereload # (prefix with `bundle exec` if necessary)
```

--------------------------------

### Markup Presets Format and Example

Source: https://github.com/rbuchberger/jekyll_picture_tag/wiki/Writing-Presets

Illustrates the YAML structure for defining reusable configurations (presets) for generating HTML markup and associated responsive images. These presets control aspects like image formats, sizes, and attributes.

```yml
# Format:
# markup_presets:
#   (name):
#     (option): (setting)
#     (...)
#   (another name):
#     (option): (setting)
#     (...)

# Example:
markup_presets:
  default:
    formats: [webp, original]
    widths: [200, 400, 800, 1600]
    link_source: true
  lazy:
    markup: data_auto
    widths: [200, 400, 800, 1600]
    link_source: true
    noscript: true

```

--------------------------------

### Jekyll Sizes Setting Example

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/width_srcsets.md

Example of the 'sizes' configuration in Jekyll's picture tag. This maps media presets to CSS dimensions, providing the browser with information about the image's displayed size under different conditions to optimize image loading.

```yaml
sizes:
  mobile: 80vw
  tablet: 60vw
  desktop: 900px
```

--------------------------------

### Jekyll Picture Tag with Filenames Containing Spaces

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Provides an example of how to correctly use filenames that include spaces by enclosing them in quotes. This is crucial for proper image path resolution.

```Liquid
{% picture "some example.jpg" mobile: other\ example.jpg %}
```

--------------------------------

### Jekyll Picture Tag: New Presets Configuration Example (_data/picture.yml)

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/notes/migration_1.md

Shows how image presets are defined in the new version of Jekyll Picture Tag using the `_data/picture.yml` file. This format allows for specifying arrays of widths and formats for generating responsive images.

```yaml
# _data/picture.yml

```

--------------------------------

### Jekyll Picture Tag Preset Selection

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Illustrates how to select a specific image preset defined in the `_data/picture.yml` file. This allows for pre-configured image transformations.

```Liquid
{% picture my_preset example.jpg %}
```

--------------------------------

### HTML Pixel Ratio Srcset Example

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/pixel_ratio_srcsets.md

An example of how a Pixel Ratio srcset is structured in HTML. This format allows browsers to select the appropriate image based on the device's pixel ratio, ensuring sharp images across different screen densities. It's typically used for elements like thumbnails and icons.

```html
srcset="myimage-200.jpg 1.0x, myimage-300.jpg 1.5x, myimage-400.jpg 2.0x"
```

--------------------------------

### Jekyll Widths Setting Example

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/width_srcsets.md

Example of the 'widths' setting in Jekyll's picture tag configuration. This array specifies the pixel widths for which image variants should be generated, allowing for responsive image delivery based on available bandwidth and screen resolution.

```yaml
widths: [600, 800, 1200]
```

--------------------------------

### Media Presets Format and Example

Source: https://github.com/rbuchberger/jekyll_picture_tag/wiki/Writing-Presets

Demonstrates the YAML structure for defining named media queries, which can be referenced in other presets or directly in the Jekyll Picture tag. Quotes are necessary around media queries due to potential YAML parsing issues with colons.

```yml
# Format:
# media_presets:
#   (name): (css media query)
#   (name): (css media query)
#   (...)

# Example:
media_presets:
  desktop: 'min-width: 1200px'

```

--------------------------------

### Combined Media Queries and Presets Configuration for Jekyll Picture Tag

Source: https://context7.com/rbuchberger/jekyll_picture_tag/llms.txt

This example merges media queries and presets for blog posts, defining responsive sizes and image quality for different formats. It also includes a default preset with dimension attributes.

```yaml
# _data/picture.yml
media_queries:
  mobile: 'max-width: 600px'
  tablet: 'max-width: 900px'
  desktop: 'min-width: 901px'

presets:
  default:
    formats: [webp, original]
    widths: [400, 800, 1200]
    sizes:
      mobile: 100vw
      tablet: 80vw
    size: 800px
    dimension_attributes: true

  blog_post:
    formats: [avif, webp, jpg]
    widths: [600, 900, 1200]
    format_quality:
      avif: 70
      webp: 80
      jpg: 85
    sizes:
      mobile: calc(100vw - 32px)
      tablet: 600px
    size: 900px
    attributes:
      img: 'loading="lazy"'
```

--------------------------------

### Netlify Deployment Configuration for Jekyll Picture Tag

Source: https://context7.com/rbuchberger/jekyll_picture_tag/llms.txt

Example Netlify configuration for deploying a Jekyll site with the Picture Tag plugin. It specifies the build command and publish directory, noting that Netlify supports JPG, PNG, and WebP formats but not JP2 or AVIF by default. It also highlights the requirement for libvips in the build environment.

```yaml
# Netlify example - supports jpg, png, webp (no jp2, no avif)
# netlify.toml
[build]
  command = "bundle exec jekyll build"
  publish = "_site"

# Requires libvips in build image

```

--------------------------------

### Jekyll Size Setting Example

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/width_srcsets.md

Example of the unconditional 'size' setting in Jekyll's picture tag. This defines a default CSS dimension for the image's display size, used when no conditional 'sizes' match or when a single fallback size is needed.

```yaml
size: 80vw
```

--------------------------------

### AWS CLI Commands for S3 Deployment

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/deployment.md

A set of AWS CLI commands for building, pushing, and invalidating the cache of a Jekyll site deployed to AWS S3. These commands are essential for managing the deployment lifecycle and ensuring changes are live.

```bash
# Build the Jekyll site
JEKYLL_ENV=production bundle exec jekyll build

# Push the built site to an S3 bucket
aws s3 sync _site s3://(your bucket here)

# Invalidate CloudFront cache
aws cloudfront create-invalidation --distribution-id (your distribution id here) --paths '/*'

# Combined deploy command
# build && push && invalidate
```

--------------------------------

### HTML Width Based Srcset Example

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/width_srcsets.md

An example of a width-based srcset attribute in HTML. This is used for images where the display size varies with the screen width, typically for images larger than 300 pixels. It lists different image files corresponding to various pixel widths.

```html
srcset="myimage-800.jpg 800w, myimage-1200.jpg 1200w, myimage-2000.jpg 2000w"
```

--------------------------------

### GitHub Actions Deployment for Jekyll Picture Tag

Source: https://context7.com/rbuchberger/jekyll_picture_tag/llms.txt

A GitHub Actions workflow for deploying a Jekyll site. This workflow checks out the code, installs necessary dependencies including libvips and format-specific libraries (libpng, libwebp, libjpeg), sets up Ruby with bundler caching, builds the Jekyll site, and deploys it using the 'actions-gh-pages' action.

```yaml
# GitHub Actions deployment
# .github/workflows/deploy.yml
name: Deploy Jekyll with Picture Tag

on:
  push:
    branches: [main]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Install libvips and dependencies
        run: |
          sudo apt-get update
          sudo apt-get install -y libvips libvips-dev \
            libpng-dev libwebp-dev libjpeg-dev

      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: 3.0
          bundler-cache: true

      - name: Build site
        run: bundle exec jekyll build
        env:
          JEKYLL_ENV: production

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_site

```

--------------------------------

### Jekyll Picture Tag Basic Usage

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Demonstrates the most basic form of the picture tag, which uses a default preset. It requires an image file name as input.

```Liquid
{% picture example.jpg %}
```

--------------------------------

### Jekyll Picture Tag Multiple Crops and Devices

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Demonstrates cropping the same image to different aspect ratios and serving different versions for various devices within a single picture tag.

```Liquid
{% picture example.jpg 16:9 tablet: example.jpg 4:3 mobile: example.jpg 1:1 %}
```

--------------------------------

### Art Direction with Multiple Crops in Jekyll Picture Tag

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/tutorial.md

This advanced snippet demonstrates art direction by serving different image crops based on media queries. It uses two different aspect ratios for the same base image, adapting the crop for mobile and desktop views. This tag is complex and requires careful setup.

```Liquid
{% picture my_image.jpg 2:1 jpt-mobile: my_image.jpg 1:1 %}
```

--------------------------------

### Configure Jekyll Picture Tag Media Queries and Presets (YAML)

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/examples.md

Defines media queries and image presets for Jekyll Picture Tag. Media queries map to CSS breakpoints, while presets specify image formats, widths, sizes attributes, and HTML attributes for various optimization strategies.

```yaml
# _data/picture.yml

# These are used in several places. You likely want to enter whatever CSS media queries your site
# uses here.
media_queries:
    mobile: 'max-width: 480px'
    tablet: 'max-width: 768'
    laptop: 'max-width: 1024px'
    desktop: 'max-width: 1200'
    wide: 'min-width: 1201'

presets:
  # This entry is purely an example. It is not the default JPT preset, nor is it available as a
  # built-in.
  default:
    formats: [webp, original] # Order matters!
    widths: [200, 400, 800, 1200, 1600] # Image widths, in pixels.

    # The sizes attribute is both important, and impossible to offer good defaults for. You need to
    # learn about it. Short version: Web browsers parse web pages line-by-line. When they run into
    # an external asset they must download, they start that process immediately, without waiting to
    # finish rendering the page. This means that at the point in time when the browser must decide
    # which image to download, it has no clue how large that image will be on the page. The sizes
    # attribute is how we tell it.
    #
    # If you do not provide this, the web browser will assume the image is 100vw (100% the width of
    # the viewport.)
    #
    # This doesn't have to be pixel-perfect, just close enough for the browser to make a good
    # choice. Keys are media queries defined above, values are how large the image will be when
    # that media query is true. You can't use % (percentage width of the parent container) for the
    # same reason we have to do this at all.
    sizes:
      mobile: calc(100vw - 16px)
      tablet: 80vw

    # Size is unconditional; provided either after all conditional sizes (above) or alone. If you
    # only have a 'size' (no 'sizes'), and it's a constant (px, em, or rem), you should use a
    # pixel-ratio srcset.
    size: 800px

    link_source: true # wrap images in a link to the original source image.
    dimension_attributes: true # Page reflow begone!

    # You can add any HTML attribute you like, to any HTML element which JPT creates:
    attributes:
      # parent refers to the outermost tag; <picture> if it's present, otherwise the <img>.
      parent: 'data-downloadable="true"'
      picture: 'class="awesome" data-volume="11"'
      img: 'class="some-other-class"'
      a: 'class="image-link"'

  # You can use this as jpt-webp. All following presets follow the same pattern.
  webp:
    formats: [webp, original]

  # Avif is the new hotness coming down the pipe. Browser support is bad and they are slow to
  # generate, but you get good file sizes even compared to webp of similar quality.
  avif:
    formats: [avif, webp, original]

  # Your build times will suffer, but everyone is happy.
  loaded:
    formats: [avif, jp2, webp, original]
    dimension_attributes: true

  # This is an example of how you would create a 'multiplier' based srcset; useful when an image
  # will always be the same size on all screens (icons, graphics, thumbnails, etc), but you'd like
  # to supply higher resolution images to devices with higher pixel ratios.
  thumbnail:
    base_width: 250 # How wide the 1x image should be.
    pixel_ratios: [1, 1.5, 2] # Which multipliers to target.
    fallback_width: 250 # The default is 800, which is probably too big.
    formats: [webp, original]
    attributes:
      picture: 'class="thumbnail"'

  # Another pixel-ratio example.
  avatar:
    # Say your layout demands a square:
    crop: 1:1
    base_width: 100
    pixel_ratios: [1, 1.5, 2]
    fallback_width: 100,

  # Here's an example of how you'd configure JPT to work with something like lazyload:
  # https://github.com/verlok/lazyload
  # Remember to add a sizes attribute, unless it's close to 100vw all the time.
  lazy:
    markup: data_auto
    formats: [webp, original]
    noscript: true # add a fallback image inside a <noscript> tag.
    attributes:
      parent: class="lazy"

  # This is an example of how you'd get a single generated image, a URL, and nothing else.
  direct:
    markup: direct_url
    fallback_format: webp
    fallback_width: 600

```

--------------------------------

### Jekyll Picture Tag Aspect Ratio Cropping

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Illustrates how to crop images to specific aspect ratios, such as 16:9 or 1:1. The 'entropy' option can be used to automatically select the most relevant part of the image for cropping.

```Liquid
{% picture example.jpg 16:9 %}
```

```Liquid
{% picture thumbnail example.jpg 1:1 center --alt Example Image %}
```

--------------------------------

### Jekyll Picture Tag Device-Specific Images

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Explains how to serve different image versions for different devices by specifying image names for device types like 'mobile'. The corresponding media query must be set in `_data/picture.yml`.

```Liquid
{% picture example.jpg mobile: example_cropped.jpg %}
```

--------------------------------

### WebP Image Generation with Jekyll Picture Tag

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/index.md

This example shows how to generate WebP images along with fallback JPEG images using a built-in preset. It outputs an HTML picture element with source elements for WebP and JPEG, including srcset attributes for different resolutions. This leverages the plugin's presets for efficient format conversion.

```Liquid
{% picture jpt-webp test.jpg %}
```

--------------------------------

### Basic Image Generation with Jekyll Picture Tag

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/index.md

This snippet demonstrates the simplest usage of the Jekyll Picture Tag plugin. It takes an input image and generates multiple versions with different widths and a unique hash, outputting an HTML img tag with srcset for responsive loading. This requires the plugin to be installed and configured.

```Liquid
{% picture test.jpg %}
```

--------------------------------

### Define Media Queries in _data/picture.yml

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/getting_started.md

This snippet shows how to define custom media queries for responsive images within the Jekyll Picture Tag plugin. You should list your media queries under the 'media_queries:' key in the '_data/picture.yml' file, providing a name and the corresponding media query string.

```yaml
# _data/picture.yml

media_queries:
  (name): '(media query)'
  (...)

```

--------------------------------

### Serving WebP Images with Jekyll Picture Tag

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/tutorial.md

This snippet shows how to use the `jpt-webp` preset to serve WebP images alongside JPGs. It generates a `<picture>` element with `<source>` tags for WebP and JPG formats, improving performance and compatibility. This utilizes built-in presets and media queries.

```Liquid
{% picture jpt-webp my_image.jpg %}
```

--------------------------------

### Configure Image Format-Specific Options (YAML)

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/image_quality.md

Apply specific write options to image formats when processed by libvips. These options control parameters like lossless compression for webp or compression method and speed for avif. Consult libvips documentation for available format-specific settings.

```yaml
image_options:
  webp:
    lossless: true
```

```yaml
image_options:
  avif: 
    compression: av1
    speed: 8
```

--------------------------------

### Using Built-in Presets with Jekyll Picture Tag

Source: https://context7.com/rbuchberger/jekyll_picture_tag/llms.txt

Demonstrates how to use predefined image presets like 'jpt-webp', 'jpt-avif', and 'jpt-loaded' for generating responsive images in various formats. It also shows how to apply built-in media queries for different image versions based on screen size.

```liquid
{% picture jpt-webp example.jpg --alt Example %}

{% picture jpt-avif example.jpg %}

{% picture jpt-loaded example.jpg %}

{% picture example.jpg jpt-mobile: mobile.jpg jpt-tablet: tablet.jpg %}
```

--------------------------------

### Jekyll Picture Tag with Alt Text

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Shows how to include alternative text for an image using the --alt parameter. This is important for accessibility and SEO.

```Liquid
{% picture example.jpg --alt Alt Text %}
```

--------------------------------

### Jekyll Picture Tag with HTML Attributes

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Shows how to add arbitrary HTML attributes to the generated image or picture elements using the --picture and --img flags.

```Liquid
{% picture example.jpg --picture class="some classes" --img id="example" %}
```

--------------------------------

### AWS S3 Deployment Workflow for Jekyll

Source: https://context7.com/rbuchberger/jekyll_picture_tag/llms.txt

A command-line workflow for deploying a Jekyll site to AWS S3. It includes steps for building the site locally for production, syncing the built site to an S3 bucket, and invalidating the CloudFront cache to ensure users see the latest content.

```bash
# AWS S3 deployment workflow
# Build locally then sync to S3

# Build for production
JEKYLL_ENV=production bundle exec jekyll build

# Sync to S3
aws s3 sync _site s3://your-bucket-name

# Invalidate CloudFront cache
aws cloudfront create-invalidation \
  --distribution-id YOUR_DIST_ID \
  --paths '/*'

```

--------------------------------

### Jekyll Picture Tag Complex Formatting with Line Breaks

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Illustrates how to use line breaks to format a complex picture tag, making it more readable when multiple options, devices, and attributes are used.

```Liquid
{% 
  picture
  hero
  example.jpg 16:9 entropy
  tablet: example2.jpg 3:2
  mobile: example3.jpg 1:1
  --alt Happy Puppy
  --picture class="hero"
  --link /
%}
```

--------------------------------

### Jekyll Picture Tag with Liquid Variables and Link

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Combines the use of Liquid variables for the image source and URL with the ability to wrap the image in an anchor tag using the --link parameter.

```Liquid
{% picture blog_index "{{ post.image }}" --link {{ post.url }} %}
```

--------------------------------

### Merge Base Preset into 'default' Preset

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/subpresets.md

This snippet illustrates how to create a 'default' preset by merging the 'base' preset using the YAML merge key `<<`. It overrides or adds specific settings like 'widths' and 'link_source'.

```yaml
default:
  <<: *base
  widths: [500, 600, 700, 800, 900, 1000, 1200, 1600]
  link_source: true
```

--------------------------------

### Jekyll Picture Tag with Liquid Variables

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/liquid_tag/examples.md

Demonstrates using Liquid variables within the picture tag, such as for image filenames. It highlights the need to wrap variable filenames in quotes to handle potential spaces.

```Liquid
{% picture "{{ page.some_liquid_variable }}" %}
```

--------------------------------

### Set Constant Image Quality per Format (YAML)

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/image_quality.md

Configure the compression quality for different image formats (e.g., jpg, png, webp). Quality is an integer between 0 and 100. Defaults are provided for webp (50), avif (30), jp2 (30), and others (75).

```yaml
format_quality:
  jpg: 75
  png: 65
  webp: 55
```

--------------------------------

### Parsed Result After Shallow Merge (Attributes Overwritten)

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/subpresets.md

This is the resulting YAML after applying the shallow merge from the previous example. Notice that the 'attributes' only contain 'picture' from the 'project_showcase' preset, and the 'img' attribute from the 'base' preset is missing.

```yaml
project_showcase:
  formats: [webp, original]
  format_quality:
    webp: 90
  attributes:
    picture: 'class="showcase"'
  widths: [700, 864, 900, 1296, 1600, 1728]
```

--------------------------------

### Basic Image Insertion with Jekyll Picture Tag

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/tutorial.md

This snippet demonstrates the basic usage of the Jekyll Picture Tag to insert an image. It generates an `<img>` tag with a `srcset` attribute for responsive image serving. Ensure the image file exists in the site's source directory.

```Liquid
{% picture my_image.jpg %}
```

--------------------------------

### Configure Image Cropping Aspect Ratios

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/cropping.md

Defines the aspect ratio for image cropping. Settings can be applied globally using 'crop' or on a per-media preset basis using 'media_crop'. The hierarchy ensures tag arguments take precedence over media_crop, which in turn overrides the general crop setting. Accepts arguments similar to the 'crop' tag parameter.

```yaml
crop: '16:9'
media_crop:
  tablet: '3:2'
  mobile: '1:1'
```

--------------------------------

### Jekyll Picture Tag Configuration Presets

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/deployment.md

Defines image format presets for Jekyll Picture Tag. This YAML configuration specifies the default formats to be generated, including AVIF, WebP, JP2, PNG, GIF, and original.

```yaml
presets:
  default:
    formats: [avif, webp, jp2, png, gif, original]
```

--------------------------------

### Define a Base Preset with YAML Anchor

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/presets/subpresets.md

This snippet defines a base preset named 'base' using a YAML anchor. It includes common settings for formats, format quality, and image attributes that can be reused in other presets.

```yaml
base: &base
  formats: [webp, original]
  format_quality:
    webp: 90
  attributes:
    img: 'loading="lazy"'
```

--------------------------------

### Add Jekyll Picture Tag to Gemfile

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/installation.md

Specifies how to add the jekyll_picture_tag gem to your project's Gemfile within the jekyll_plugins group. This ensures the plugin is recognized by Jekyll during the build process. Ensure you are using the correct gem name 'jekyll_picture_tag', not 'jekyll-picture-tag'.

```ruby
# Gemfile

gem 'jekyll', '~> 4.0'

group :jekyll_plugins do
  # (other jekyll plugins)
  gem 'jekyll_picture_tag', '~> 2.0'
end
```

--------------------------------

### Cropping Images with Aspect Ratio using Jekyll Picture Tag

Source: https://github.com/rbuchberger/jekyll_picture_tag/blob/master/docs/users/tutorial.md

This snippet demonstrates cropping an image to a specific aspect ratio (e.g., 16:9) using the Jekyll Picture Tag. This is useful for maintaining consistent image dimensions across a website.

```Liquid
{% picture my_image.jpg 16:9 %}
```

--------------------------------

### Configure Half-Width Markup Preset in Jekyll Picture Tag

Source: https://github.com/rbuchberger/jekyll_picture_tag/wiki/Migrating-from-versions-prior-to-1.0

Defines a markup preset for half-width images, generating different image sizes using an array of `widths`. It allows for custom `attributes` on the picture element, including dynamic data attributes.

```yaml
markup_presets:
  half:
    widths: [250, 350, 400]
    attributes: 
      picture: 'data-location="{{location}}" data-active="nil"'
```

--------------------------------

### Configure Media Presets in Jekyll Picture Tag

Source: https://github.com/rbuchberger/jekyll_picture_tag/wiki/Migrating-from-versions-prior-to-1.0

Defines responsive image presets based on media queries. These presets control which image sources are used based on viewport width and pixel density. Ensure correct syntax for media queries.

```yaml
media_presets:
  source_lrg: '(min-width: 40em)'
  source_med: '(min-width: 30em)'
  source_wide_hi: "(min-width: 40em) and (min-resolution: 1.5dppx)"
  source_wide: '(min-width: 40em)'
```

--------------------------------

### Art Direction with Media Queries in Jekyll Picture Tag

Source: https://context7.com/rbuchberger/jekyll_picture_tag/llms.txt

Illustrates how to implement art direction by serving different images based on media queries (e.g., screen size). This includes specifying distinct images for different breakpoints (mobile, tablet, desktop) and applying specific crops and cropping algorithms for each.

```liquid
<!-- Different images for mobile and desktop -->
{% picture hero-desktop.jpg mobile: hero-mobile.jpg %}

<!-- Multiple breakpoints with different crops -->
{% picture
  example.jpg 16:9
  tablet: example.jpg 4:3
  mobile: example.jpg 1:1
  --alt Responsive hero image
%}

<!-- Multi-line format for complex tags -->
{% 
  picture
  hero
  desktop.jpg 16:9 entropy
  tablet: tablet.jpg 3:2
  mobile: mobile.jpg 1:1 center
  --alt Happy Puppy
  --picture class="hero"
  --link /
%}
```