Created
September 11, 2024 19:56
-
-
Save boutzamat/f9287ef5fc7fdeb2eb3c6b152b9d2957 to your computer and use it in GitHub Desktop.
Add featured image to Bricks Builder page settings
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /******************************************************** | |
| * Custom implementation of Featured Image in the builder | |
| ********************************************************/ | |
| // Add the featured image selector to the page settings | |
| add_filter('builder/settings/page/controls_data', function ($data) { | |
| $data['controlGroups']['featured-image-options'] = array( | |
| 'title' => 'Featured image', | |
| ); | |
| $data['controls']['featured_image'] = [ | |
| 'group' => 'featured-image-options', | |
| 'type' => 'image', | |
| 'label' => esc_html__('Featured Image', 'bricks'), | |
| 'description' => esc_html__('Upload a featured image for this page.', 'bricks'), | |
| 'hasDynamicData' => false, | |
| ]; | |
| return $data; | |
| }); | |
| /** | |
| * Check if current request is from Gutenberg | |
| * @return bool | |
| */ | |
| function __is_gutenberg_save() | |
| { | |
| return defined('REST_REQUEST') && REST_REQUEST; | |
| } | |
| /** | |
| * Get Post Types using Bricks | |
| * @return array | |
| */ | |
| function __bricks_post_types() | |
| { | |
| // Get Bricks settings | |
| $settings = get_option('bricks_global_settings'); | |
| return isset($settings['postTypes']) ? $settings['postTypes'] : []; | |
| } | |
| /** | |
| * Synchronize featured image from Bricks to (Gutenberg and Classic) | |
| * @return void | |
| */ | |
| function __sync_featured_image_bricks_to_post() | |
| { | |
| $post = get_post($_POST['postId']); | |
| if (!$post || !isset($_POST['pageSettings'])) | |
| return; | |
| $meta = json_decode(stripslashes($_POST['pageSettings']), true); | |
| if (!isset($meta['featured_image'])) { | |
| delete_post_thumbnail($post); | |
| } else { | |
| set_post_thumbnail($post, $meta['featured_image']['id']); | |
| } | |
| } | |
| /** | |
| * Synchronize featured image from post (Gutenberg and Classic) to Bricks | |
| * @param mixed $post | |
| * @return void | |
| */ | |
| function __sync_featured_image_post_to_bricks($post) | |
| { | |
| // The post ID | |
| $post_id = $post->ID; | |
| // Exit if current post isn't using Bricks | |
| if (get_post_meta($post_id, '_bricks_editor_mode', true) != 'bricks') | |
| return; | |
| // The thumbnail ID | |
| $thumbnail_id = get_post_meta($post_id, '_thumbnail_id', true); | |
| // The post meta | |
| $meta = get_post_meta($post_id, '_bricks_page_settings', true) ? get_post_meta($post_id, '_bricks_page_settings', true) : []; | |
| if ($thumbnail_id) { | |
| $thumbnail_url = wp_get_attachment_url($thumbnail_id); | |
| $meta['featured_image'] = [ | |
| 'id' => $thumbnail_id, | |
| 'filename' => basename($thumbnail_url), | |
| 'size' => 'full', // You can adjust this based on the size needed | |
| 'full' => $thumbnail_url, | |
| 'url' => $thumbnail_url | |
| ]; | |
| } else { | |
| unset($meta['featured_image']); | |
| } | |
| // Save the '_bricks_page_settings' meta | |
| if (empty($meta)) { | |
| delete_post_meta($post_id, '_bricks_page_settings'); | |
| } else { | |
| update_post_meta($post_id, '_bricks_page_settings', $meta); | |
| } | |
| }; | |
| // Handle Save post (Bricks) | |
| add_action('wp_ajax_bricks_save_post', '__sync_featured_image_bricks_to_post'); | |
| // Handle Save post (Classic Editor) | |
| add_action('save_post', function ($post_id, $post) { | |
| if (!__is_gutenberg_save() && in_array($post->post_type, __bricks_post_types())) { | |
| __sync_featured_image_post_to_bricks($post); | |
| } | |
| }, 10, 2); | |
| // Handle Save post (Gutenberg) | |
| foreach (__bricks_post_types() as $post_type) { | |
| add_action('rest_after_insert_' . $post_type, '__sync_featured_image_post_to_bricks', 10, 3); | |
| } | |
| /** | |
| * Add custom CSS to hide the URL and Size fields in the page settings | |
| */ | |
| add_action('wp_head', function () { | |
| if (is_user_logged_in()) | |
| echo '<style id="bricks-editor-featured-image-css">[data-control-group="featured-image-options"] { .external-url, .image-sizes { display: none !important; } }</style>'; | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment