[Support request] Caption – Image

[Raul]

Hi,
I want to add the caption of my main-image from a post directly as overlay over the image in right or left corner. Is that possible?

My idea is something like an hook-element:

<div class="featured-image-capture"><?php
$get_description = get_post(get_post_thumbnail_id())->post_excerpt;
  if(!empty($get_description)){//If description is not empty show the div
  echo '<div class="featured_caption">' . $get_description . '</div>';
  }
	?></div>

My problem is that with a hook it will be not possible to get it as overlay over the picture.

And generate_before_entry_title. Than I have to add some CSS code do slide it over the picture. Is that the right way? With “position: absolute;”? it’s working only if the size of screen will not change.

[David]

Hi there,

see this topic, aside of the vertical alignment of the caption, this method works:

https://generatepress.com/forums/topic/vertical-caption-align-with-picture/#post-1377630

[Raul]

That works, thanks, But cannot set background for the caputre with
.thumb-caption-text p {}

[David]

Can you share a link to where i can see the issue?

[Raul]

Sure: https://pcpointer.de/news/microsoft-flight-simulator-2020-welt-update-3/

I wanted something like a back background to get it more readable …

[David]

I can’t see the caption on that image ?

[Raul]

It is on the right side, I can see it on pc and smartphone 😉

[David]

Not here on screen or in the markup:

[Raul]

I used the code from your linked post and it works on all computers here …

[Raul]

I tried this here and it works but it does not look clean:

.wp-caption-text.thumb-caption-text{
	padding: 20px;
	margin: -20px -60px 10px 0px;
 background-color: rgba(0, 0, 0, 0.35)!important;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0.5)))!important;	
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%)!important;
	font-size: 16px;
}

[Leo]

I’m seeing the same thing as David:
https://www.screencast.com/t/WZYNdG2gr

Can you clear and disable WP Rocket?

[Raul]

I disabled WP Cache … I tested it on a new computer and still works fine with different browser …

[Leo]

I can see it now.

Are you trying to change the background color of the caption?

If so modifying background and background-color of these CSS:

.thumb-caption-text {
   writing-mode: vertical-rl;
  transform: rotate(180deg);    	margin-bottom: 0;
	color: #fff;
	 background-color: red!important;
}

and

* .inside-article p.thumb-caption-text {
    padding: 20px!important;
    background-color: rgba(0, 0, 0, 0.35)!important;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0.5)))!important;
    background: linear-gradient(
0deg
, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%)!important;
    font-size: 16px;
}

[Raul]

Yes but with padding i have the problem that this caption is on different positions and not exactly on the border of the image if I change the website size or use a mobile phone.

[David]

The problem you will have on any small device is that a longer caption will be bigger then the image being displayed.

Where exactly do you want it displayed on desktop ? And how do you want it to behave when viewed on a mobile phone ?

[Author]

Posts