[Resolved] Create imagebox

Home Forums Support [Resolved] Create imagebox

Home Forums Support Create imagebox

  • This topic has 9 replies, 2 voices, and was last updated 5 years ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #838267
    Ronja

    I have a second issue which is a bit difficult to explain.
    https://www.backpackertales.com/reiseziele/ozeanien/
    From this link you can see, I created a box with a link to a category.
    I put in the text and picture in PowerPoint and just uploaded it.
    As I changed the font style now, I was wondering if there´s a way to just upload the picture without text and put the text in the box via Generatepress.
    I hope you understand what I mean.

    #838282
    David
    Staff
    Customer Support

    Hi there,

    if you add the text as the Caption of the image this should display on screen. We can then assist with some CSS to make it look like it does in the image. Let me know

    #838291
    Ronja

    Okay great, what css must I add?

    #838293
    Ronja

    And one more thing: where can I change the font style and size without affecting the caption of the pictures in my blog posts?

    #838294
    David
    Staff
    Customer Support

    Try this:

    figure.wp-block-image.caption-overlay {
        position: relative;
    }
    
    figure.wp-block-image.caption-overlay figcaption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -100%, 0);
        font-size: 2em;
        font-weight: 700;
        color: #fff;
        font-family: 'Roboto Slab';
    }
    

    In the block editor, select the image block, in the Settings Tab > Advanced give the block a Additional CSS class of caption-overlay. Then this will only apply to that image.

    #838296
    Ronja

    Great, that worked! If I add more destinations, will the css automatically work or will I have to add more codes?
    How can I change the font family to roboto slap?

    #838300
    David
    Staff
    Customer Support

    I edited the code above, to include the font-family: 'Roboto Slab'; property, just amend the CSS to include that. That font will need to be one of those you have selected in your customizer.

    No more code. Just create a new image block like the above and give it the same Additional CSS class. Or just duplicate the block and change the image, caption, link etc.

    #838304
    Ronja

    this one works:
    figure.wp-block-image {
    position: relative;
    }

    figure.wp-block-image figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -100%, 0);
    font-size: 2em;
    font-weight: 700;
    color: #fff;
    font-family: ‘Roboto Slab’;
    }

    but then its in my blog images as well. if I add caption-overlay, nothing happens

    #838306
    Ronja

    Ah now I got it. Forgot the additional css class.
    Thank you very much! 🙂

    #838311
    David
    Staff
    Customer Support

    Glad to be of help

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