I am working on creating a “Gallery Grid” similar to the Dawn Theme that can be compatible with Prestige Theme. (It seems that one of the biggest complaints with Shopify is that there is not an easy way to show a bunch of images with captions without either paying for a custom coder or using a third party app.)
So far the code works but I have noticed a couple issues:
-
somewhere I am missing code needed to make the grid alignment/sizing consistent for mobile view (see screenshots, ignore the blue that is hiding info)
-
Depending on how much text is below the image, it effects the image size (even though the aspect ratio of the images is the same PER ROW)
-
if you only put one or two images, there will still be padding for the missing image (this can be worked around by using specific image-picker boxes in each block but it is still inconvenient)
Below is the code I have pieced together using examples of other sections, I am still a bit new at CSS so it might be redundant or “the long way” to code:
.
{% schema %}
{
"name": "Full Installation Gallery",
"settings": [
{
"type":"text",
"label":"Section Headline",
"id":"heading",
"default":"Headline"
},
{
"type":"text",
"label":"Sub Heading",
"id":"subheading",
"default":"Subheading"
},
{
"type":"richtext",
"label":"Section Description",
"id":"description",
"default":"
Description Text...
"
}
],
"blocks" : [
{
"type":"image",
"name":"image block",
"settings": [
{
"type":"image_picker",
"label":"Select Image",
"id":"image1",
"info": "1200 x 1200px .jpg recommended"
},
{
"type": "richtext",
"id": "link_text1",
"label": "link text 1",
"default":"
"
},
{
"type":"image_picker",
"label":"Select Image",
"id":"image2",
"info": "1200 x 1200px .jpg recommended"
},
{
"type": "richtext",
"id": "link_text2",
"label": "link text 2",
"default":"
"
},
{
"type":"image_picker",
"label":"Select Image",
"id":"image3",
"info": "1200 x 1200px .jpg recommended"
},
{
"type": "richtext",
"id": "link_text3",
"label": "link text 3",
"default":"
"
}
]
}
],
"presets" : [
{
"category":"image",
"name":"Full Installation Gallery",
"blocks": [
{
"type": "image"
}
]
}
]
}
{% endschema %}
