Home>Support>SIte Builder removes image attributes and classes on custom widgets

SIte Builder removes image attributes and classes on custom widgets

I’m using Page Builder to create page layout and use some custom widgets (our own widgets, not SiteOrigin ones) as a page content.
Widgets create some HTML code with images like:

<img class="myclass" height="150" width="300" src="/path/to/img.png" />

So when I insert my widgets to the Page Builder, save it, and go back to my page to see how tha page looks – I dont see image attributes and classes. I see only iamge with ‘src’ attribute:

<img src="/path/to/img.png" />

But when I click the button “Revert to editor” at page Builder (I see a sortcode for my widget ), save it, go back to the page – and now I see the exactly content that is generated by widget with all classes and attributes.

In case when I use WP functionality to insert a Widget to the page like

the_widget( 'My_Custom_Widget_Name' );

then everything is OK with images.

So I’ve found the problem with img tags only, looks like Page Builder strips out all attributes and classes for images.
Can you please advice something to resolve this problem? Or it’s a bug?

I’m using:
SiteOrigin Widgets Bundle 1.15.6
Page Builder 2.10.5

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 4 years, 2 months ago Alex S
    Hi, I Work Here

    Hi Brus,

    I ran some tests using the provided HTML and I’m unable to replicate this issue in either the Custom HTML widget, or the SiteOrgin Editor widget. Do those two widgets work for you? If they do, can you please provide me with a copy of your widgets code so I can run some tests using those widgets?

    Kind regards,
    Alex

  2. 4 years, 2 months ago brus

    Hi Alex.

    Yes, I have the same problem with both Custom HTML Widget and SiteOrgin Editor widgets. See my screenshot.
    https://pasteboard.co/JeL8DcO.png

    Providing the whole code of my widget has no sense, because it contains some internal logic based on our blog posts. But I can share a “template” widget that has same problems.

    in my functions.php

    function custom_search_load_widget() {
        include_once(__DIR__.'/includes/ResourcesFeed_Widget.class.php');
        register_widget('ResourcesFeed_Widget');
    }
    add_action('widgets_init', 'custom_search_load_widget');

    The Widget itself

    // Creating the widget
    class ResourcesFeed_Widget extends WP_Widget {
        function __construct() {
            parent::__construct(
                // Base ID of your widget
                'resources_feed',
                // Widget name will appear in UI
                __('Resources Feed Widget', 'resources_feed_domain'),
                // Widget description
                array('description' => __('Resources Feed Widget'),)
            );
        }
        public $args = array(
            'before_title'  => '<h2 class="widget-title123">',
            'after_title'   => '</h2>'
        );
        // Creating widget front-end
        public function widget($args, $instance) {
            echo '<img loading="lazy" class="test-class" src="https://autotis.ru/wp-content/uploads/2019/01/wp_1.png" />';
            echo '<img class="myclass" height="150" width="300" src="https://wp-cli.org/assets/img/wp-cli-logo-inverted.png" />';
        }
        // Widget Backend
        public function form($instance) {
        }
        // Updating widget replacing old instances with new
        public function update($new_instance, $old_instance) {
            $instance = array();
            return $instance;
        }
    }

    As you see widget outputs 2 images with additional attributes and classes. And they are missed on a page when I use this widget inside Page Builder.

  3. 4 years, 2 months ago brus

    Hi Alex.

    Looks like I found the root of the evil.
    During debugging your plugin I’ve noticed that images has proper attributes and classes. After this I started to search who else can modify the output, and I found that our theme modifies ‘img’ tags to contain only ‘src’ attribute.

    Anyway, thanks for your help.

  4. 4 years, 2 months ago Alex S
    Hi, I Work Here

    Hi Brus,

    Great to hear you managed to resolve this issue! :)
    Please open up another thread if anything else comes up.

    Kind regards,
    Alex

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More