CascadeKit
SectionsHow it worksPricingDocs
Sign inGet the library
Image
npx cascadekit add image
Image

Image

Files
sections/image.liquid
Copied!
<section class="">
  <div class="container">
    {{ section.settings.image | image_tag: size: '1024x', class: 'w-full', alt: 'Image' }}
  </div>
</section>

{% schema %}
  {
    "name": "Image",
    "tag": "section",
    "class": "section",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "header",
        "content": "Image"
      }, {
        "type": "image_picker",
        "id": "image",
        "label": "Image",
        "default": "https://images.unsplash.com/photo-1719937206255-cc337bccfc7d?q=80&w=3600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      }
    ],
    "presets": [
      {
        "name": "Image",
        "settings": {
          "image": "https://images.unsplash.com/photo-1719937206255-cc337bccfc7d?q=80&w=3600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        }
      }
    ]
  }
{% endschema %}