Google Photos integration for Obsidian

[AlanG]

Google Photos for Obsidian

This plugin let’s you embed Google Photos images directly into Obsidian. When you select an image, it will save and embed a low-res thumbnail with a link back to the full-res image on Google Photos.

Since the thumbnails are small in filesize, this lets you start adding a lot more media to your notes without worrying about the size of your vault growing too much.

It’s made a huge difference for me in my daily notes. Before this plugin I hardly added any images, and now I have a rich photo journal of each day.

If your note title has a detectable date (example Daily notes or Periodic notes), you can have the plugin default to showing you only photos from that date. There is a toggle at the top to show all photos instead.

Using a mobile device

You can use Google Photos on a mobile device, but due to mobile limitations you will first need to connect to Google Photos from Obsidian using a desktop device.

Once your desktop is authenticated, you can sync the plugin settings to your mobile device and it will work without any issues. If you’re using any sort of sync of your Obsidian vault, this should happen automatically. Specifically you need to transfer the data.json file from the desktop plugin folder to your mobile device.

If you’re using Obsidian Sync, you’ll need to make sure the Installed community plugins sync option is enabled for the plugin data to be transferred from your desktop to mobile device.

How to set up

Follow the guide in the docs here: Setup guide

Advanced features

There is very basic codeblock support. You can run your own custom queries using the Photos API search format:

https://developers.google.com/photos/library/reference/rest/v1/mediaItems/search

For example, if you wanted to show photos of food taken on every April 1st, you would use:

```photos
{
  "filters": {
    "dateFilter": {
      "dates": [{
        "year": 0,
        "month": 4,
        "day": 1
      }]
    },
    "contentFilter": {
      "includedContentCategories": [
        "FOOD"
      ]
    }
  }
}
```

Suggestions for the future

Currently the plugin does everything I need it to do, so if you think of any great feature suggestions let me know!

Google’s API does not let you perform text searches or filter for specific people, so unfortunately those are features which cannot be implemented. Being able to have your people notes automatically show you all photos of that person would be incredible! Maybe they will add this at some point in the future.

Links

Get the plugin
Github page

[TheknowledgeGuy]

Hi Alan,

Thank you very much for developing this plugin. I am pretty sure it will be one of the most popular Obsidian plugins soon as it helps people manage their vault size (especially on mobile devices) easily. I was wondering if you could please update the code and allow users to use the built-in feature of Obsidian to automatically save photo thumbnails in a pre-defined subfolder. Currently, it saves all the thumbnails in the root folder and users have to manually move the images to the right folder. Do you see the possibility of updating this, please? Thank you!

Cheers!

[AlanG]

@TheknowledgeGuy

Although I can see the imported photos in the edit mode, they disappear when I switch to reading mode

What does the Markdown look like for the inserted photo link?

Regarding the folder location option - absolutely, I’ll add that in the next version

[TheknowledgeGuy]

1- Thanks! Having that feature helps to manage and organize the images for all projects/topics in Obsidian in a clean way and avoid the situation to have a ton of images all in one folder.

2- I accidentally deleted my second post here. However, the good news is I solved the issue. For some reason, I had some extra text (“|300”) after the first part (local image path and name) of the embedded image code. I think it was automatically added when I tried to zoom in on the image. After removing that, everything looks normal. However, that would be great if we could change the thumbnail size as well.

[AlanG]

@TheknowledgeGuy

that would be great if we could change the thumbnail size as well.

That’s in the settings:

[AlanG]

v1.1.6 released

Improvements

• Can choose a specific location to save the thumbnail images (thanks @TheknowledgeGuy !)
• Small bugfix with MomentJS note date parsing

[TheknowledgeGuy]

Hi Alan,

Wow! You are awesome, man! Thanks for updating the plugin so quickly!
Actually, what I was referring to for saving the images in a subfolder is another option that Obsidian offers in the Setting’s Files and Links panel. Look at the screenshot below. Using this option lets me create a subfolder (e.g. attachments) inside each of my Obsidian folders (that each represents a project, major topic, etc.)

By doing that, I can organize the images and attachments for each topic (project, topic, etc.) in its own attachments subfolder (vs. having all images added to the project folder - this makes identifying and distinguishing notes from attached files somehow difficult).

