Hi everyone,
I’m trying to display a dynamic image gallery in a Bricks Builder carousel using a custom field gallery_images that stores image IDs separated by commas. However, the carousel only shows the first image repeatedly instead of displaying each ID as individual slides.
The website: Quarto MC – Sala 106 ®
My goal is for Bricks to use the gallery_images field to show each image as a separate slide without needing ACF or shortcodes. Does anyone know how to set up Bricks Builder to accomplish this? Any tips would be appreciated!
Here the code that I’m using:
function add_custom_metabox() {
add_meta_box(
'custom_metabox',
'Image Gallery',
'custom_metabox_callback',
'post',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'add_custom_metabox');
function custom_metabox_callback($post) {
wp_nonce_field(basename(__FILE__), 'custom_metabox_nonce');
$stored_meta = get_post_meta($post->ID);
?>
<div>
<input type="hidden" id="gallery_image" name="gallery_images" value="<?php echo esc_attr(get_post_meta($post->ID, 'gallery_images', true)); ?>" />
<button type="button" id="upload_gallery_button" class="button"><span class="dashicons dashicons-format-gallery" style="font: normal 18px / 1 dashicons; line-height: 28px;"></span> Add Imagens</button>
<div id="gallery_images_container" class="sortable">
<?php
$image_ids = get_post_meta($post->ID, 'gallery_images', true);
if (!empty($image_ids)) {
$image_ids = explode(',', $image_ids);
foreach ($image_ids as $image_id) {
$image_url = wp_get_attachment_image_src($image_id, 'thumbnail');
echo '<div class="gallery-image" data-image-id="' . esc_attr($image_id) . '"><img src="' . esc_url($image_url[0]) . '" /><a href="#" class="remove-image">Remove</a></div>';
}
}
?>
</div>
</div>
<script>
jQuery(document).ready(function($) {
var frame;
$('#upload_gallery_button').on('click', function(e) {
e.preventDefault();
if (frame) {
frame.open();
return;
}
frame = wp.media({
title: 'Selecione ou envie suas imagens',
button: { text: 'Usar estas imagens' },
multiple: true
});
frame.on('select', function() {
var attachments = frame.state().get('selection').toJSON();
var image_ids = [];
attachments.forEach(function(attachment) {
image_ids.push(attachment.id);
$('#gallery_images_container').append('<div class="gallery-image" data-image-id="' + attachment.id + '"><img src="' + attachment.sizes.thumbnail.url + '" /><a href="#" class="remove-image">Remove</a></div>');
});
$('#gallery_images').val(image_ids.join(','));
});
frame.open();
});
$('#gallery_images_container').sortable({
update: function(event, ui) {
var image_ids = [];
$(this).children('.gallery-image').each(function() {
image_ids.push($(this).data('image-id'));
});
$('#gallery_images').val(image_ids.join(','));
}
});
$(document).on('click', '.remove-image', function(e) {
e.preventDefault();
$(this).parent().remove();
var image_ids = [];
$('#gallery_images_container').children('.gallery-image').each(function() {
image_ids.push($(this).data('image-id'));
});
$('#gallery_images').val(image_ids.join(','));
});
});
</script>
<style>
#poststuff .inside {
margin: 10px 0 0;
}
.gallery-image {
display: inline-block;
margin-right: 10px;
cursor: move;
}
.gallery-image img {
display: block;
margin-top: 10px;
max-width: 100px;
height: auto;
}
.gallery-image a {
display: block;
text-align: center;
margin-top: 5px;
color: #b32d2e;
}
</style>
<?php
}
function save_custom_metabox($post_id) {
if (!isset($_POST['custom_metabox_nonce']) || !wp_verify_nonce($_POST['custom_metabox_nonce'], basename(__FILE__))) {
return $post_id;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return $post_id;
}
if (!current_user_can('edit_post', $post_id)) {
return $post_id;
}
if (isset($_POST['gallery_images'])) {
update_post_meta($post_id, 'gallery_images', sanitize_text_field($_POST['gallery_images']));
} else {
delete_post_meta($post_id, 'gallery_images');
}
}
add_action('save_post', 'save_custom_metabox');
