[Resolved] Create imagebox

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ronja]

Okay great, what css must I add?

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Ronja]

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

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts