Custom Fields
Re-Envisioned
Support MB Views CSS into views

  • Creator
    Topic
  • #27728
    Resolved Thibaut
    Participant

    Hello

    I have 2 CPT "Books" and "Photographers". In "Photographers" I want to display their "Books". I succeed it however I am not able to customize it properly.

    By default the pictures of the book will be displayed next to each other (let's say there are 3 pictures), which is good. I want to add the title of the book so I add {{ post.title }} it gets next to each 3 pictures. So until here all is normal.

    How do I get the title below each pictures and keep the pictures next to each other too? No matter how I put the <div> or <p>, what I get as a result is the pictures below each other (each pictures with the title below). From the below code how do you keep each picture next to each other with the title below?

    {% set relationship = attribute( relationships, 'book-photographer' ) %}
    {% for post in relationship.to %}

    <a href="{{ post.url }}"><img src="{{ post.thumbnail.medium.url }}" width="{{ post.thumbnail.medium.width }}" height="{{ post.thumbnail.medium.height }}" alt="{{ post.thumbnail.medium.alt }}" />
    

    {{ post.title }}

    {% endfor %}

Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #27757
    Long Nguyen
    Moderator

    Hi,

    It looks like you miss the closing <a> tag.

    <a href="{{ post.url }}"><img src="{{ post.thumbnail.medium.url }}" width="{{ post.thumbnail.medium.width }}" height="{{ post.thumbnail.medium.height }}" alt="{{ post.thumbnail.medium.alt }}" /></a>
    <h4>{{ post.title }}</h4>

    Please re-check it and let me know how it goes.

    #27759
    Thibaut
    Participant

    thanks, I missed the tag.

    I used the above corrected code but still, each picture are below each other instead of being next to each other.

    #27781
    Long Nguyen
    Moderator

    Hi,

    You can use the flexbox to show pictures next to each other. Get more details here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    #27785
    Thibaut
    Participant

    I already did, what it dos it puts the text next to the image but still the images are below each other. What am I missing?

    {% set relationship = attribute( relationships, 'book-photographer' ) %}
    {% for post in relationship.to %}

    <style>

    .container {
    display:flex
    }

    </style>

    <div class="container">

    {{ post.thumbnail.medium.alt }}
    <h4>{{ post.title }}</h4>

    </div>

    {% endfor %}

    #27786
    Thibaut
    Participant

    sorry my full code is not showed, please take the code in your mesaage where you mentionned about the tag missing

    #27788
    Thibaut
    Participant

    and by the way it is not resolverd!!!!!!!!!!!!!!!!!

    #27791
    Long Nguyen
    Moderator

    Hi,

    Please move the container tag outside the loop, just like

    <div class="container">
    {% set relationship = attribute( relationships, 'book-photographer' ) %}
    {% for post in relationship.to %}
    
    ...
    
    {% endfor %}
    </div>
    
Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.