Archived topic
Caption - Image
16 replies · Started by Raul on January 29, 2021
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.
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
That works, thanks, But cannot set background for the caputre with
.thumb-caption-text p {}
Can you share a link to where i can see the issue?
Sure: https://pcpointer.de/news/microsoft-flight-simulator-2020-welt-update-3/
I wanted something like a back background to get it more readable ...
I can't see the caption on that image ?
It is on the right side, I can see it on pc and smartphone ;)
Not here on screen or in the markup:
I used the code from your linked post and it works on all computers here ...
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;
}I'm seeing the same thing as David:
https://www.screencast.com/t/WZYNdG2gr
Can you clear and disable WP Rocket?
I disabled WP Cache ... I tested it on a new computer and still works fine with different browser ...
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;
}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.
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 ?
