Otto snippet for generating a scheduled image placement.

otto.liquid

{% comment %} 
Data 
---
otto_placement_name: Pass this to the snippet. The name is provided in the Otto app.
{% endcomment %}

{% liquid
  assign otto_image_metafield = shop.metafields.otto-components[otto_placement_name].value
  assign otto_image_file = shop.metafields.otto-files[otto_placement_name].value
  assign otto_mobile_image_file_name = otto_placement_name | append: "-mobile"
  assign otto_mobile_image_file = shop.metafields.otto-files[otto_mobile_image_file_name].value
%}

{% comment %} Template {% endcomment %}
{% if otto_image_metafield.link != blank %}
  <a href="{{ otto_image_metafield.link }}">
{% endif %}
  <img 
  src="{{ otto_image_file | image_url }}" 
  alt="{{ otto_image_metafield.alt }}" 
  class="otto-image {% if otto_image_metafield.has_mobile_image and otto_mobile_image_file != blank %}otto-image--desktop{% endif %}" 
  loading="lazy" 
  width="{{ otto_image_file.width }}" 
  height="{{ image_file.height }}">
  {% if otto_image_metafield.has_mobile_image and otto_mobile_image_file != blank %}
    <img 
    src="{{ otto_mobile_image_file | image_url }}" 
    alt="{{ otto_image_metafield.alt }}" 
    class="otto-image otto-image--mobile" 
    loading="lazy" 
    width="{{ otto_mobile_image_file.width }}" 
    height="{{ otto_mobile_image_file.height }}">
  {% endif %}
{% if otto_image_metafield.link != blank %}
  </a>
{% endif %}