WordPress Integration

☑️

Notice

By using this library, you agree to Truepic's terms and conditions.

WordPress automatically modifies uploaded images by generating multiple versions at different sizes. These alternate-sized versions will not be C2PA-compatible because they are not signed. Because of that, only the original sized image can be used. This guide walks you through how to integrate the Display library in a theme or the editor, and use only the original image.

If you're interested in signing the different sized versions too, contact us to learn more about our enterprise solutions.

Enqueue the Script

To add the Truepic JavaScript library to your WordPress theme, you need to enqueue it. This ensures the script is properly loaded in the head or body of your WordPress site. Add the following code to your functions.php file:

function enqueue_custom_js() {  
    // Enqueue the Truepic JavaScript library with type="module"
    wp_enqueue_script('truepic-display', 'https://display.truepic.com/truepic_display.es.js', array(), null, true);  
    // Add type="module" to the script tag
    add_filter('script_loader_tag', function($tag, $handle, $src) {
        if ($handle === 'truepic-display') {
            $tag = '<script type="module" src="' . esc_url($src) . '"></script>';
        }
        return $tag;
    }, 10, 3);
}  
add_action('wp_enqueue_scripts', 'enqueue_custom_js');

Add the Wrapper

To wrap images with <truepic-display>, you can modify theme files such as single.php, page.php, or any template part where your C2PA-signed images are output.

If you need to wrap all images within the post content, you can use the the_content filter to modify the content before it’s displayed. This filter will automatically wrap all <img> tags within post content with the <truepic-display> element.

function wrap_images_in_truepic_display($content) {  
    return preg_replace('/<img(.*?)\/>/', '<truepic-display><img$1/></truepic-display>', $content);  
}  
add_filter('the_content', 'wrap_images_in_truepic_display');

After making these changes, be sure to test your site to ensure that images are properly wrapped and that your JavaScript library is functioning as expected.

Selecting Images

For page or post editors, ensure you select the original image when adding media.

Upload the Image
Upload your image as usual through the Media Library or directly within the post/page editor.

Selecting the Image in the Editor
When you go to insert an image into a post or page, you’ll use the Media Library. After selecting an image from the Media Library, you’ll be presented with several options, including the ability to choose the size of the image.

1. When you click on an image, you’ll see an "Attachment Details" pane on the right.
2. Under Attachment Display Settings, you’ll see a dropdown menu labeled Size. This dropdown will include options such as Thumbnail, Medium, Large, and Full Size.
3. Select "Full Size".
4. Click the Insert into post button. This action will insert the original, unaltered image into your post or page.

To be absolutely sure you're embedding the original, verify the file name in the Media Library before inserting it. The original image will not have -scaled in its name.