Thank you very much for your response - I am understanding the basic concept of this but just figuring out where to place code.
Would that first bit (within the section) be entered into the theme.liquid file? In the theme I am using, the images that I’m trying to apply this too are called ‘banners’ and there is also two ‘banner-liquid’ files (one within Sections, and one within Snippets), so I’m unsure if it should go within one of those.
I have a feeling I need to add in the Sections banner-liquid file, is this right? The code for this currently is:
<div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %}
{% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}">
<div class="container{% if section.settings.full_with %}-full{% endif %}">
<div class="{{ section.settings.effect }}">
{% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %}
{% if section.settings.image != blank %}
<img class="img-responsive" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" />
{% else %}
<img class="img-responsive" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% if section.settings.link != blank %}</a>{% endif %}
</div>
</div>
</div>
{% schema %}
{
"name": "Vela Banner",
"class": "velaFramework",
"settings": [
{
"type": "header",
"content": "Design Block"
},
{
"type": "checkbox",
"id": "full_with",
"label": "Enabel Full Width?"
},
{
"type": "text",
"id": "margin_block",
"label": "Margin",
"placeholder": "0px 0px"
},
{
"type": "text",
"id": "padding_block",
"label": "Padding",
"placeholder": "0px 0px"
},
{
"type": "header",
"content": "General Settings"
},
{
"type": "text",
"id": "image_size",
"label": "Image Size",
"info": "Image Size is required."
},
{
"type": "text",
"id": "link",
"label": "Image Link"
},
{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},
{
"type": "select",
"id": "effect",
"label": "Effect",
"default": "effectOne",
"options": [
{
"value": "effectOne",
"label": "Effect one"
},
{
"value": "effectTwo",
"label": "Effect two"
}
]
}
],
"presets": [
{
"name": "Vela Banner",
"category": "4. Vela Image"
}
]
}
{% endschema %}
And then the other bit you mentioned (starting with
) - should that be entered in the locations where I want the specific images to be placed? If so, I’m struggling to find the ‘homepage’ within the ‘Edit Code’ section in my code where the ‘banners’ are currently… is it normally in the ‘templates’, ‘sections’ .?
Appreciate any further help!