Dynamic Sized Image And WP Caption Text

l’m looking for the best method of making what I have pictured below.

Hi @tangra can you please try using the CSS code below to move the caption.

.wp-block-image {
  position:relative;
}
.wp-block-image figcaption {
  position:absolute;
  bottom:0;
  background-color:rgba(0,0,0,0.6);
  padding:10px;
	color: #fff;
}

Hello and thanks for your help.

The problem is getting the text to be the same size with different sized pictures.

You can add font size to the CSS code, under color: #fff; you can add this line for font size font-size: 20px; you can adjust the figure to your liking.

Hey @tangra, would it be possible to share a link to your site? It might be easier to understand the issue if we can take a direct look. Thank you!

Here is a link to a category and a post, there is a problem with both. Thank you. https://www.bankya.net/news

Thank you @tangra, seeing the actual site is super-helpful!

I see two problems here. The first one is that we were positioning the caption wrong, it needs to fit the image, not the entire figure. The second problem is that the images you are adding are not using up the space that is available.

To fix both problems, please replace the code @thelmachido shared above with this one:

/* Set parent container to position caption inside */
.featured-media-inner {
position:relative
}
/* Position & style caption  */
.wp-block-image figcaption {
  position:absolute;
  bottom:0;
  background-color:rgba(255,255,255,0.8);
  padding:10px;
}
/* Force the featured image to use all the available space */
.featured-media-inner img {
  width:100%;
  height:auto;
}

The code above should have this result:

• This reply was modified 1 year, 8 months ago by Alvaro Gómez.

Hi, I need to replace .wp-block-image with .featured-media to get it working. The problem is that with small pictures it will expand them to 100% and they will blur, I wanted the text box to be the size of the picture, but it seems that it will not work with css alone.

it seems that it will not work with css alone.

I do not think there is away for the caption to automatically resize to match the width of the image, no using CSS alone. And if some of your images are small, the will look blurry if we stretch them.

Would it be possible to replace those images with bigger ones so they all look good?

I won’t always be able to find and upload photos large enough to look good. Maybe I should give up on this method. and make my own code and input the pictures.

Something like this:

https://www.bankya.net/entertainment/cake-of-sweet-potatoes

If you anticipate that you will not have big enough, making the image size smaller sounds like a good solution, yeah. I am going to mark this thread as solved but please feel to reply if you have any further questions on how to make this work.

Good luck with your site!

Thank you for your help, everything is fine.

Cool!

I have one last question if I may. I am wondering if this is the correct way to add more photos to a post.

<figure class="featured-media">
<div class="featured-media-inner section-inner">

<img width="1024" height="576" src="/test/test.webp">

<figcaption class="wp-caption-text">text info</figcaption></div>
<!-- .featured-media-inner --></figure>

Hey @tangra, this new question seem to be unrelated to the original one. It is important to keep different questions in separate threads for discoverability.

Could you please open a separate support thread and maybe provide a little bit more detail? Thank you!