Photos not displaying inline image advanced

This topic has 2 replies, 2 voices, and was last updated 3 years, 11 months ago by Joseph Shrock.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts

May 22, 2021 at 4:02 AM #28367

Participant

I have 4 photos attached (image advanced) to each CPT and I am having issues with displaying images in an UL list "inline" or horizontally they just want to stack vertically, what am I missing ?

{% for item in post.puppy_photos %}
    <ul style="list-style: none;"><li style="display: inline;"> 
        <a href="{{ item.large.url }}" > <img src="{{ item.thumbnail.url }}" width="{{ item.thumbnail.width }}" height="{{ item.thumbnail.height }}" alt="{{ item.thumbnail.alt }}"> </a>
        </li></ul>  
{% endfor %}

Thanks for any tips!

May 23, 2021 at 3:33 PM #28380

Long Nguyen

Moderator

Hi Joseph,

You need to move the tag <ul> outside from the loop, only <li> tags will be repeated.

<ul style="list-style: none;">
    {% for item in post.puppy_photos %}
    <li style="display: inline;"> 
        <a href="{{ item.large.url }}" > <img src="{{ item.thumbnail.url }}" width="{{ item.thumbnail.width }}" height="{{ item.thumbnail.height }}" alt="{{ item.thumbnail.alt }}"> </a>
    </li>
    {% endfor %}
</ul>

On the frontend, the code rendered like this https://share.getcloudapp.com/rRujp58D

May 25, 2021 at 10:23 PM #28420

Joseph Shrock

Participant

Thanks, I also had to add float:left; to get it working - thanks!

<ul style="list-style: none;">
    {% for item in post.puppy_photos %}
    <li style="display: inline; float:left;"> 
        <a href="{{ item.large.url }}" > <img src="{{ item.thumbnail.url }}" width="{{ item.thumbnail.width }}" height="{{ item.thumbnail.height }}" alt="{{ item.thumbnail.alt }}"> </a>
    </li>
    {% endfor %}
</ul>

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.