[Resolved] How to display caption ON Image

Home Forums Support How to display caption ON Image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #247608
    Max

    Hi Tom,

    I inserted an image to a blog post and want to display the caption of this as well as the captions of all other images I am posting to my site ON the image.

    It should look like the following:

    http://www.artofblog.com/wp-content/uploads/2011/10/WordPress-Header-Image-Site.jpg

    I figured a way to show the caption on the image based on some posts I found in the forum. My actual status is this:

    .wp-caption .wp-caption-text {
    background: transparent;
    padding: 80px 350px;
    text-align: center
    color: #ffffff;
    position: absolute;
    font-size: 45px;
    }

    The result is this: https://postimg.org/image/e4ycz24l5/

    What I want: The caption should always be displayed in the center of the image. Also it should be displayed in one line. Furthermore, is it possible to change the style, for example make the caption a h1-headline?

    Thanks a lot!

    Cheers!

    #247714
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Interesting – is there any way you can link me to that page?

    You could theoretically change the caption text to be an H1, but doing so would make it so any other caption you use on your site (maybe just with a regular picture on a page) would have it too.

    You can learn more about that on this page under the “Customizing the caption output” section: http://justintadlock.com/archives/2011/07/01/captions-in-wordpress

    #247914
    Max

    Hi,

    thats totally fine for me. The caption should always be displayed in the same way.

    More important for me than making the caption a h1 or h2 is that the text needs to be in the center of the image every time. As you can see, the caption comes in two lines and isn’t really centered at the moment.

    Therefore, do you have any custom css improvement for me? Just center the caption on any image and bring it in one line. Unfortunately I can’t show you a site because its not published yet.

    Thanks

    #248015
    Tom
    Lead Developer
    Lead Developer

    There could be a lot of reasons the text isn’t centered and is on two lines. I would need to inspect the code to know for sure.

    Any chance you can give me a heads up when it’s view-able?

    #248820
    Max

    The solution for this one is:

    .wp-caption .wp-caption-text {
    background: transparent;
    padding: 100px;
    text-align: center;
    color: #ffffff;
    position: absolute;
    font-size: 45px;
    width: 100%;
    box-sizing: border-box;
    }

    #248837
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.