Dynamic Data link with Wordpress post

How To
1

How do I make each element like this to have dynamic data which is connect with each posts i have without using Post Element?

What I try to build:

image
image406Ă—590 70.1 KB

My brick:

image
image1605Ă—604 159 KB

2

Hi,

you can set the post thumbnail also as dynamic data. Just disable the image under “image”, add another field under fields and select “post thumbnail”. Then you can change the order by drag and drop.

To change the initial size of the image you can extend the “{featured_image_tag}” with the size, seperated by colon like “{featured_image_tag:medium}”.

You’ll have to add some custom css to the posts element to style the dynamic image, but that’s easy. After adding the dynamic image to fields, hit save and inspect your site on the frontend with developer tools (right click on the image » inspect). The image is wrapped into a div that has a data-id. Copy the code below, paste it into the posts element custom css (under style » custom css) and change the id to your id:

root div[data-field-id="your-fields-data-id"] {
  width: 100%;
  height: 200px;
  aspect-ratio: 4/3;
}

root div[data-field-id="your-fields-data-id"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

You can change the height and aspect-ratio to whatever you like.

3 Likes