Hi everyone, I was wondering how I would go about putting fields inside other fields… I’m guessing it’s just a matter of CSS?
We have a field group that uses repeater; it is used for Events. I need to have an image a certain size, and then have a date overlayed on the image, and then the title of the event and time.
Please see example here – https://ibb.co/QQy0Wsg
Any advice would be greatly appreciated, as I’m not sure how to go about doing this 🙁
Multiple ways to do it, you can position everything with absolute so that it all overlays the same div block but this can get a bit messy.
Most likely if you just take the image and use that as a background image and do some inline CSS to get that background image then you can position the rest of the items within the div block.
Though without going into a huge amount of detail this isn’t really anything to do with ACF this is knowing front-end development and in this case CSS.
https://freefrontend.com/css-cards/ Here is some helpful cards you could reference
Hi Andrew,
Thanks so much for this! Yeah, I figured it is mostly CSS but I’m still stuck on the coding part of it too… I can’t seem to figure out how to get the fields to display correctly. I can get the output, but I can’t figure out how to get the image to be the correct size.
This is my code:
<?php while( have_rows('grouped_fields') ): the_row(); }
?>
<li><?php the_sub_field('title'); ?></li>
<li><?php the_sub_field('date'); ?></li>
<li><?php the_sub_field('time'); ?></li>
<li><img />" alt="" /></li>
<li><?php the_sub_field('location'); ?></li>
<?php endwhile; ?>
I’m not a good enough coder to know what to wrap everything in – like how can I make the image the background? I’m just trying to piece things together, but there is so much to learn / sift through 🙁
Thank you so much for the link.
It seems like you have a ways to go.
To easily get the image behind the text using a background style with css would be the best way to go. You have to make div elements or other elements though, having simply data but not way to target it doesn’t help.
Example:
<?php while( have_rows(‘grouped_fields’) ): the_row(); }
?>
<style>
.modal-wrap{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
</style>
<div class="modal-wrap" style="background: url("<?PHP echo $image_url; ?>") 50% 50% no-repeat">
<h2><?php the_sub_field(‘title’); ?></h2>
<p><?php the_sub_field(‘date’); ?></p>
<p><?php the_sub_field(‘time’); ?></p>
<p><?php the_sub_field(‘location’); ?></p>
</div>
<?php endwhile; ?>
I can’t get it to work. I just don’t know what I’m doing wrong 🙁
This reply has been marked as private.
This reply has been marked as private.
