Custom Fields
Re-Envisioned
Support MB Views Photos not displaying inline image advanced

  • Creator
    Topic
  • #28367
    Resolved Joseph Shrock
    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!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #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

    #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>
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.