- This topic has 22 replies, 3 voices, and was last updated 3 years, 5 months ago by Elvin.
-
AuthorPosts
-
July 26, 2020 at 2:20 pm #1377262Boris
Hi, I want the vertical caption to be vertically align with the picture / the black rectangle. In the example: The version above is wrong, the down below one is what I would like it to be. Can someone give me a hint? Thank you for your time.
Link for the example page attached for admins.
At Custom CSS:
.featured-image .wp-caption-text { float: right; margin: right; max-width: 100%; padding-right: 10px; padding-left: 10px; font-size: 0.7rem; line-height: 1.4em; color: #FFF; transform: rotate(90deg); transform-origin: right top 0; } .wp-caption-text { float: right; margin: right; max-width: 100%; padding-right: 10px; padding-left: 10px; font-size: 0.7rem; line-height: 1.4em; color: #FFF; transform: rotate(90deg); transform-origin: right top 0; } .wp-caption .wp-caption-text { background: rgba(0, 0, 0, 0.2); color: #FFF; }
July 27, 2020 at 12:29 am #1377542DavidStaffCustomer SupportHi there,
will this only be required on the Featured Image?
July 27, 2020 at 12:33 am #1377547BorisHi David,
I would like to use it for single posts on any picture-caption including the Featured Image.
Best regards,
BorisJuly 27, 2020 at 2:01 am #1377617DavidStaffCustomer SupportThis is tricky if the image is not 100% the width of the container.
But lets see if we can do the featured images first. What code did you use to add the Caption ?July 27, 2020 at 2:06 am #1377621BorisHi David, I see! Thank you for anyway helping.
The Snippet:
add_filter( 'post_thumbnail_html', 'custom_add_post_thumbnail_caption',10,5 ); function custom_add_post_thumbnail_caption($html, $post_id, $post_thumbnail_id, $size, $attr) { if ( !$html == '' && is_single() ) { // Get Excerpt of thumbnail $thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment')); $thumbnail_caption = $thumbnail_image[0]->post_excerpt; if ( $thumbnail_caption ) { $html .= '<div class="wp-caption thumb-caption"> <p class="wp-caption-text thumb-caption-text">'. $thumbnail_caption .'</p> </div>'; } } return $html; }
July 27, 2020 at 2:24 am #1377630DavidStaffCustomer SupportReplace that PHP snippet with this:
add_filter( 'post_thumbnail_html', 'custom_add_post_thumbnail_caption',10,5 ); function custom_add_post_thumbnail_caption($html, $post_id, $post_thumbnail_id, $size, $attr) { if ( !$html == '' && is_single() ) { // Get Excerpt of thumbnail $thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment')); $thumbnail_caption = $thumbnail_image[0]->post_excerpt; if ( $thumbnail_caption ) { $html = '<div class="featured-image-with-caption">' . $html . '<div class="wp-caption thumb-caption"> <p class="wp-caption-text thumb-caption-text">'. $thumbnail_caption .'</p> </div> </div>'; } } return $html; }
And replace your CSS with this CSS to position and rotate the caption:
.featured-image-with-caption { display: inline-block; position: relative; } .thumb-caption { position: absolute; bottom: 0; right: 1.5em; } .thumb-caption-text { writing-mode: vertical-rl; text-orientation: relative; margin-bottom: 0; }
July 27, 2020 at 2:43 am #1377644BorisHey David, very nice!
I have just changed it to:text-orientation: relative
July 27, 2020 at 3:37 am #1377702DavidStaffCustomer SupportAwesome 🙂 Glad to be of help.
Let us know if you need help with the in content images.July 27, 2020 at 4:29 am #1377752BorisHi David,
With this nice „template“ I’ll try to do the rest of the steps on my own.Thank you for the excellent support!
Best regards,
BorisJuly 27, 2020 at 4:30 am #1377755DavidStaffCustomer SupportNo problems 🙂 Let us know how you get on.
July 27, 2020 at 5:32 am #1377806BorisPlease can you give me already a hint, if I have to change only the CSS? / Can I use your snippet for the Featured Image and the normal images? Or do I have to change the CSS and the snippet?
July 27, 2020 at 5:38 am #1377815DavidStaffCustomer SupportThe snippet only applies to the featured image.
Images with a caption added to a content has a different markup.
Can you add one to the page you provided the link for – and i can look at the CSS required for that.July 27, 2020 at 5:56 am #1377830BorisOK great, I have added a picture.
July 27, 2020 at 6:47 am #1377896DavidStaffCustomer SupportTry this:
figure .wp-caption-text { position: absolute; right: 0; bottom: 0.5em; writing-mode: vertical-rl; text-orientation: relative; }
July 27, 2020 at 8:02 am #1378129BorisHi David,
yes, this did the magic. Very nice solution.Thanks a lot and best regards,
Boris -
AuthorPosts
- You must be logged in to reply to this topic.