Fusion Builder Repeater Image Upload

February 3, 2025 · AI Conversations

User

array(
'type' => 'upload', // Use 'upload' type
'param_name' => 'image_id', // Store the attachment ID
'label' => __('Image (Optional)', 'fusion-builder'),
'description' => __('Upload an image for this accordion item.', 'fusion-builder'),
'preview' => true, // Enable preview
),
above code not work in fusion bulder repeater secton

Assistant

The `upload` field type in Fusion Builder works for standalone elements but may not work correctly inside a **repeater section**. Fusion Builder's repeater fields often require special handling for media uploads.

### Solution:
Use the `media` type instead of `upload`, as it is designed to work with repeaters.

#### **Fix:**
Replace:

'type' => 'upload'

With:

'type' => 'media'

#### **Updated Code:**

array(
    'type'        => 'media', // Use 'media' type instead of 'upload'
    'param_name'  => 'image_id', // Store the attachment ID
    'label'       => __('Image (Optional)', 'fusion-builder'),
    'description' => __('Upload an image for this accordion item.', 'fusion-builder'),
    'preview'     => true, // Enable preview
),

### **Why This Works?**
– The `media` type allows users to **upload** or **select** images using the WordPress Media Library.
– It is **compatible with repeaters** in Fusion Builder.
– The selected image **stores its attachment ID**, which you can use later to retrieve the image URL.

#### **Retrieving the Image URL in Your Code:**
To display the image in your template, use:

$image_id = get_post_meta(get_the_ID(), 'image_id', true);
$image_url = wp_get_attachment_url($image_id);

This should now work correctly inside a Fusion Builder repeater section. 🚀 Let me know if you need further tweaks!

User

Assistant

Your issue is likely due to how the repeater field data is being stored and accessed in the shortcode. Let's troubleshoot and fix it step by step:

—

### **Issues in Your Code:**
1. **Incorrect Access of Image Data:**
– You are using `print_r($item['image']);`, but your parameter is `image_id`. It should be `$item['image_id']`.

2. **Base64 Decoding Issue:**
– The repeater fields in Avada store JSON-encoded data, so you should `json_decode()` directly, instead of using `base64_decode()`.

—

### **Fixed Code:**

function bubori_custom_accordian_shortcode( $atts, $content = null ) {
    // Define default attributes
    $defaults = array(
        'accordion_items' => '',
        'open_first' => 'no',
    );

    $atts = shortcode_atts( $defaults, $atts, 'custom_accordian' );

    // Decode JSON (No need for base64 decoding)
    $accordion_items = json_decode( $atts['accordion_items'], true );

    ob_start();
    ?>
    <div class="custom-accordian-container">
        <div class="custom-accordian">
            <?php if ( ! empty( $accordion_items ) ) : ?>
                <?php foreach ( $accordion_items as $item ) : ?>
                    <div class="accordion-item">
                        <div class="accordion-header">
                            <?php echo esc_html( $item['title'] ); ?> 
                            <?php echo esc_html( $item['icon_text'] ); ?>
                        </div>
                        <div class="accordion-content">
                            <?php echo wp_kses_post( $item['content'] ); ?>
                        </div>
                        <?php if ( ! empty( $item['image_id'] ) ) : ?>
                            <?php 
                                $image_url = wp_get_attachment_url( $item['image_id'] ); 
                                if ( $image_url ) :
                            ?>
                                <div class="accordion-image">
                                    <img src="<?php echo esc_url( $image_url ); ?>" alt="Accordion Image">
                                </div>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'custom_accordian', 'bubori_custom_accordian_shortcode' );

—

### **Fixes & Improvements:**
✅ **Removed `base64_decode()`**
✅ **Used `json_decode()` directly**
✅ **Fixed image retrieval using `wp_get_attachment_url()`**
✅ **Added `esc_html()` and `wp_kses_post()` for security**
✅ **Checked if `image_id` exists before processing the image**

Now, your **image should appear** correctly inside the accordion. 🚀 Let me know if you need further adjustments!

Fusion Builder Repeater Image Upload

Leave a Comment Cancel