-
Hi there,
I noticed that Guternberg now has the option to open images and gallery images in a lightbox. However, to get it to open in Lightbox by default, I need to create a theme.json file with the following code:
"core/image": { "lightbox": { "enabled": true } },However, once I upload this json file to my theme directory, the formatting in my editor seems to be messed up slightly, as instead of the content blocks being center-aligned, they now become left-aligned.
I understand that GP does not normally support theme.json. Is there any other way to support the lightbox feature in GeneratePress?
-
Hi there,
You can try this snippet:
add_filter('wp_theme_json_data_default', function ($theme_json_data) { $new_data = [ 'version' => 2, 'settings' => [ 'blocks' => [ 'core/image' => [ 'lightbox' => [ 'enabled' => true ] ] ] ] ]; return $theme_json_data->update_with($new_data); });Adding PHP: https://docs.generatepress.com/article/adding-php/
This works in my testing, let me know if it works on your end.
-
Hi Alvind
Is it possible to add a section to this code so that the lightbox looks like a slide gallery?
Thaks
-
Not sure about that, though. I didn’t see any reference on how to add that in the WordPress documentation.
-
Hello,
I’m trying to add this code snippet in fuction.php so that the lightbox works as a slide, but it doesn’t seem to work.
I need to know if the theme has jquery atico and if it works with Featherlight.Thanks
`php
add_filter(‘wp_theme_json_data_default’, function ($theme_json_data) {
$new_data = [
‘version’ => 2,
‘settings’ => [
‘blocks’ => [
‘core/image’ => [
‘lightbox’ => [
‘enabled’ => true
]
]
]
]
];
return $theme_json_data->update_with($new_data);
});function enqueue_lightbox_gallery_scripts() {
// Enfileirar Featherlight CSS e JS
wp_enqueue_style(‘featherlight-css’, ‘https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.14/featherlight.min.css’, array(), ‘1.7.14’);
wp_enqueue_style(‘featherlight-gallery-css’, ‘https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.14/featherlight.gallery.min.css’, array(), ‘1.7.14’);
wp_enqueue_script(‘featherlight-js’, ‘https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.14/featherlight.min.js’, array(‘jquery’), ‘1.7.14’, true);
wp_enqueue_script(‘featherlight-gallery-js’, ‘https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.14/featherlight.gallery.min.js’, array(‘jquery’, ‘featherlight-js’), ‘1.7.14’, true);// Adicionar script para inicializar a galeria com suporte a slider
wp_add_inline_script(‘featherlight-gallery-js’, ‘
jQuery(document).ready(function($) {
$(“.wp-block-gallery, .gallery”).each(function() {
$(this).find(“a”).attr(“data-featherlight”, “image”);
}).featherlightGallery({
previousIcon: “◀”, // Código do ícone para voltar
nextIcon: “▶” // Código do ícone para avançar
});
});
‘);
}
add_action(‘wp_enqueue_scripts’, ‘enqueue_lightbox_gallery_scripts’);
` -
Hi there,
WP loads jQuery by default.
- You must be logged in to reply to this topic.