[Resolved] vertical caption align with picture.

Home Forums Support vertical caption align with picture.

  • This topic has 16 replies, 2 voices, and was last updated 2 months ago by Boris.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1377262
    Boris

    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;
    }
    #1377542
    David
    Staff
    Customer Support

    Hi there,

    will this only be required on the Featured Image?

    #1377547
    Boris

    Hi David,

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

    Best regards,
    Boris

    #1377617
    David
    Staff
    Customer Support

    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 ?

    #1377621
    Boris

    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;
    }
    #1377630
    David
    Staff
    Customer Support

    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;
    }
    #1377644
    Boris

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

    #1377702
    David
    Staff
    Customer Support

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

    #1377752
    Boris

    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

    #1377755
    David
    Staff
    Customer Support

    No problems 🙂 Let us know how you get on.

    #1377806
    Boris

    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?

    #1377815
    David
    Staff
    Customer Support

    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.

    #1377830
    Boris

    OK great, I have added a picture.

    #1377896
    David
    Staff
    Customer Support

    Try this:

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

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

    Thanks a lot and best regards,
    Boris

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.