In other words, the ideal case would be if users could write a “subfolder” name in your plugin options panel (e.g. attachments) after installation. Later, when a new image is added, the plugin checks the note’s location and finds the folder the note is in. Then it checks if the assigned subfolder ("attachments) exists or not. If it’s already there, great, and it can go ahead and saves the thumbnail there. However, if the subfolder doesn’t exist, it automatically creates the subfolder (e.g. project A/attachments) and then saves the image in there (it will be very handy on mobile devices when you quickly want to start a new topic/project and make sure everything is organized).

Once again, thank you for updating the plugin and for your time

Cheers!

[AlanG]

@TheknowledgeGuy

Actually, what I was referring to for saving the images in a subfolder

Sorry, my misunderstanding. Updated v1.1.8 released with subfolder option.

[TheknowledgeGuy]

No worries at all. Thanks for being so responsive. It’s working like a charm. However, I noticed that there is a bug in the new version. When I insert a new image, it shows that image twice in the editor panel while everything looks good in the reading mode. Here is an example.

Editor mode:

Reading mode:

[AlanG]

@TheknowledgeGuy

there is a bug in the new version

Can you post an example of the Markdown which shows this behavior? I can’t replicate this on Windows, Linux, or Android.

In your earlier post you mentioned you had |300 automatically added, so do you have some other plugins installed which manipulate images? Perhaps try it in a new sandbox vault.

---

I’ve just found the new version of Obsidian has at least one image display bug (nothing to do with the Google Photos plugin), so perhaps there’s something fishy going on with Obsidian’s display of images currently.

If you can replicate it in the sandbox vault, you might also want to submit a bug, as your issue is different to mine (although you can also see the issue below in your screenshots).

Local images with links are not clickable, and have the external link icon offset when in Reading mode

Demo using Sandbox vault [Obsidian_GLVrPHcnSj] Steps to reproduce Open the Sandbox vault. Add any image to the vault. I have tested this with JPG and PNG. Create an image link in this format: [](https://obsidian.md/) This format is in the CommonMark spec, example 516: https://spec.commonmark.org/0.30/#example-516 Expected result [image] Actual result [image] Environment SYSTEM INFO: Obsidian version: v1.1.9 Installer version: v1.1.9 Operating system: …

[BigSpieg]

For some reason the filtering blocks out all of my photos rather than just the ones not on that day. Here are some screenshots:

But, on my google photos you can clearly see there is photos taken from this date (which is today in my case)

[AlanG]

@BigSpieg

But, on my google photos you can clearly see there is photos taken from this date (which is today in my case)

My friend, your note title is 2022-01-03. Last year, not today

[TheknowledgeGuy]

In your earlier post you mentioned you had |300 automatically added, so do you have some other plugins installed which manipulate images? Perhaps try it in a new sandbox vault.

Hi,

Following your prompt, I did some investigation and solved the issue (not permanently). Apparently, the Google Photo plugin and “Ozan’s Image in Editor Plugin” are not fully compatible. When I disable Ozan’s Image in Editor Plugin, there is no issue with the Google Photo plugin and everything works as expected. Playing more with different options, I figured out that if you just disable the “Render All” option in the Ozan’s Image in Editor Plugin (see below), the Google Photo plugin works with no issue as well. Maybe that’s the middle-ground solution for now to benefit from the features of both plugins.

Cheers!

[AlanG]

@TheknowledgeGuy

Apparently, the Google Photo plugin and “Ozan’s Image in Editor Plugin” are not fully compatible

That’s nothing to do with the photos plugin; it’s inserting plain Markdown and doesn’t do any rendering at all.

I’ve replicated your issue in the Sandbox vault with only Ozan plugin installed, so you’ll need to lodge a bug report with them:

Just paste a link in this standard Markdown format, and Ozan will double-render it:

[![](test.png)](https://google.com) 

[TheknowledgeGuy]

You are right. I ended up disabling Ozan for now.

[BigSpieg]

@AlanG

My friend, your note title is 2022-01-03. Last year, not today

Omg I’m a total idiot. Sorry about that, everything working great now . Love the plugin!

[gcgcgcgc]

Thanks for this fantastic plugin! I now have templater inserting in my daily note the code block with the google photos from that day:

```photos
{
  "filters": {
    "dateFilter": {
      "dates": [{
        "year": <% tp.date.now("YYYY") %>,
        "month": <% tp.date.now("M") %>,
        "day": <% tp.date.now("D") %>
      }]
    }
  }
}
```

My little suggestion/feature request: I would prefer the gallery to appear in a more minimalistic way, namely without the sort of canvas with the scrolling bar, but just as a sequence of images… this would improve the look in those days were there are no photos.

[AlanG]

@gcgcgcgc

just as a sequence of images

Can you explain what you mean with a visual example?

For the days with no images I could have it just return text only: “No images for this search.”, rather than the whole box.

[gcgcgcgc]

The simpler the better, for example:

I stole this from the Image gallery plugin. Personally I would even prefer radius=0 …

[AlanG]

You can already do that with CSS Just target these classes and you can change the style of the grid however you like:

.google-photos-grid-thumbnail - the thumbnail images
.google-photos-codeblock - the embedded codeblock container
.google-photos-modal-grid - the popup modal grid container

I have updated v1.1.12 to show a message when there are no items found, and set the height of the block to fit that text content: