Pinegrow Theme Converter does not replace paths for html block with video file from Webflow when exporting to WP

[Catative]

Hello. I have a video block in my Webflow project. When exporting my project from Webflow as a zip-archive, this block is described in the index.html file with the following code:

<div
    data-poster-url="videos/intro-bg-video-1q-poster-00001.jpg"
    data-video-urls="videos/intro-bg-video-1q-transcode.mp4,videos/intro-bg-video-1q-transcode.webm"
    data-autoplay="true" 
    data-loop="true"
    data-wf-ignore="true"
    class="background-video-2 w-background-video w-background-video-atom">

    <video
            autoplay=""
            loop=""
            style="background-image:url(&quot;videos/intro-bg-video-1q-poster-00001.jpg&quot;)"
            muted=""
            playsinline=""
            data-wf-ignore="true"
            data-object-fit="cover">

        <source src="videos/intro-bg-video-1q-transcode.mp4" data-wf-ignore="true">
        <source src="videos/intro-bg-video-1q-transcode.webm" data-wf-ignore="true">
    </video>
</div>

After exporting the theme, PineGrow Theme Converter generates the following code for this block:

<div 
    data-poster-url="videos/intro-bg-video-1q-poster-00001.jpg" 
    data-video-urls="videos/intro-bg-video-1q-transcode.mp4,videos/intro-bg-video-1q-transcode.webm" 
    data-autoplay="true" 
    data-loop="true" 
    data-wf-ignore="true" 
    class="background-video-2 w-background-video w-background-video-atom">
    
    <video 
        autoplay="" 
        loop="" 
        style="background-image:url("<?php echo esc_url( get_template_directory_uri() ); ?>/videos/intro-bg-video-1q-poster-00001.jpg")" 
        muted="" 
        playsinline="" 
        data-wf-ignore="true" 
        data-object-fit="cover">
        
        <source src="videos/intro-bg-video-1q-transcode.mp4" data-wf-ignore="true">
        <source src="videos/intro-bg-video-1q-transcode.webm" data-wf-ignore="true">
    </video>
</div>

After exporting theme and opening index.php page in Wordpress, video doesn’t work.

[RobM]

Hi @Catative,
It is a little hard to fully trouble-shoot what is going on, but two thoughts. First, the Theme Converter isn’t properly closing the quotes for your video style - this may be causing problems and need some hand editing. Second, for some reason the source src attributes aren’t being re-written to include the template directory.
Hope this helps a little,
Bob

[Catative]

Thank you for the quick response, @RobM. Your guess turned out to be correct.

What happened:

1. For some reason Webflow adds extra quotes with &quot expression:

style="background-image:url("videos/intro-bg-video-1q-poster-00001.jpg")"

So when Pinegrow Theme Converter adds php code, these unnecessary quotes are added. This results in an error setting the background image.

2. For some reason, PineGrow ignored adding the esc_url(get_template_directory_uri()) code to the src attributes of the <source> tag.

Solution:

I added manual generation of the correct paths using the “PHP code action” of the PineGrow.

I placed all the functions that are used in the “PHP code action” in a separate file inc/custom.php and included it in functions.php.

Contents of custom.php file:

<?php

function get_video_bg_img_path() {
    return 'background-image:url(' . esc_url(get_template_directory_uri()) . '/videos/intro-bg-video-1q-poster-00001.jpg)';
}

function get_video_mp4_src_path() {
    return esc_url(get_template_directory_uri()) . '/videos/intro-bg-video-1q-transcode.mp4';
}

function get_video_webm_src_path() {
    return esc_url(get_template_directory_uri()) . '/videos/intro-bg-video-1q-transcode.webm';
}

Part of the functions.php file:

...

/* Pinegrow generated Include Resources End */
require_once "inc/custom.php";

?>

[Catative]

Also, if you make a button with a lottie animation in Webflow (block with lottie animation nested in div block), Pinegrow will not add <?php echo esc_url( get_template_directory_uri() ); ?> code to the data-src attribute, which is required by the Webflow script to correctly track and run the animation

html burger button markup that is generated by Webflow:

          <div data-w-id="9623d14c-54d0-69c0-a85f-fc5544b0d884" class="top-header-menu-btn">
            <div data-w-id="2b366835-69f5-e59b-29c8-e2d25293d467" data-animation-type="lottie" data-src="documents/burger-btn-gray.json" data-loop="0" data-direction="1" data-autoplay="0" data-is-ix2-target="1" data-renderer="svg" data-default-duration="1.3" data-duration="0" data-ix2-initial-state="0" class="top-header-menu-btn_animation"></div>
          </div>

Burger button in Webflow navigator:

Burger button on Webflow layout:

Solution: the problem is solved by analogy with my answer in the post above.

[RobM]

Hi @Catative,
Understanding what goes in ‘data’ attributes can be pretty tough to auto-correct. Glad you are finding a way to make it work.
Bob

[Catative]

ok, thanks for answer