wildlyinaccurate/jekyll-responsive-image

Responsive Image Block - Doesn't seem to pull in the values for alt and title

Closed this issue · 3 comments

viv-b commented

Hi. I'm pulling info. from an array of images to pull into a lightbox style gallery and using the responsive image block:

{% capture path %}{{ image.image_path }}{% endcapture %}

{% responsive_image_block %}
    template: _includes/responsive-image-gallery.html
    path: {{ path | replace: '/uploads', 'uploads' }}
    {% if image.title %}
    alt: {{ image.title }}
    title: {{ image.title }}
    {% endif %}
{% endresponsive_image_block %}

... and my template is:

<p>
{% for i in resized %}

     {% if forloop.first == true %}
     <a href="/{{ i.path }}" title="{{ i.title }}" class="gallery">
     {% endif %}  
 
     {% if forloop.last == true %}
     <img src="/{{ i.path }}" alt="{{ i.alt }}">
     </a>
     {% endif %}

 {% endfor %}
 </p>

... The logic here is just so I can use the larger image in my sizes array as the link and the smallest image as the thumbnail.

All works fine as far as the lightbox working as expected, except the value for title (reused for the alt attribute) is not being pulled into the template and the attributes end up empty in the output html. Even if I just assign a test value to a variable before the responsive image block (e.g. {% assign title = 'Lorem ipsum...' %} ), the value doesn't seem to be available in the template.

Am I missing something simple here? Any help would be much appreciated. Thanks.

Hiya! Instead of {{i.title}}, try just {{title}}.

viv-b commented

Excellent, yep that did the trick!
Appreciate your time and quick response :)

I'm facing a similar issue.

{% assign path = post.image %}
{% assign alt = post.title %}

<div class="col-lg-3 mb-3 grid-item">
      <div class="card">
            <a href="{{ post.url }}">
                  {% responsive_image_block %}
                  path: {{ path }}
                  alt: {{ alt }}
                {% endresponsive_image_block %}
            </a>
      </div>
</div>

Template

{% assign smallest = resized | sort: 'width' | first %}

{% capture srcset %}
{% for i in resized %}
    /{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}

<img class="card-img" src="/{{ smallest.path }}">

Any solution?