Just want image source

New Member
13 0 0

I have several images lined up in an article: 

 

<p>
  <span class="s1">
    <img src="//cdn.shopify.com/image.png?v=###" alt="" />
  </span>
</p>
<p>
  <span class="s1">
    <img src="//cdn.shopify.com/image.png?v=###" alt="" />
  </span>
</p>
<p>
  <span class="s1">
    <img src="//cdn.shopify.com/image.png?v=###" alt="" />
  </span>
</p>

and I only want the image source part:

//cdn.shopify.com/image.png?v=###

I tried to use split: 'src="' but all the code in between the 'src="' remains .. is there anyway to remove it cleanly? Or alternatively, just pull out all the image sources?

0 Likes

{{ section.settings.logo | img_url: 'original' }}

this is take original image name ,size

 

if you use

{{ section.settings.logo | img_url: '300x300 }}

this is add extra text in image name 

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Shopify Expert
665 170 199

Hi, @Rachella ,

This is Evita from On The Map.

 

You can get url using this  JS code:

const images = document.querySelectorAll("s1 img");

const allImages = []; 

for (var i = 0; i < images.length; i++) {
    const image = images[i];
    allImages.push((image.getAttribute(src));
}

console.log(allImages);

The images will return in the array.

 

Best, Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
13 0 0

Can I get it using just liquid?

0 Likes
New Member
13 0 0

I'm pulling the list of images from a blog and putting it back into liquid code. Not knowing how many images - is there a way to loop that?

0 Likes
New Member
13 0 0

Sorry, I didn't write my question nor responses clearly.

 

I can see using "| img_url: 'original' " will spit out the first image url. How do I get an array of all the image urls with liquid? Or the only way would be javascript?

 

Thank you for the responses so far.

0 Likes