Theme Integrations

​

Avada

​

Features

• Lazy Load Detection: Automatically detects when Avada’s native lazy loading is enabled
• Smart Fallback: Disables Visual Portfolio’s lazy loading when Avada’s is active to prevent conflicts
• Zero Configuration: Works automatically when both are active

​

How It Works

$avada_options = get_option( 'fusion_options' );

if ( 'Avada' === get_template() && 
     isset( $avada_options['lazy_load'] ) && 
     'avada' === $avada_options['lazy_load'] ) {
    
    // Disable Visual Portfolio lazyload
    add_filter( 'vpf_images_lazyload', '__return_false' );
    add_filter( 'vpf_enqueue_plugin_lazysizes', '__return_false' );
}

​

Setup

1. Avada theme is active
2. Avada’s lazy loading is enabled in theme options
3. Visual Portfolio is installed

​

Lazy Loading Priority

• Avada’s lazy load enabled: Uses Avada’s system
• Avada’s lazy load disabled: Uses Visual Portfolio’s system
• Both disabled: No lazy loading applied

​

Enfold

​

Features

• Lightbox Conflict Prevention: Disables Enfold’s lightbox for portfolio galleries
• Lazy Load Compatibility: Detects and respects Enfold’s lazy loading settings
• Automatic Integration: Works without configuration

​

Lightbox Integration

public function disable_lightbox_class( $class_name ) {
    $class_name .= ' noLightbox';
    return $class_name;
}

​

Lazy Loading Detection

if ( function_exists( 'avia_get_option' ) ) {
    $enfold_option = avia_get_option( 'lazy_loading', '' );
}

if ( '' === $enfold_option ) {
    return false; // Disable VPF lazy load
}

​

Configuration

1. Detects Enfold theme activation
2. Checks Enfold’s lazy loading settings
3. Disables conflicting features
4. Applies the noLightbox class to all portfolios

​

Performance Optimization

public $lazy_loading_option_cache = null;

​

Blocksy

​

Features

• Customizer Support: Enables Blocksy customizer options for portfolio post type
• Meta Box Integration: Adds Blocksy’s page options panel to portfolio posts
• Archive Customization: Supports Blocksy’s archive page settings
• REST API Support: Full compatibility with block editor

​

Customizer Integration

public function add_portfolio_to_supported_list( $post_types ) {
    if ( ! in_array( 'portfolio', $post_types, true ) ) {
        $post_types[] = 'portfolio';
    }
    return $post_types;
}

• Single portfolio post customization
• Archive page layout options
• Header/footer settings
• Sidebar configuration
• Color schemes

​

Block Editor Meta Box

public function add_portfolio_to_rest_field( $post_types ) {
    if ( ! in_array( 'portfolio', $post_types, true ) ) {
        $post_types[] = 'portfolio';
    }
    return $post_types;
}

​

What You Can Customize

• Page layout (boxed, full-width, narrow)
• Header visibility and style
• Footer visibility and style
• Sidebar position
• Featured image display
• Post meta information
• Related posts section

• Archive layout
• Grid columns
• Pagination style
• Header configuration
• Breadcrumbs
• Filtering options

​

Setup

1. Install and activate Blocksy theme
2. Install Visual Portfolio
3. Navigate to Customize > Post Types > Portfolio
4. Configure your portfolio settings
5. Save and publish

​

Standalone Usage

// Can be used as a standalone Code Snippet or placed in the theme's functions.php.

​

Thrive Architect

​

Features

• Dynamic Style Handling: Special rendering for inline styles
• Content Override Support: Works with Thrive’s page output system
• Shortcode Compatibility: Full support for Visual Portfolio shortcodes

​

Implementation

if ( function_exists( 'tcb_custom_editable_content' ) ) {
    add_filter( 'vpf_enqueue_dynamic_styles_inline_style', '__return_false' );
}

​

Why This Is Needed

​

Usage

1. Edit a page with Thrive Architect
2. Add a Custom HTML or Shortcode element
3. Insert your portfolio: [visual_portfolio id="123"]
4. Save and preview

​

General Theme Compatibility

​

Automatic Detection

1. The theme is active (checked via get_template())
2. Visual Portfolio detects theme-specific functions or options
3. No manual configuration is required

​

Lazy Loading Priority

1. Theme’s native lazy loading (Avada, Enfold)
2. Visual Portfolio’s lazy loading
3. WordPress core lazy loading

​

Lightbox Handling

​

CSS Conflicts

1. Check your theme’s CSS specificity
2. Use browser inspector to identify conflicts
3. Add custom CSS in Visual Portfolio > Settings > Custom CSS
4. Consider using !important for critical overrides

​

Hook References

// Disable lazy loading
add_filter( 'vpf_images_lazyload', '__return_false' );

// Disable lazysizes plugin
add_filter( 'vpf_enqueue_plugin_lazysizes', '__return_false' );

// Add custom classes to portfolio wrapper
add_filter( 'vpf_extend_portfolio_class', function( $class ) {
    return $class . ' my-custom-class';
});

// Modify dynamic styles enqueue method
add_filter( 'vpf_enqueue_dynamic_styles_inline_style', '__return_false' );

​

Custom Theme Integration

​

1. Create Integration Class

class My_Theme_Visual_Portfolio_Integration {
    public function __construct() {
        // Only load for your theme
        if ( 'my-theme' !== get_template() ) {
            return;
        }
        
        $this->init_hooks();
    }
    
    public function init_hooks() {
        // Add your hooks here
        add_filter( 'vpf_images_lazyload', array( $this, 'handle_lazy_load' ) );
    }
    
    public function handle_lazy_load( $enabled ) {
        // Your logic here
        return $enabled;
    }
}

new My_Theme_Visual_Portfolio_Integration();

​

2. Place in functions.php

// Visual Portfolio Integration
require_once get_stylesheet_directory() . '/inc/visual-portfolio-integration.php';

​

3. Reference Existing Integrations

• Avada: classes/3rd/themes/class-avada.php
• Enfold: classes/3rd/themes/class-enfold.php
• Blocksy: classes/3rd/themes/class-blocksy.php

​

Troubleshooting

​

Portfolio Not Displaying

1. Check theme compatibility
2. Disable theme lazy loading temporarily
3. Clear all caches (theme, plugin, server)
4. Check for JavaScript console errors

​

Styling Issues

1. Inspect element to find conflicting CSS
2. Check theme’s CSS specificity
3. Add custom CSS in Visual Portfolio settings
4. Consider adding !important declarations

​

Lightbox Conflicts

1. Disable theme lightbox for portfolio galleries
2. Check for multiple lightbox scripts loading
3. Use browser console to identify conflicts
4. Contact theme support if persistent

​

Lazy Loading Problems

1. Check which lazy loading system is active
2. Disable one system if both are active
3. Test with Visual Portfolio lazy loading disabled
4. Verify images have correct attributes

​

Need Help?

1. Check if it uses a page builder (see Page Builders integration)
2. Test with a default WordPress theme to isolate the issue
3. Contact Visual Portfolio support with theme details
4. Consider creating a custom integration using the examples above