3

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?

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. enter image description here

  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.

    enter image description here

  5. Choose a gallery layout.

    enter image description here

  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.

    enter image description here

  2. Click on Add Photonic Gallery in the block.

    enter image description here

Phototonic provide multiple external hosted gallery

Like :

  • Flickr
  • SmugMug
  • Google Photos
  • Instagram
  • Zenfolio

enter image description here

3
  • Do you use this plug-in yourself as well, and what are your experiences with it then?
    – Luuklag
    Jan 14 at 13:27
  • Yes I have used this plugin too, it is better than others, and it gives good functionality.
    – HK89
    Jan 15 at 6:05
  • I just installed this, and it works like a charm. Downside is that setting it up with Google Photo's required a lot of fidgetting around.
    – Luuklag
    Jan 15 at 14:32
4

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.

WordPress Image Block

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

WordPress Image Block 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.

Standard add images to gallery.

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

Edit Block as HTML

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

Edit the HTML of the block to change the URLs

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".

The Gutenberg visual preview.

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!

Works like a charm when you test on the front end.

7
  • Yes that works for a single image, but I want to include multiple images in a gallery block.
    – Luuklag
    Jan 9 at 7:37
  • You have to write your own block. And can build on the gallery-block
    – user9
    Jan 12 at 10:40
  • Luuklag, sorry for the delay, things have been busy at work... ...I'm updating my answer to include Galleries. Jan 12 at 16:04
  • 1
    I chose the other solution as that results in better galleries, this requires you to know exactly how you want to order images, and make an entire mock-up of the gallery, and then replace the image URL's. Otherwise the images will be cropped incorrectly. I set it up with two example images that were square, adding a landscape or portrait image into that messes things up.
    – Luuklag
    Jan 15 at 14:33
  • 1
    No worries. I tend to avoid third party plugins because I’ve just had too many sites go absolutely nuts when the devs decide something should be different. That said I do also have the luxury of building everything myself because that’s what I’m budgeted and tasked for and that isn’t always viable for a personal site. :-) Jan 15 at 14:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.