Jekyll Google Photos
💎 Embed Google Photos Album to your Jekyll Site
⚠️ Please note that this plugin is NOT supported by GitHub pages. Here is a list of all plugins supported. However you can follow this GitHub guide to enable it or by using Travis CI. GitLab supposedly supports any plugin.
Installing
Install the gem using:
gem install jekyll-google-photos
Or use the following if you are using bundler
bundle add jekyll-google-photos
You also need to add this plugin to your _config.yml
file:
plugins:
- jekyll-google-photos
Usage:
{% google_photos <link_to_album> <max_width> %}
max_width
(pixels): Max width of the image loaded from Google servers for the gallery. Larger widths may increase page load time.
Example:
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 800 %}
or using variables/front matter
---
gallery_url: https://photos.app.goo.gl/bhWukds8QVodFU24
---
{% google_photos page.gallery_url 800 %}
Note
You can use 0
to get original quality image.
Adding Multiple Albums
Create a custom variable in the front matter of the page that would contain URL to albums you'd like to use:
---
album_urls:
- <URL 1>
- <URL 2>
- <URL N>
---
Then use the google_photos
tag using the same principle but this time passing the new variable:
{% google_photos page.album_urls 800 %}
Want to Display images your way?
Pass none
into max_width
. Passing none
will not display any image. You can now use image urls to display images in any desired way.
{% google_photos <link_to_album> none %}
The image URLs are present in the following array inside the googlePhotos
object.
googlePhotos.urls = ["img1","img2",...];
Note
Image urls will always be available at googlePhotos.urls
irrespective of what is passed in max_width
.
Example integrating a third party gallery plugin
This is the answer to issue #5
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 none %}
<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
<div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
data-link="<Album link>"
data-title="<Album Name>"
data-description="<Album Description>"
data-delay="5"
id="MyAlbum1">
</div>
<script>
let MyAlbum1 = document.getElementById('MyAlbum1');
let imageWidth = '0';
for(var i in googlePhotos.urls) {
let picture = document.createElement('object');
picture.setAttribute("data", googlePhotos.urls[i] + '=w' + imageWidth);
MyAlbum1.appendChild(picture);
}
</script>
Hacking the Image URLs
Google provides us a way to 'hack' the base URL of images to manipulate the quality/dimensions of the images. The following information was taken from Google Photos' official documentation:
Parameter | Description |
---|---|
w, h |
The width, w and height, h parameters.
To access an image media item, such as a photo or a thumbnail for a video, you must specify the dimensions that you plan to display in your application (so that the image can be scaled into these dimensions while preserving the aspect ratio). To do this, concatenate the base URL with your required dimensions as shown in the examples. Example: BASE_URL=wMAX_WIDTH-hMAX_HEIGHT Here is an example to display a media item no wider than 2048 px and no taller than 1024 px: https://lh3.googleusercontent.com/p/AF....VnnY=w2048-h1024 |
c |
The crop, c parameter.
If you want to crop the image to the exact width and height dimensions you have specified, concatenate the base URL with the optional -c parameter along with the mandatory w and h parameters. The size (in pixels) should be in the range [1, 16383]. If either the width or the height of the image, exceeds the requested size, the image is scaled down and cropped (maintaining the aspect ratio). Example: BASE_URL=wMAX_WIDTH-hMAX_HEIGHT-c In this example, the application displays a media item that is exactly 256 px wide by 256 px high, such as a thumbnail: https://lh3.googleusercontent.com/p/AF....VnnY=w256-h256-c |
Note
You can use =w0-h0
for unaltered image quality.
Error using this plugin with Github pages?
A lot of users are experiencing issues when using this plugin with Github pages.
Reason
Github only supports a limited number of Ruby gems.
https://stackoverflow.com/questions/53215356/jekyll-how-to-use-custom-plugins-with-github-pages
Solution
- Try building locally and then push contents of
_site
to your repository. - Try other static site builders. Gitlab pages is a good alternative.
Features to implement
- Full-Screen HQ Image View and Slider
- Do something about Videos