How do I add images to my MPG generated pages?

📝 Note: This feature is part of the MPG plugin, which you can get from here. If you want to learn more about it, check out our dedicated doc.

MPG allows you to add images dynamically to your generated pages using data from your source file. Images can be loaded from two different sources.

Option A: Images hosted in the WordPress Media Library (recommended)

If your images are uploaded to Media → Library, the value stored in your MPG source file must match the image filename used by WordPress, or be the full Media Library URL.

Example Media Library URL:

https://example.com/wp-content/uploads/2024/07/tokyo.jpeg

Valid source file values:

tokyo.jpeg

⚠️ Important: MPG does not upload or fetch images automatically.

The image file must already exist in your Media Library, and the filename (including the extension) must match exactly.

Option B: External image URLs

You can also use images hosted externally (for example, CDN links or placeholder services like Picsum).

Example database value:

https://picsum.photos/600/400

Note: External images must be publicly accessible and allow hotlinking.

If an external image does not load, we recommend switching to Media Library images instead.

1: Add the image file names ( or URLs ) to your source file (database).

In this doc, we will approach the case of the uploaded files.

2: Upload images to your WordPress Media Library folder.

3: Click on your image to read the full image path. Copy the URL to the clipboard to use on the template page.

4: Go to the template page where you want to display images and add an image block.

5: Click on the three dots button and the Edit as HTML.

Replace the image source URL with the file URL path and replace the filename with the MPG image shortcode from the data source file.

Example using a Media Library filename

<img src="https://example.com/wp-content/uploads/2024/07/{{mpg_city_img}}">

Example using a full image URL

<img src="{{mpg_city_img}}" alt="Dynamic image">

💡Result

📝 Note: You can add any img HTML parameters such as alt , class or utilize the Picsum random image generator if you don't have actual pictures.

Troubleshooting

If the image does not appear on generated pages, make sure that:

The image exists in Media → Library
The filename in the database matches exactly
The image URL opens directly in the browser
There are no extra spaces in the database cell
The image is publicly accessible

🎥 Video - How to add images to MPG pages?

For further help, you can watch this short tutorial video on How to Add Images to Multiple Pages in Bulk: