Examples

Basic form, will use the preset named ‘default':
```
  {% picture example.jpg %}
```

Include alt text:

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

Select a preset (defined in _data/picture.yml:
```
  {% picture my_preset example.jpg %}
```
Show different images on different devices. (Note that mobile must be set to some media query under media_queries: in _data/picture.yml.
```
  {% picture example.jpg mobile: example_cropped.jpg %}
```

Use liquid variables:

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

Select the blog_index preset, use liquid variables, and wrap the image in an anchor tag (link):
```
  {% picture blog_index "{{ post.image }}" --link {{ post.url }} %}
```

Note: If the image path is coming from a liquid variable then you should guard against spaces by wrapping the inner tag in quotes, as in the previous examples.

Add arbitrary HTML attributes:

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

Crop to a 16:9 aspect ratio (Will keep the part of the image "most likely to draw human attention"):
```
  {% picture example.jpg 16:9 %}
```

Crop to a 1:1 aspect ratio, keeping the middle, with alt text:

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

Crop the same image multiple times:

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

Use filenames with spaces:

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

Use line breaks to make a complicated tag manageable:

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