Get the images of a blog article in Shopify

Question

I have to modify a Shopify website with a blog that extracts the content of blog articles using

{{ article.content }}

. This method gets the entire content of an article, but I need to get the images separately. I don't mean the 'main' image, but all the images that the content of a blog article contains. How can I do this? It would be awesome if I could get a JS array containing the paths to the images.

Answer 1

Lets say your article is in a div. Like

<div class="article-content">{{ article.content }}</div>

Now we can put all images under that div into an array.

$(document).ready(function(){

  // To save all images in an array named img_array
  var img_array = $('.article-content img').map(function() {
    return $(this).attr("src");
  });

  // You can run a for loop to display the images in the array.
  for (var i=0; i<img_array.length; i++) {
    alert(img_array[i]);
  }
});

Let me know if that helps.

reference : Get inside all images in array using jquery?

Get the images of a blog article in Shopify

Sign up