I have created a custom section in which I add a picture. I need to display its alt. How can i do this?
<img src="{{ section.settings.img_section_image | img_url: '960x645'}}">
{% schema %}
{
"name": "Img section",
"settings": [
{
"id": "img_section_image",
"type": "image_picker",
"label": "Add image"
},
],
"presets": [
{
"name": "Img sections"
}
]
}
{% endschema %}
Once you upload the image simply click on the image, and a popup appears on the popup there is a text field to add an alt tag for that image.
it looks like this image:
To get it on img tag you can use the default image_tag
{{ section.settings.img_section_image | image_url: width: 200 | image_tag }}
it shows the alt tag automatically when img tag is created
or use the
{{ section.settings.img_section_image| image_url: width: 200 | image_tag: alt: 'My image's alt text' }}
To add manually custom tag, without backend.
if you do not use image_tag, then try something like this
<img src="{{ section.settings.img_section_image | img_url: '960x645'}}" alt="{{section.settings.img_section_image.alt}}">
I hope this will helps you and other as well
Related
Thanks for having a look.
What I have so far is I loop thru blocks created in admin and render each as a button. I set an x-data boolean which does render the collections but it toggles all on and off because the boolean is not unique. This is where I am struggling. Not sure how to create a unique selector.
<div x-data="{ selected: false }" class="tw-container tw-mx-auto tw-pt-20" x-cloak>
<div class="tw-flex lg:tw-justify-center tw-space-x-4 tw-overflow-x-auto">
{% for block in section.blocks %}
<button
type="button"
#click="selected = !selected"
class="tw-cursor-pointer"
>
// renders Image & title
</button>
{% endfor %}
</div>
{% for block in section.blocks %}
<div class="tw-container">
<div
x-show="selected"
>
<div class="tw-mt-12 tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6">
{% assign coll_name = block.settings['menu-collection-name'] | handleize %}
{%- if coll_name != '' -%}
// This renders all collections & toggles on/off
{% for product in collections[coll_name].products %}
{%- render 'restaurant-menu-item', item: product -%}
{% endfor %}
{%- endif -%}
</div>
</div>
</div>
{% endfor %}
</div>
{% schema %}
{
"name": "Restaurant Menu",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Upload Menu Image"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Menu"
}
],
"blocks": [
{
"type": "menu-link",
"name": " Menu-link",
"settings": [
{
"type": "image_picker",
"id": "link-image",
"label": "Link Image"
},
{
"type": "text",
"id": "link-title",
"label": "Link Title",
"default": "Menu Title"
},
{
"type": "text",
"id": "menu-collection-name",
"label": "Menu Collection Name (required)",
"info": "It should match name of collection used for menu items. Use name when collection is first set"
}
]
}
]
}
{% endschema %}
Edit here is a refactor using a getter in Alpine x-data at the moment still can't figure out how to just render the collection for button clicked I tried to assign the collection name in each loop & compare but that does not work even though the collection name renders correctly in loop see comment in code below
<div
x-data="
{open: false,
get isOpen() { return this.open },
toggle() { this.open = ! this.open },
}
"
class="tw-container tw-mx-auto tw-pt-20"
x-cloak
>
<div class="tw-flex lg:tw-justify-center tw-space-x-4 tw-overflow-x-auto">
{% for block in section.blocks %}
{%- comment -%}
This below outputs the collection name for correct collection But if you assign or capture it only renders once &
does not change
{%- endcomment -%}
{{ block.settings['menu-collection-name'] }}
<button
type="button"
#click="toggle()"
class="tw-cursor-pointer"
>
<div class="tw-min-w-[300px] sm:tw-max-w-sm tw-rounded-lg tw-p-6 tw-mb-6 tw-overflow-hidden tw-shadow">
Renders image buton to be selected
</div>
</button>
{% endfor %}
</div>
<div class="tw-container">
{% for block in section.blocks %}
{%- comment -%}
This below outputs the collection name for correct collection, But if you assign or capture it only renders once &
does not change
{%- endcomment -%}
{{ block.settings['menu-collection-name'] }}
<div
x-show="isOpen"
>
<div class="tw-mt-12 tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6">
{% assign coll_name = block.settings['menu-collection-name'] | handleize %}
{%- if coll_name != '' -%}
{% for product in collections[coll_name].products %}
{%- render 'restaurant-menu-item', item: product -%}
{% endfor %}
{%- else -%}
<p>No menu here check the name of collection</p>
{%- endif -%}
</div>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "Restaurant Menu",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Upload Menu Image"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Menu"
}
],
"blocks": [
{
"type": "menu-link",
"name": " Menu-link",
"settings": [
{
"type": "image_picker",
"id": "link-image",
"label": "Link Image"
},
{
"type": "text",
"id": "title",
"label": "Link Title",
"default": "Menu Title"
},
{
"type": "text",
"id": "menu-collection-name",
"label": "Menu Collection Name (required)",
"info": "It should match name of collection used for menu items. Use name when collection is first set"
}
]
}
]
}
{% endschema %}
I got some help on the Shopify partner slack and wanted to share my result incase it’s helpful to others.
Maybe I was trying to kill a mosquito with a sledge hammer. From the beginning I kinda went against current dawn theme conventions mainly because I did not want to navigate to another page to view and toggle between collections.
I think a stumbling block from the beginning for me was I had this vision that no menu’s would be open until a button was clicked. Actually the way that was suggested to me resulted in a better user experience in that an initial open menu and ability to toggle between menus is quite nice for the user.
Here is what solved my problem.
In using Alpine.js to manage the state of what is rendered on the page. I initially thought all menu’s initial state should be closed, turns out.
1 menu being open is a better user experience. To accomplish this x-data is set to x-data=“{ activeTab: 1 }” x- data Alpine Docs
2 Set the click handler in button to #click=“activeTab = {{ forloop.index }}” x-on Alpine Docs
3 Set x-show to render selected menu to x-show=“activeTab == {{ forloop.index }}” x-show Alpine Docs
I've tried using "type": "url:". and apparently that only works for collections. I want to make a dynamic external link. I tried text input. Why is this one task not easy to do?
<a class="section-tiktok__card" href="{{block.settings.url}}">
<img src="{{ 'tik-play-btn.svg' | asset_url }}" alt="play video">
</a>
{% schema %}
{
"name": "TikTok Feed",
"presets": [{
"name": "TikTok Section"
}],
"blocks": [{
"type": "html",
"limit": 5,
"name": "TikTok and Instagram Feed",
"settings": [
{
"type": "image_picker",
"id": "tiktok_bg",
"label": "Image Background"
},
{
"type": "url",
"id": "tiktok_url",
"label": "Tiktok or Instagram URL"
}
]
}]
}
{% endschema %}```
You're attempting to get a setting from a block but you haven't accessed your section blocks or assigned anything to block. Furthermore, your setting is named tiktok_url while you're using url to display it.
{% for block in section.blocks %}
<a class="section-tiktok__card" href="{{ block.settings.tiktok_url }}" {{ block.shopify_attributes }}>
<img src="{{ 'tik-play-btn.svg' | asset_url }}" alt="play video">
</a>
{% endfor %}
I am very new to Liquid and I am trying to create an option where the user is able to enter a YouTube link and the video is not appearing when entering the link. Currently, I have another video embedded in the schema tag so that the video can appear.
Here is my current code:
<div>
<div style="padding-top:56.17021276595745%" id="w-node-cdda72edcacb-27a794fe" class="w-embed-youtubevideo">
<iframe src="https://www.youtube.com/embed/J-sUpDMKWbc?rel=0&controls=1&autoplay=0&mute=0&start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen="">
</iframe>
</div>
</div>
{% schema %}
{
"name": "Embed Youtube",
"settings": [
{
"id": "video_url",
"type": "video_url",
"label": "Video URL",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": "Insert Youtube URL",
"placeholder": "text"
}
]
}
{% endschema %}
Here is my code placement of the section:
<div >
{% section 'EmbedYoutube' %}
</div>
I think you got the answer for it after make some search into documentation, for future reference you can add the data dynamic like this below code.
<div style="padding-top:56.17021276595745%" id="w-node-cdda72edcacb-27a794fe" class="w-embed-youtubevideo">
<iframe src="https://www.youtube.com/embed/{{section.settings.video_url.id}}?rel=0&controls=1&autoplay=0&mute=0&start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen="">
</iframe>
</div>
</div>
{% schema %}
{
"name": "Embed Youtube",
"settings": [
{
"id": "video_url",
"type": "video_url",
"label": "Video URL",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": "Insert Youtube URL",
"placeholder": "text"
}
]
}
{% endschema %}
You can check more regarding the video_url here on Shopify documentation HERE
Add this code into your section liquid file and you have to enter only after embed code (eg:- J-sUpDMKWbc ) in your inputbox in admin panel
<div>
<iframe width="420" height="345" src="https://www.youtube.com/embed/{{section.settings.video_url}}">
</iframe>
</div>
{% schema %}
{
"name": "Embed Youtube",
"settings": [
{
"id": "video_url",
"type": "text",
"label": "Video URL",
"info": "Insert Youtube Embed URL eg:- ZY6RfVY-Zl0"
}
]
}
{% endschema %}
I'm trying to add a custom section in Shopify to allow the user to upload 2 promotional images. I'm a novice but I managed to create a custom section for 1 image but when I try it for two images in the same section the images won't display on the page after upload.
I found a few threads on here to get me to this point. See code below:
{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}
{% schema %}
{
"name": "PromoTwo",
"blocks":[
{
"type": "block-1",
"name": "Block 1",
"settings": [
{
"type": "image_picker",
"id": "test_2",
"label": "Promo Image 1"
}
]
},
{
"type": "block-2",
"name": "Block 2",
"settings": [
{
"type": "image_picker",
"id": "test_3",
"label": "Promo Image 2"
}
]
}
],
"presets": [
{
"name": "PromoTwo",
"category": "Content"
}
]
}
{% endschema %}
My goal for this section is to create a section with two side by side images that the user will be able to upload themselves.
My suspicion is that I'm doing something wrong here:
{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}
You are trying to build something that is already present with the proper tools but the wrong way.
Sections
The main idea of a section is to provide an interactive way for the admin to update the content for a specific element.
A section has two ways to achieve this:
using the section settings
using the section blocks
Difference between section settings and blocks
The section settings are static fields that can be populated via the customize panel. Static in the sense that you can't dynamically add more without writing additional code.
On another hand blocks are the same as sections settings but they can by dynamic or you can add multiply blocks without writing additional code for each new one.
You can use both in the same section file if you like but you need to learn how to call them properly.
Syntax difference
Here is how a section settings looks like:
{% schema %}
{
"name": "Slideshow",
"settings": [
{
"id": "slide_image",
"type": "image_picker",
"label": "Image"
}
]
}
{% endschema %}
An here is how you call it:
{{ section.settings.slide_image | img_url: '1024x' | img_tag }}
Section is the main object and after that you pass the JSON objects, so it becomes section.settings.slide_image.
Here is how a block syntax looks:
{% schema %}
{
"blocks": [
{
"type": "slide",
"name": "Slide",
"settings": [
{
"id": "slide_image",
"type": "image_picker",
"label": "Image"
}
]
}
]
}
{% endschema %}
And here is the proper way to call it:
{% for block in section.blocks %}
{{ block.settings.slide_image | img_url: '1024x' | img_tag }}
{% endfor %}
What's wrong with your code?
1) You are using section blocks but you are calling the section settings.
2) You are creating multiply block types with the same image field - there is no point to this.
3) Don't use img_url: 'medium' this deprecated. Use numbers instead. For example img_url: '1024x'.
How should your code look like
Here is how should your code look like:
{% for block in section.blocks %}
{{ block.settings.promo_image | img_url: '1024x' | img_tag }}
{% endfor %}
{% schema %}
{
"name": "Promo",
"blocks": [
{
"type": "promo",
"name": "Puote",
"settings": [
{
"id": "promo_image",
"type": "image_picker",
"label": "Promo image"
}
]
}
],
"presets": [
{
"name": "PromoTwo",
"category": "Content"
}
]
}
{% endschema %}
{% for block in section.blocks %}
<div class="image_box">
{{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
</div>
{% endfor %}
{% schema %}
{
"name": "multi image",
"max_blocks": 4,
"settings": [
{
"type": "header",
"content": "multi image"
}
],
"blocks": [
{
"type": "select",
"name": "Add Button",
"settings": [
{
"id": "image",
"type": "image_picker",
"label": "Add image"
}
]
}
],
"presets": [
{
"name": "multi image",
"category": "text"
}
]
}
I am able to create an option in my theme to upload 2 images. These will be on a carousel as part of a homepage splash.
I have achieved this with the following code in my settings_scheme.json file:
[
{
"name": "Homepage Splash",
"settings": [
{
"type": "paragraph",
"content": "Choose images for homepage splash"
},
{
"type": "image",
"id": "slideshow_1.jpg",
"label": "Image 1"
},
{
"type": "image",
"id": "slideshow_2.jpg",
"label": "Image 2"
}
]
}
]
My question is, how do I now access these two images to display them as part of my 'homepage-splash.liquid'? Looking at other templates the code should be something like this:
{% for i in (1..2) %}
<img src='{% capture image %}slideshow_{{ i }}.jpg{% endcapture %}'>
{% endfor %}
But this outputs nothing in html. I'm sure it is something very basic I am missing as I am new to Shopify. Please could someone advise, it will really help me develop further. Thanks, DB
Your code should look like this
{% for i in (1..2) %}
{% capture image %}slideshow_{{ i }}.jpg{% endcapture %}
<img src="{{ image | asset_url }}"/>
{% endfor %}