Add caption to block_grid images?

Support
#1

Hello.

Does anyone know how to add caption to block_grid images?

[block_grid type=“two-up”] [block_grid_item] [image src=“https://yourwebsite.com” alt=“alt text” type=“thumbnail”] [/block_grid_item] [block_grid_item] [image src=“https://yourwebsite.com” alt=“alt text” type=“thumbnail”] [/block_grid_item] [/block_grid]

How would I add a specific caption under each picture?

#2

Hi Andy,

Thanks for reaching out.

You can do that directly to that shortcode, example

[block_grid type="two-up"] [block_grid_item] [image src="https://yourwebsite.com" alt="alt text" type="thumbnail"]<p>Image 1 Caption</p>[/block_grid_item] [block_grid_item] [image src="https://yourwebsite.com" alt="alt text" type="thumbnail"]<p>Image 1 Caption</p>[/block_grid_item] [/block_grid]

But if you’re looking for Wordpress builtin image caption, then it could be like this

[block_grid type="two-up"] [block_grid_item] [caption][image src="https://yourwebsite.com" alt="alt text" type="thumbnail"]<p>Image 1 Caption</p>[/caption][/block_grid_item] [block_grid_item] [caption][image src="https://yourwebsite.com" alt="alt text" type="thumbnail"]<p>Image 1 Caption</p>[/caption][/block_grid_item] [/block_grid]

Please check this for more information https://codex.wordpress.org/Caption_Shortcode

Thanks!

#3

Hi.

Thanks for the reply.

The result of both solutions does this:

https://puu.sh/CR2yJ/ccb65243bc.png

I’m looking for the default caption like this:

https://puu.sh/CR2zZ/c12dce271d.png

Any ideas? Thanks!

#4

Hey Andy,

The only difference in those screenshots is the text in the second image is centered. You can center all text in the Block Grid by selecting Center in the Text Align option of the containing Column, Row or Section.

If I don’t understand what you mean, please give us specific details.

Thanks.

#5

@christian_y

Hello!

I’ll explain in more detail.

For the top photo, I have to use the shortcode block WordPress Gutenberg provides. It goes in like this:

https://puu.sh/CRe3G/70dd20dab9.png

For regular photos, they go in like this:

https://puu.sh/CRe5D/61150b31d4.png

The issue I’m having is I want to give photo credits for the two photos that are inline. I cannot figure out how to do with the shortcode block.

The solutions Rad gave above didn’t fix the issue. I’d like to be able to caption both images like the photo of the guy stretching (small text, right below the image).

#6

Hello Andy,

Do you want something like this with the block grid?

In that case, please make use of the shortcode in the secure note.

And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

li.x-block-grid-item {
    padding: 8px;
    line-height: 1.8;
    border: 2px solid #e5e5e5;
    background-color: #fff;
    -webkit-transition: border 0.3s ease,box-shadow 0.3s ease;
    transition: border 0.3s ease,box-shadow 0.3s ease;
}

.x-block-grid-item .x-img {
    padding: 0;
    border: none;
}

.x-block-grid-item p {
    margin-bottom: 0;
}

We would loved to know if this has work for you. Thank you.

#7

Hi!

That looks great!

Last thing I would ask is, how do I center align the text and add a link that opens up in another tab?

#8

Hello Andy,

You can center the text by updating the css into this:

.x-block-grid-item p {
    margin-bottom: 0;
    text-align: center;
}

You can also update the caption into this one to have a link that opens a new tab:

Image 1 Caption with a <a href=" http://google.com" target="_blank">link</a> to a new tab

Hope this helps.

#9

It doesn’t seem like the text is aligning in the center.

#10

Hi Andy,

Update the whole code and use this:

li.x-block-grid-item {
    padding: 8px;
    line-height: 1.8;
    border: 2px solid #e5e5e5;
    background-color: #fff;
    -webkit-transition: border 0.3s ease,box-shadow 0.3s ease;
    transition: border 0.3s ease,box-shadow 0.3s ease;

    text-align: center !important;
}

.x-block-grid-item .x-img {
    padding: 0;
    border: none;
}

.x-block-grid-item p {
    margin-bottom: 0;
}
#11

That’s awesome.

Thanks so much for the help. Can always count of you guys! :grin:

#12

You’re most welcome!
Thanks for letting us know that it has worked for you.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.