Troubleshooting Image and Embed Issues in Page Builder by SiteOrigin

Many users of the Page Builder by SiteOrigin plugin encounter issues when trying to add images or embed external content. These problems can range from images not uploading correctly to embedded videos or code snippets not displaying as expected. This guide will walk you through the most common causes and their solutions.

Common Image-Related Issues

1. Text Over an Image (Hover Overlay)

The Problem: The default SiteOrigin Widgets Bundle does not include a widget that can natively place text over an image on hover.

The Solution: You will need to use a third-party widget or addon that provides this functionality. The SiteOrigin team offers a separate Premium addon called 'Image Overlay' designed for this purpose. Alternatively, you can search the WordPress plugin repository for a compatible third-party widget.

2. Media Uploader Not Working or Showing Only Gallery

The Problem: When trying to add an image from a widget, the 'Upload Files' tab is missing, the upload progress bar freezes, or you can only see the media library.

Potential Solutions:

• Browser Cache: Clear your browser's cache and cookies.
• Plugin Conflict: Deactivate all other plugins temporarily to see if one is causing a conflict with the media uploader. If the problem resolves, reactivate them one by one to find the culprit.
• Browser Console: Check your browser's JavaScript console (F12) for any errors that occur during upload, which can point to a specific script conflict.

3. Image Links Not Working

The Problem: You add a link to an image in the Image Widget or the media library, but the link does not appear in the frontend source code.

Potential Solutions:

• Widget Settings: Ensure the link is entered correctly in the 'Link' field of the Image Widget itself. The link from the media library is not always used by the widget.
• Cache: Clear any caching plugins or server-level cache you may be using.
• Theme/Plugin Conflict: Follow standard conflict testing procedures by switching to a default WordPress theme (like Twenty Twenty-One) and deactivating other plugins to identify the source of the conflict.

Common Embedding Issues

1. External Code/Embed Not Working

The Problem: Third-party embed codes (e.g., for rating widgets, Google Drive videos, etc.) do not render when placed in a text widget.

The Solution: The most reliable method is to use a dedicated 'HTML' or 'Custom Code' widget. The SiteOrigin Widgets Bundle includes a 'SiteOrigin Editor' widget which has a 'Text' tab for pasting raw HTML code. Paste your embed code directly into this tab. If you are using the classic 'Text' widget, ensure you are pasting the code in the correct HTML field and not the visual editor.

2. Specific Services Not Embedding (Google Drive, etc.)

The Problem: Some services, like Google Drive videos, are not supported by the dedicated SiteOrigin Video Widget, which is designed for platforms like YouTube and Vimeo.

The Solution: Do not use the specialized video widget for unsupported services. Instead, obtain the direct embed code from the service (e.g., Google Drive's 'Share' > 'Embed' option) and paste it into an HTML widget, as described above.

3. YouTube Thumbnail Not Updating

The Problem: If you embed a YouTube video that is still processing, the placeholder image might not automatically update once processing is complete.

The Solution: This is a known behavior of how YouTube provides data to embeds. The most straightforward fix is to edit the post/page and re-save it. This often triggers WordPress to fetch the updated thumbnail from YouTube. If that fails, removing the embed and adding it again will force a refresh.

General Troubleshooting Steps

If you encounter any persistent issue, always try these steps first:

1. Conflict Test: Temporarily switch to a default WordPress theme (e.g., Twenty Twenty-Four) and disable all plugins except Page Builder by SiteOrigin. If the problem goes away, reactivate your theme and plugins one by one to find the conflict.
2. Clear Caches: Clear your browser cache, any WordPress caching plugins, and your server's cache (if applicable).
3. Check for Errors: Use your browser's developer console (F12) to look for JavaScript errors that could be breaking functionality.

By following this guide, you should be able to resolve the majority of image and embedding issues encountered within the Page Builder by SiteOrigin plugin.