Calling each image from an Article {{content}} for a Slideshow Gallery

Shopify Partner
2 0 0

I'm attempting to craft a piece of liquid to call each image included in the content of an article, wrap each image with a list tag in order to automatically create a gallery from a blog post with just images.

<li><img src="image url" /></li>

 

So far I've got the gallery working with static img url's and dynamically loading just one image out of three that are included in the article with the following code.

<div class="flexslider slider">
<ul class="slides">
     {% if article.content contains "<img" %}
          {% assign src = article.content | split: 'src="' %}
          {% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn';; | replace: 'http:http://';;, 'http://';; | remove: 'https:' %}

 <li>
<img src="{{src}}" />
</li>

{% else %}
{% endif %}

</ul>

 

It seems I need to figure out how to determine that there is more than one image and run this as a loop until each image is wrapped.  Apologies as I'm a newbie with the liquid stuff.

Thank you! - Nick

 

0 Likes
Astronaut
1890 1 393

You will need to rename a variable.  Then use a for-loop to iterate through each image URL.

<div class="flexslider slider">
<ul class="slides">
     {% if article.content contains "<img" %}
          {% assign content-src = article.content | split: 'src="' %}
          {% assign content-size = content-src.size | minus:1 %}
          {% for i in (1..content-size) %}
              {% assign src = content-src[i] | split: '"' | first | replace: '//cdn', 'http://cdn';;; | replace: 'http:http://';;;, 'http://';;; | remove: 'https:' %}
<li>
<img src="{{src}}" />
</li>
          {% endfor %}

     {% else %}
     {% endif %}

</ul>

I hope this helps.

1 Like
Shopify Partner
2 0 0

Alex!

Endless thanks! Not only does it work beautifully but I "almost" understand how its working!  Progress for this designer...

For others wondering how this is working...I'm heavily modifying the 'Retina' theme which has flexslider script (http://www.woothemes.com/flexslider/) built into it. I'm building a look book section of a website which allows you to preview a number of look books and then enter to view a single look book.  I've done this by setting up a blog called 'look book' - For each blog post I've uploaded and inserted images into the body.  I've inserted a single image (thumbnail selection) into the excerpt to use on the thumbnail page.

I've modified the article.liquid file to include the following code which loops and includes each image as a list item to display in the flexslider.

<div class="flexslider slider">
<ul class="slides">
     {% if article.content contains "<img" %}
          {% assign content-src = article.content | split: 'src="' %}
          {% assign content-size = content-src.size | minus:1 %}
          {% for i in (1..content-size) %}
              {% assign src = content-src[i] | split: '"' | first | replace: '//cdn', 'http://cdn';;;; | replace: 'http:http://';;;;, 'http://';;;; | remove: 'https:' %}
<li>
<img src="{{src}}" />
</li>
      {% endfor %}

     {% else %}
     {% endif %}

</ul>
</div>


      
<h1 style="text-align:center;"><a href="{{ article.url }}" title="{{ article.title | escape }}">{{ article.title }}</a></h1>

<!-- DELETE THIS LINE: The lookbook-copy style hides all images within the paragraph -->

<p style="lookbook-copy">      	
		{{ article.content }}
</p>

 

I've also customized a page template in order to display thumbnail previews of each look book which link to the individual articles (look book slideshows).

<div class="lookbook">
  
{% for article in blogs.lookbook.articles %} 

<!-- REPLACE 'lookbook' with the handle of your blog -->

<div class="eight columns alpha">
       
     <div class="image_container">
              
              <a href="{{ article.url }}" class="img_brdr">
			  {{ article.excerpt }}
              <span>{{ article.title }}</span>
              </a>
             
     </div>

            
</div>
{% endfor %}

</div>

Image preview of thumbnail page (caution - Its a Lingerie website!)

https://www.dropbox.com/s/xwyisqohebg83z1/Screen%20Shot%202014-08-05%20at%205.32.33%20PM.png

Image preview of gallery

https://www.dropbox.com/s/4qwx6ea22v1mtqe/Screen%20Shot%202014-08-05%20at%205.32.51%20PM.png

 

 

 

GOOD LUCK!

0 Likes
Excursionist
13 1 3

Just curious if it's a formatting mistake (maybe these forums were migrated from an old system) but your replace functions have three consecutive semicolons after several calls—is that intentional? If it's intentional, can you please explain or link to documentation on that syntax? I can't seem to find any documentation on using semicolons in liquid templates like you've done.

0 Likes