DrawIt (draw.io) Shortcode

Below, you’ll find a detailed guide on how to add the DrawIt (draw.io) Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the DrawIt (draw.io) Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the DrawIt (draw.io) Plugin and the shortcodes it provides:

DrawIt (draw.io)

"DrawIt (draw.io) is a feature-rich WordPress plugin that lets users create, edit and embed custom diagrams directly on their site. It's intuitive, powerful, and great for visual content."

★★★★✩ (15) Active Installs: 3000+ Tested with: 4.8.23 PHP Version: false

Included Shortcodes:

• [drawit-svg]

DrawIt (draw.io) [drawit-svg] Shortcode

The Drawit Plugin shortcode, ‘drawit-svg’, is designed to insert SVG images into your WordPress posts. It accepts attributes like ‘class’, ‘alt’, ‘title’, and ‘src’ to customize the SVG. If an image class matches ‘wp-image-‘, it fetches the image URL. If ‘use_insecure_svg’ option is set, it loads the SVG via jQuery, otherwise, it inserts an ‘img’ tag.

Shortcode: [drawit-svg]

Parameters

Here is a list of all possible drawit-svg shortcode parameters and attributes:

• class – Assigns a specific CSS class to the SVG image
• alt – Provides a text description for the SVG image
• title – Sets the title attribute for the SVG image
• src – Specifies the source URL of the SVG image

Examples and Usage

Basic example – A simple example to display an SVG image by providing the ‘src’ attribute as a parameter to the shortcode. The ‘src’ attribute is used to specify the URL of the image file.

[drawit-svg src="https://example.com/path/to/image.svg" /]

Advanced examples

Using the shortcode to display an SVG image with additional attributes such as ‘class’, ‘alt’, and ‘title’. The ‘class’ attribute allows you to add custom CSS classes to the image, the ‘alt’ attribute provides alternative text for the image, and the ‘title’ attribute provides additional information about the image.

[drawit-svg class="custom-class" alt="Alternative Text" title="Title Text" src="https://example.com/path/to/image.svg" /]

Using the shortcode to display an SVG image by referencing the image ID. The ID is used to fetch the image URL from the WordPress media library. The ‘class’, ‘alt’, and ‘title’ attributes are also used in this example.

[drawit-svg class="wp-image-123" alt="Alternative Text" title="Title Text" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [drawit-svg] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('drawit-svg', array($custom_plugin, 'drawit_svg_short'));

Shortcode PHP function:

                    function drawit_svg_short($atts, $title='') {
        $att_class = '';
        $att_alt = '';
        $att_title = '';
        $att_src = '';

        if($title != '') {
            $att_title = $title;
        }

        foreach($atts as $key => $val) {
            if(strtolower($key) == 'class') {
                $att_class = $val;
            } elseif(strtolower($key) == 'alt') {
                $att_alt = $val;
            } elseif(strtolower($key) == 'title') {
                $att_title = $val;
            } elseif(strtolower($key) == 'src') {
                $att_src = $val;
            }
        }

        if(preg_match('/wp-image-(?P<id>[0-9]+)/', $att_class, $matches)) {
            if($att_src == '') {
                $attach_id = $matches['id'];
                $file_url = wp_get_attachment_url($attach_id);
            } else {
                $file_url = $att_src;
            }

            if(strtolower($this->options['use_insecure_svg']) == 'yes') {
                $file_url = rawurlencode($file_url);
                $ret_html = '<span><span></span><script>jQuery("script").last().siblings().load(decodeURIComponent("' . $file_url . '"),function(){jQuery(this).find("svg").addClass("'.$att_class.'").attr("alt", "'.$att_alt.'").attr("title", "'.$att_title.'")});</script></span>';
            } else {
                $ret_html = '<img class="' . $att_class . '" src="' . $file_url . '" alt="' . htmlentities($att_alt) . '" title="' . htmlentities($att_title) . '">';
            }
        } else {
            $ret_html = '';
        }
        return $ret_html;
    }
                    

Code file location:

drawit/drawit/drawit.php

Conclusion

Now that you’ve learned how to embed the DrawIt (draw.io) Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.