Recently, I added a new feature to my Shopify backend where users can upload images to a page. While I can see the images on the front-end, they are currently aligned to the right. My goal is to make these images responsive by default and expand to fit the width of the screen.
Here is the code from my "image.liquid" file:
{%for block in section.blocks %}
{{ block.settings.image_1 | img_url: "1250x" | img_tag }}
{% endfor %}
{% schema %}
{
"name": "Images_N",
"blocks" : [
{
"type" : "image",
"name" : "Image block",
"settings": [
{
"type": "image_picker",
"id": "image_1",
"label": "Images_N"
}
]
}
],
"presets" : [
{
"category" : "image",
"name" : "Images_N"
}
]
}
{% endschema %}
And here is the code from my "product.aplustemplate.liquid" file:
{% section 'product-template' %}
{% section 'image' %}
If you'd like to view the product with this template applied, you can visit this link. My aim is to ensure the images on this page are fully responsive.