Meta Box

CSS into views

Support › MB Views › CSS into viewsResolved

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 28, 2021 at 4:07 PM #27728
    ThibautThibaut
    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 %}

    April 29, 2021 at 2:45 PM #27757
    Long NguyenLong 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.

    April 29, 2021 at 2:55 PM #27759
    ThibautThibaut
    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.

    April 30, 2021 at 8:51 PM #27781
    Long NguyenLong 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/

    April 30, 2021 at 9:23 PM #27785
    ThibautThibaut
    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 %}

    April 30, 2021 at 9:30 PM #27786
    ThibautThibaut
    Participant

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

    April 30, 2021 at 9:34 PM #27788
    ThibautThibaut
    Participant

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

    April 30, 2021 at 10:08 PM #27791
    Long NguyenLong 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>
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.