My static photo gallery on GitHub

Gitlab offers about the same feature: GitLab Pages examples Ā· GitLab

There us a plugin available to generate thumbnails for Jekyll: jekyll-thumbnailer/README.md at master Ā· mrdanadams/jekyll-thumbnailer Ā· GitHub

1 Like

Interesting! I guess one could then move the web gallery from one hosting to the other with little effort.

Newbie question: what could be the advantage of gitlab over github?

Gitlab is free software itself with an enterprise paid version. Github is gratis but not libre.

Thery work very similarly. The good thing about git is you can push the repo lots of places!

1 Like

@Carmelo_DrRaw just because Iā€™m a nut and want a confirmation: do you link manually every single image you upload?

Not really. The static web page for each gallery has a preamble with the list of images to be shown and their corresponding path in the ā€œphotostoreā€ repository, like this:

album-folder: "macro_photography"
images:
 - image_name: img00025396
   caption: IMAGE TITLE
   copyright: Ā© Andrea Ferrero
 - image_name: img00025628
   caption: IMAGE TITLE
   copyright: Ā© Andrea Ferrero

and then in the page body there is a loop over the images:

{% for image in page.images %}  		
			<figure class="gallery-item">
				<header class='gallery-icon'>
<a href="{{ site.store_url }}{{ site.store_baseurl }}/{{ page.album-folder }}/{{ image.image_name }}-web.jpg" class="popup"  title="{{ image.caption }}" data-caption="{{ image.copyright }}">
<img src="{{ site.store_url }}{{ site.store_baseurl }}/{{ page.album-folder }}/{{ image.image_name }}-thumb.jpg"></a>
				</header>	
				<figcaption class='gallery-caption'>
					<div class="entry-summary" id="{{ image.caption }}">
						<h3>{{image.caption}}</h3>
						<p>{{image.copyright}}</p>
					</div>
				</figcaption>
			</figure>			
{% endfor %}

Variables like site.store_url are defined globally in _config.yml.

So adding a new image is a mere question of putting the proper file name in the page preamble, which I find super convenient.

1 Like

Thank for your patience :slight_smile:
Ok, now I have just to figure how to assemble all the information you gave me into a functional workflow :joy:

i have never had a git repo and now I have at least 2 of them :joy:

If you have a github account, just fork my photorama repository and the gallery will become automatically accessible as

https://yourusername.github.io/photorama

Then you will need to replace aferrero2707 with your username in _config.yml, and create a second repository for your pictures (unless you want to store then directly in the photorama repository, which is also possible).

Itā€™s what I was thinking of :grin:

Itā€™s working, except for the images link from gphotos :sob:
They worked for a little and then ā€¦ nothing :disappointed_relieved:

After some digging I found how to link from the other repo (use the https://raw.githubusercontent.com/YOURUSER/YOURREPO/PATH/TO/PHOTO.jpg form)

Now Iā€™ll go for the slider

If you create a gh-pages branch in your ā€œstorageā€ repository as well, the pictures will be accessible through links like

    Yourusername.github.io/storagerepo/path/to/photo.jpg

Which I personally find easierā€¦ but at the end, either solution is probably equally reliabl.

1 Like

That could be a possibility, yes.

You should consider making the storage repo a git submodule of your site repo.

But why do you need a storage repo?

Because if anyone wants to fork my photorama repository, then he/she will not import all the pictures as wellā€¦ apart from that, it doesnā€™t really matter

1 Like

really nice find ! Thanks for sharing, gotta try it out as well !

Howdy all, I wanted to add a post to this old thread, as Iā€™ve recently come across a great github pages friendly jekyll template for a simple, yet elegant photo portfolio by Ram Petra: https://github.com/ramswaroop/photography.

For me, this template is great because you donā€™t have to add any markdown code to add new images; you simply add them to the images directory, run the gulp script to resize some thumbs and arrange, and then it works out the tiled arrangement based on the alphabetical order of the image names (no spaces in names, I found out the hard way!). You can add some contact info and bio in the yaml, and you are good to go. Great for someone lazy, like me! :slight_smile: :smile:

Hereā€™s my portfolio rendered with this template: Isaac Ullah, Photography.

2 Likes

that is a really nice template! Iā€™m working on something similar for my site built on hugo. Thanks for sharing!

1 Like

Cool! Iā€™ll love to see your project as it comes together.

I should have also said that if one does not want to mess with node-js and gulp just to resize the images, I made a simple bash script using imagemagick to do the same:

#!bin/bash
mogrify *.jpg -quality 75 -resize 512x512 -path ./thumbs *.jpg
mogrify *.jpg -quality 75 -resize 2048x2048 -path ./fulls *.jpg
mv *.jpg hires/

Just place your images in ./images and execute the script from that same directory. Then add, commit, and push changes as usual. :wink:

3 Likes

Hi, @Isaac. I forked today your github, but something is not right.
Impressing Light by Darko here I canā€™t see thumbnails, but if you click, images show.
Obviously images are in the right places and were converted with your nice script.

Have you something to suggest?

Edit: nevermind. I figured. No space on imageā€™s name

Hi Dario, actually I had the same problem and then eventually discovered that it is some sort of discrepancy between my script and the sizing and format expected by the site code. Instead I used the little node-js tool made by the guy who originally designed the code and it works fine.

1 Like

Thank you for your reply.
I solved just changing spaces with underscore.
Iā€™ll try later node.js as you suggested.

1 Like