Vendor images are displayed only after the update

[sanvean]

Hello HivePress Community,

I am reaching out for assistance with an issue related to the vendor gallery carousel on my website. I have implemented a feature for vendor profiles that allows them to upload and display multiple images. I followed the guidance in this forum post and implemented the necessary code.

Code Implementation:

I have added code to:

1. Add an image field to the vendor profiles.
2. Update the vendor forms to include image uploads.
3. Create a meta box for vendor images.
4. Enqueue Slick Slider scripts for the carousel functionality.
5. Develop a shortcode vendor_gallery_carousel_shortcode to display the image carousel.

This functionality works to an extent, but I am encountering a significant issue: The image carousel does not display consistently for all vendors. Interestingly, when I visit the admin panel for a vendor profile (even without making any changes or re-saving), the images then appear correctly on the frontend.

Specific Issue:

• The images are not displayed until I visit the backend admin page for each vendor. This workaround is not feasible for a live site.
• I have added extensive logging within the vendor_gallery_carousel_shortcode function to track the process. The logs indicate that image IDs are sometimes not found in the cache for certain vendor posts.

I suspect this might be a caching issue or a problem with how the image data is being handled or updated.

Could you please provide insights or guidance on how to resolve this issue? I am looking for a way to ensure that the vendor images are consistently displayed on the frontend without needing to visit the backend admin page for each vendor.

Here is the key part of the code for reference:

// Add Vendor Images Field 
add_filter( 
    'hivepress/v1/models/vendor/fields', 
    function( $fields ) {
        $fields['images'] = [
            'label'     => hivepress()->translator->get_string( 'images' ),
            'caption'   => hivepress()->translator->get_string( 'select_images' ),
            'type'      => 'attachment_upload',
            'multiple'  => true,
            'max_files' => 10,
            'formats'   => [ 'jpg', 'jpeg', 'png' ],
            '_model'    => 'attachment',
            '_relation' => 'one_to_many',
        ];
        return $fields;
    } 
);

// Add Vendor Images to Vendor Update
add_filter( 
    'hivepress/v1/forms/vendor_update', 
    function( $form ) {
        if ( isset( $form['fields'] ) ) {
            $form['fields']['images'] = [
                '_order' => 10,
            ];
        }
        return $form;
    } 
);

// Add Vendor Images Meta Box
add_filter( 
    'hivepress/v1/meta_boxes', 
    function( $meta_boxes ) {
        $meta_boxes['vendor_images'] = [
            'title'  => "Gallery Images",
            'screen' => 'vendor',
            'model'  => 'vendor',
            'fields' => [
                'images' => [
                    'caption'   => hivepress()->translator->get_string( 'select_images' ),
                    'type'      => 'attachment_upload',
                    'multiple'  => true,
                    'max_files' => 10,
                    'formats'   => [ 'jpg', 'jpeg', 'png' ],
                    '_order'    => 10,
                ],
            ],
        ];

        return $meta_boxes;
    }
);

// Add Featured Image Meta Box
add_action( 
    'do_meta_boxes', function() {
        
    }, 20
);

//sliders
function mytheme_enqueue_slick_scripts() {
    // S'assurer que jQuery est chargé, car Slick en dépend
    wp_enqueue_script('jquery');

    // Charger le CSS de Slick Slider depuis un CDN
    wp_enqueue_style('slick-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');

    // Charger le JS de Slick Slider depuis un CDN
    wp_enqueue_script('slick-js', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true);

    // Charger votre script personnalisé d'initialisation de Slick
    wp_enqueue_script('slick-init', get_stylesheet_directory_uri() . '/slick-init.js', array('slick-js'), null, true);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_slick_scripts');


function vendor_gallery_carousel_shortcode() {
    global $post;
    $vendor_id = $post->ID;

    // Log pour débuter la fonction
    error_log('vendor_gallery_carousel_shortcode called for post ID: ' . $vendor_id);

    // Récupération des IDs d'image depuis la cache
    $image_ids = hivepress()->cache->get_post_cache($vendor_id, 'image_ids', 'models/attachment');

    // Vérifier et logger si les IDs d'image sont récupérés ou non
    if (!$image_ids) {
        error_log('No image IDs found in cache for post ID: ' . $vendor_id);
        return '';
    } else {
        error_log('Found ' . count($image_ids) . ' image(s) in cache for post ID: ' . $vendor_id);
    }

    $output = '<div class="vendor-gallery-carousel slick-slider">';

    // Parcourir chaque ID d'image
    foreach ($image_ids as $image_id) {
        $image_src = wp_get_attachment_image_src($image_id, 'hp_landscape_large');

        // Vérifier et logger si l'image est récupérée
        if ($image_src) {
            $output .= '<div class="slick-slide"><img src="' . esc_url($image_src[0]) . '" alt="" loading="lazy"></div>';
            error_log('Image source found for image ID: ' . $image_id);
        } else {
            error_log('Image source not found for image ID: ' . $image_id);
        }
    }

    $output .= '</div>';

    // Logger la fin de la fonction
    error_log('vendor_gallery_carousel_shortcode finished rendering for post ID: ' . $vendor_id);

    return $output;
}
add_shortcode('vendor_gallery_carousel', 'vendor_gallery_carousel_shortcode');

I appreciate any help or suggestions you can offer. Thank you in advance for your time and assistance.

Best regards,

[andrii]

Hi,

Please note that we cannot debug custom code but only provide general recommendations. Regarding your snippets, they look good, so we recommend not using cache functions in the code, perhaps this is why this code does not work correctly.