vertical caption align with picture.

Hi there,

will this only be required on the Featured Image?

Hi David,

I would like to use it for single posts on any picture-caption including the Featured Image.

Best regards,
Boris

This 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 ?

Hi 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;
}

Replace 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;
}

Hey David, very nice!
I have just changed it to: text-orientation: relative

Awesome :) Glad to be of help.
Let us know if you need help with the in content images.

Hi 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,
Boris

No problems :) Let us know how you get on.

Please 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?

The 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.

OK great, I have added a picture.

Try this:

figure .wp-caption-text {
    position: absolute;
    right: 0;
    bottom: 0.5em;
    writing-mode: vertical-rl;
    text-orientation: relative;
}

Hi David,
yes, this did the magic. Very nice solution.

Thanks a lot and best regards,
Boris