New to the community? Start here

Multisite Content Copier. WPBakery Page Builder images issue

I use WPBakery Page Builder on my mulisite. When I try to copy content via Multisite Content Copier it does not copy images added to content as “Single Image element”.

Mon, 19 Mar 2018 4:37:10
  • Nahid
    • Ex Staff

    Hey john_kerns !

    Hope you are having a great day!

    The issue has been escalated to the Second Level Support team. They’ll be back to us with confirmations if this is a bug, clues, workarounds and fixes (if possible) for now in this ticket (or we’ll be updating the ticket as soon as we hear back from them internally). Please note that the response time of the Second Level Support team might be a bit delayed than that of the general Support staff. We really appreciate your patience and consideration regarding this.

    Kind regards,

    Nahid

  • Lindeni Mahlalela
    • Recruit

    Hello john_kerns

    I hope you are doing great today. I am sorry for the delayed response on this thread and thank you for your patience while we were looking into this issue.

    I have tried to replicate this and trace the issue on my test website, I was able to identify why it does not copy the images inserted by Visual Composer over to the cloned page on the destination site.

    The issue is that Visual Composer adds the shortcode in the content area and it uses its internal short code rendering to get the image from its ID and then construct the image element dynamically at run time. The image shortcode is like this:

    [vc_single_image image="ID" img_size="large" add_caption="yes"]

    This shortcode will be processed and rendered when the page is loaded on the front end, and Visual Composer has its own built in functions to load the image into the editor when editing the page using the builder, unfortunately once you copy the content over from one site to another then the image with that ID does not exist on the destination site and Multisite Content Copier will not copy the actual image over because it does not recognise the the ID as an image.

    The “Copy Images” feature in Multisite Content Copier is designed to recognise images added as attachments to a page/post. If you were to make Multisite Content Copier compatible with Visual Composer you will have to write custom code that will identify the image shortcode in the content to grab the image ID then get the image by its id and manually copy it over to the new page. Unfortunately, this is custom development work which is not in the scope of this support forum.

    However, I tried to find a way to get a starter plugin from which you can build to make it compatible with the Single Image feature of Visual Composer. Please note that even though this may work, it is still far from being a perfect solution to be used in production.

    The simplest most “dirty” method will be to parse the shortcode into HTML then replace the shortcode with its HTML equivalent in the newly copied post. This will be the simplest solution, the downside of this is that the image source will be referencing the site from which the content was copied. Here is how to achieve this, copy the following code into a new file and upload it to wp-content/mu-plugins/mcc-vc-render-copy-shortcode.php like so:

    if ( ! defined( 'ABSPATH' ) ) {
    
exit;
    
}
    
if ( ! class_exists( 'MCC_VC_Shortcode_Render' ) ) {
    

    
class MCC_VC_Shortcode_Render {
    
private static $_instance = null;
    
public static function get_instance() {
    
if( is_null( self::$_instance ) ){
    
self::$_instance = new MCC_VC_Shortcode_Render();
    
}
    
return self::$_instance;
    
}
    
private function __construct() {
    
add_action( 'mcc_copy_posts', array( $this, 'mcc_vc_shortcode_render' ), 10, 3 );
    
}
    

    
public function mcc_vc_shortcode_render( $copied_posts, $source_blog_id, $args ) {
    

    
foreach ( $copied_posts as $source_post_id => $new_post_id ) {
    

    
switch_to_blog( $source_blog_id  );
    

    
$post = get_post( $source_post_id );
    

    
if( strpos( $post->post_content, 'vc_single_image' ) ) {
    
$shortcode_attributes = $this->get_string_between( $post->post_content, '[vc_single_image', ']' );
    
$shortcode = "[vc_single_image$shortcode_attributes]";
    
$source_image_id = $this->get_string_between( $shortcode_attributes, 'image="', '"' );
    
$image_html = get_the_attachment_link( $source_image_id, 'large' );
    
}
    

    
restore_current_blog();
    

    
$new_post   = get_post( $new_post_id );
    

    
$content = str_replace(
    
$shortcode,
    
$image_html,
    
$new_post->post_content
    
);
    

    
wp_update_post(
    
array(
    
'ID'=> $new_post_id,
    
'post_content' => $content
    
)
    
);
    
}
    
}
    

    
public function get_string_between($string, $start, $end){
    
$string = ' ' . $string;
    
$ini = strpos($string, $start);
    
if ($ini == 0) return '';
    
$ini += strlen($start);
    
$len = strpos($string, $end, $ini) - $ini;
    
return substr($string, $ini, $len);
    
}
    
}
    
add_action( 'plugins_loaded', 'mcc_vc_shortcode_render_load');
    
function mcc_vc_shortcode_render_load(){
    
$GLOBALS['MCC_VC_Shortcode_Render'] = MCC_VC_Shortcode_Render::get_instance();
    
}
    
}

    Alternatively, you can download the attached ‘mcc-vc-render-shortcode.zip’ file then install and activate it as a regular plugin in WP admin instead. This worked for me but as I said it renders the image with a URL pointing to the source blog instead of the image new blog, and the image will now be embedded instead of being a Visual Composer element.

    In the destination blog, this will embed the content like this:

    <a href='http://sourceblog.yourdomain.com/path/to/image.jpg' title=''>
    
<img src='http://sourceblog.yourdomain.com/path/to/image.jpg' title='' alt='' />
    
</a>

    Instead of:

    [vc_single_image image="ID" img_size="large" add_caption="yes"]

    As you can see, this means Visual Composer will not be able to recognise the embedded image as a single image element anymore, all other Visual Composer like rows and columns shortcodes will stay in place. This should be fine if you are not planning to do major edits on the pages after copying them over to the destination blog.

    If you prefer to do it the proper way. Please find and download the attached ‘mcc-copy-vc-single-image.zip’ file, it is a slight modification of the above code but it has the extra functionality of attempting to copy the actual image over to the destination blog and update the content accordingly. This may work as it is but I didn’t do any testing, this is obviously not a production ready plugin but it is a good foundation to start. Also it is only built for the single image element, you will have to expand it to support galleries and other image functionalities of Visual Composer.

    Please note this require a lot of custom development and it is beyond the scope of this support forum but you are welcome to request an official integration feature in the Features and Feedback Section or hire an independent developer to help build this for you, you can get professional independent developers in our Jobs Board.

    I hope this helps, please let us know if you have any further issues, feedback or questions and we will be happy to assist in any way possible.

    Have a nice day.

    Lindeni