How to include externally hosted images into a gallery block

admin管理员组

文章数量:1308215

WordPress has a really great native gallery function. The only downside I find is that it requires you to have the images on your domain.

We have a blog for fun, and a very cheap hosting plan. Which is limited in storage, now when we want to increase the storage it comes at a hefty price.

Google photo's will host our images for free, so I was planning on embedding the images directly from there. However the native Gallery offers no option to include images from an external source, as far as I can tell. I can include them using a single image block, or with tweaking the HTML ofcourse.

Is there a way to include externally hosted images in a gallery block, or an easy way to edit the HTML for such a gallery to work with external images?

WordPress has a really great native gallery function. The only downside I find is that it requires you to have the images on your domain.

We have a blog for fun, and a very cheap hosting plan. Which is limited in storage, now when we want to increase the storage it comes at a hefty price.

Google photo's will host our images for free, so I was planning on embedding the images directly from there. However the native Gallery offers no option to include images from an external source, as far as I can tell. I can include them using a single image block, or with tweaking the HTML ofcourse.

Is there a way to include externally hosted images in a gallery block, or an easy way to edit the HTML for such a gallery to work with external images?

• images
• block-editor
• gallery
• hosting

Share Improve this question edited Jan 12, 2021 at 10:30 Luuklag asked Jan 8, 2021 at 21:52 LuuklagLuuklag 8711 silver badge1010 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1 +50

You can used this plugin Photonic for your requirement

Photonic doesn’t just cover Google Photos – it allows you to add images from a range of services.

Like the previous plugin, you’ll need to create API keys and authenticate with your Gooogle account in order to use it.

Once you do, you are ready to add a gallery.

As with the previous plugin, the photos are not added to your Media Library.

If you are not using the Block Editor

1. Click the Add/Edit Photonic Gallery button above the post editor.

2. Select Google Photos as the source.

3. Select Multiple Photos, Photos from an Album or Multiple Albums.

4. Filter the content if you want.

5. Choose a gallery layout.

6. Edit your gallery. For example, you may want to limit the size of the photos displayed in the lightbox.

7. Use the Insert Gallery button to insert your gallery.

8. Save the post and view it to see the gallery.

If you are using the Block Editor

1. Add the Photonic Gallery block from the Widgets section.

2. Click on Add Photonic Gallery in the block.

Phototonic provide multiple external hosted gallery

Like :

• Flickr
• SmugMug
• Google Photos
• Instagram
• Zenfolio

What you want to do is already baked into WordPress but just not frequently used.

In either the classic or the block editor, click to add an image.

Once you have the block upon, instead of uploading or pulling from existing images in your Media Library, click on Insert from URL.

Now just paste the URL from wherever the image is being served. Just double check and make sure that you can hotlink images from Google.

UPDATED WITH GALLERY METHOD:

Adding externally hosted images to the gallery requires a bit of a workaround though... ...you'll want to have a few 'placeholder images' in your media library. Start by adding those placeholders into a gallery, then you'll edit the block in HTML and replace the URLs for your placeholders with the URLs of the externally hosted images.

So I used the standard WP method to add images to the gallery.

Next I click on the three vertical dots to "Show More" Block settings and choose Edit as HTML.

Once I see the HTML I do a few things, I clear out all of the extra stuff, like the class that specifies my placeholders attachment ID and anything else I feel I won't need. But really the most important thing here is that I changed the src attribute for the image by pasting the URL of the externally hosted image. I did this for both images.

Then I switch back to Visual Editing using the "Show More Settings".

In the Visual editor you can see that both images are now visible. I then update/publish/save as draft and when I view the front end of the site... ...voila!

本文标签： How to include externally hosted images into a gallery block