CSS into views - Meta Box

This topic has 7 replies, 2 voices, and was last updated 3 years, 7 months ago by Long Nguyen.

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

Author

Posts
April 28, 2021 at 4:07 PM #27728
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 %}

Add New Note to this Reply
April 29, 2021 at 2:45 PM #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.

Add New Note to this Reply
April 29, 2021 at 2:55 PM #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.

Add New Note to this Reply

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

Add New Note to this Reply

April 30, 2021 at 9:23 PM #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">

<h4>{{ post.title }}</h4>

</div>

{% endfor %}

Add New Note to this Reply

April 30, 2021 at 9:30 PM #27786

Thibaut
Participant

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

Add New Note to this Reply

April 30, 2021 at 9:34 PM #27788

Thibaut
Participant

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

Add New Note to this Reply

April 30, 2021 at 10:08 PM #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>
```
Add New Note to this Reply
Author

Posts

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

You must be logged in to reply to this topic.