Shortcode gallery link=”lightbox” ?
-
Hi there,
In Gutenberg, it is now possible to add link to “lightbox” to display an image viewer/zoom in gallery. Can this feature also be added to the [gallery] shortcode? Like [gallery link="lightbox"]
https://codex.ww.wp.xz.cn/Gallery_Shortcode
Thanks
-
This topic was modified 4 months ago by
helenestartup.
-
This topic was modified 4 months ago by
-
Short answer: no , not by default. The
link="lightbox"option is a Gutenberg (block editor) feature and is not
implemented in the legacy[gallery]shortcode.The
[gallery]shortcode still only supports:- link=”file”
- link=”attachment”
- link=”none”
and it uses the old shortcode rendering pipeline, not the block-based one. So
[gallery link="lightbox"]is not currently supported in WordPress core.If you need lightbox behavior with the shortcode, your options are:
- use a JavaScript lightbox library that targets gallery links
- filter
post_galleryand add the required data attributes manually - switch to the Gallery block in Gutenberg
- use a plugin that extends the gallery shortcode
In short: Gutenberg blocks and shortcodes are separate systems, and features
added to the Gallery block don’t automatically apply to[gallery].Hi Pouya,
Thank you very much for your quick response.
Are there any plans in the roadmap to implement this lightbox to shortcode?
Would it be possible to generate the gallery block from image IDs (in a PHP file, without going through the admin)? For example, with render_block_core_image.
Thanks
Hi Helen, Good questions.
Regarding the roadmap: as far as public WordPress core plans go, there’s currently no indication that
link="lightbox"will be added to the legacy[gallery]shortcode. The general direction of core development is clearly toward blocks, and new features like the built-in lightbox are being implemented only in the Gallery/Image blocks, not back-ported to shortcodes.About generating a gallery from PHP without using the admin:
Yes, that is possible, but only by using blocks — not the[gallery]shortcode.You can programmatically render a core/gallery block from image IDs using
render_block(). For example:"php
echo render_block( [
'blockName' => 'core/gallery',
'attrs' => [
'ids' => [ 123, 456, 789 ],
'linkTo' => 'lightbox',
'columns' => 3,
],
] );This outputs the same gallery markup generated by the block editor, including native lightbox support, and works entirely from PHP.
There isn’t an equivalent way to enable the block lightbox feature on the
[gallery]shortcode itself without custom JavaScript or a plugin, since the shortcode and block systems are separate paths in core.So in short:
• No known plans to extend lightbox support to[gallery]
• Yes, galleries can be generated from PHP using block rendering
• Using blocks programmatically is the recommended forward-compatible approachHope this helps clarify the options 🙂
Pouya,
Thank you, that’s very clear to me.
Do you have a working example of a block gallery generated in a PHP file with the lightbox?
Thank you in advance.
-
This reply was modified 4 months ago by
helenestartup.
Yes, this is possible.
You can render a core Gallery block directly in PHP and enable the native
lightbox by passing attributes to render_block().Example (simplified):
render_block( [ ‘blockName’ => ‘core/gallery’, ‘attrs’ => [ ‘ids’ => [123,456], ‘linkTo’ => ‘lightbox’ ] ] );
This works in recent WordPress versions and doesn’t require custom JS.
Hi Pouya,
Thanks for your example, but it’s impossible to generate a gallery in a PHP file without having to put the entire structure (HTML and comment block) in the innerBlocks. I would have something more dynamic, so that future updates would apply automatically (new features, for example).
Do you think that’s possible? Or does the way the block works mean that we have to do like this ?
Hav a nice day
Hi, Good question — and you’re basically right.
At the moment, if you want to render a block purely from PHP, WordPress still expects the block structure (attributes / innerBlocks) to be defined at render time. There isn’t a higher-level API yet that lets you say “render a gallery dynamically” without describing the block data itself.
So today the options are basically:
- Define the block data (attrs / innerBlocks) in PHP and pass it to
render_block(), or - Let the block exist in the editor and only customize behavior via filters / styles.
There isn’t a way yet to hook into core Gallery so that future block changes automatically apply without providing the block structure. That’s a current limitation of how blocks are rendered server-side.
Hopefully this improves as more blocks move toward richer server-side APIs, but for now this is how it works.
Have a nice day 🙂
Thanks for your reply.
render_block()doesn’t work at all for galleries and images, since rendering is completely managed on the Gutenberg JS side.I managed to generate a gallery via do_block. Here is an example in case anyone else has the same questions:
$image_ids = [27, 28]; // your IDs image list
do_gallery1($image_ids, 3);
function do_gallery1($image_ids, $nbCol)
{
$content = '<!-- wp:gallery {"columns":' . $nbCol . ',"linkTo":"lightbox"} -->';
foreach ($image_ids as $id) {
$thumb_url = wp_get_attachment_image_url($id, 'thumbnail'); // vignette
//$large_url = wp_get_attachment_image_url($id, 'large'); // utilisé par la lightbox
$alt = get_post_meta($id, '_wp_attachment_image_alt', true);
$content .= '<!-- wp:image {"lightbox":{"enabled":true},"id":' . $id . ',"sizeSlug":"thumbnail","linkDestination":"none"} -->';
$content .= '<figure class="wp-block-image size-thumbnail">';
$content .= '<img src="' . $thumb_url . '" alt="' . esc_attr($alt) . '" class="wp-image-' . $id . '"/>';
$content .= '</figure>';
$content .= '<!-- /wp:image -->';
}
$content .= '<!-- /wp:gallery -->';
echo do_blocks($content);
}However, it should be noted that in the event of a substantial update to the gallery’s functionality, it will be necessary to return and make changes to the file.
If anyone ever comes up with a better solution, I’ll take it 🙂
Thank you for your help. I am closing the ticket.
Thanks for the discussion — just to clarify and close this out.
render_block()does work for core blocks, including Gallery, but only when the full block structure (attributes + inner blocks) is provided. There isn’t currently a higher-level PHP API to dynamically generate a gallery without defining the block markup itself.What I ended up doing was generating valid block comments manually and rendering them with
do_blocks(). This allows the core Gallery (including the native lightbox) to work without custom JS.Example for anyone interested:
$image_ids = [27, 28];
do_gallery1($image_ids, 3);
function do_gallery1($image_ids, $nbCol) {
$content = '<!-- wp:gallery {"columns":' . $nbCol . ',"linkTo":"lightbox"} -->';
foreach ($image_ids as $id) {
$thumb_url = wp_get_attachment_image_url($id, 'thumbnail');
$alt = get_post_meta($id, '_wp_attachment_image_alt', true);
$content .= '<!-- wp:image {"id":' . $id . ',"sizeSlug":"thumbnail"} -->';
$content .= '<figure class="wp-block-image size-thumbnail">';
$content .= '<img src="' . esc_url($thumb_url) . '" alt="' . esc_attr($alt) . '" class="wp-image-' . $id . '" />';
$content .= '</figure>';
$content .= '<!-- /wp:image -->';
}
$content .= '<!-- /wp:gallery -->';
echo do_blocks($content);
}This works well, with the caveat that if the Gallery block changes significantly in the future, this markup may need updating — which seems to be a current limitation of server-side block rendering.
Thanks for the help — closing the ticket.
You must be logged in to reply to this topic.