Call each url image in the quark modular feature loop


#1

Hi, I copied the modular feature from quark theme, with small change of calling an image instead the fontawesome icon. With {{feature.bimg}} the file name shows as expected, but if I try {{feature.bimg.url}} it shows up empty.

I guess is something ridiculously simple, but I cant figure it out. Any help is appreciated.

Here’s the code for twig:

            {{ content }}

            <div class="columns">
            {% for feature in page.header.features %}
               <div class="column {{ columns }}">
                   <div class="feature-image">
                       {{ feature.bimg }}
                       {% if feature.header %}
                           <h6>{{ feature.header }}</h6>
                       {% endif %}
                   </div>
                   <div class="feature-content">
                       {% if feature.text %}
                        <p>{{ feature.text }}</p>
                       {% endif %}
                   </div>
               </div>
            {% endfor %}
            </div>
        </div>
    </section>

Cheers,
Pedro


#2

Hi
Is {{ feature.bimg.url }} an actual field name or are you adding .url to try to make it into a url?

If you want to create a whole image link you can do it with this line:
{{ page.media.images[ feature.bimg ].html( feature.bimg.image_title , feature.bimg.image_alt, feature.bimg.img_class ) }}

The image title, alt and class are fields you would need to create or if you don’t need all those you could do this:

{{ page.media.images[ feature.bimg ].url }}


#3

Hi,

I was trying to add .url to the feature.bimage variable with no avail.
Your last line worked perfectly.
I will test the line with class and alt for learning purposes.

Thank you, csixtyfour!
Pedro