My static photo gallery on GitHub

Showcase
39

Sorted the front page now, seems much smoother! Thamks @patdavid @paperdigits.

Iā€™ll do the same with the portfolio section ASAP.

Cheers.

40

I did the most idiot thing that was possible: right click on the image, open image in new tab, and paste the linkā€¦ guess what? It didnā€™t work! :wink:

People complained that they could not see the imagesā€¦ not surprising.

Now I have put the images in the gh-pages of a ā€œstorageā€ github report, and they are easily accessible by anybody. And no Google involved!!!

If you want, tomorrow I can post the details of what I did.

41

If you can, do it, please.
I understand that I can upload images in IMG folder, but I donā€™t understand where I have to past direct link to photos.
Google Drive, or photo, doesnā€™t provide a direct link by itself, but there some extension that will do it for you

42

I have spent some minutes searching for that at the beginning, and then immediately gave up the ideaā€¦ too complex.
The scheme Iā€™m using right now is very simple:

  • I have a ā€œphotostoreā€ repository with a gh-pages branch, where I upload my photos. The images are then directly accessible with links like this: https://aferrero2707.github.io/photostore/archive//macro_photography/img00025396-web.jpg
  • for each image, I upload two versions, one with a -web suffix that is in high resolution and one with a -thumb suffix which is 400px in size and is used for thumbnails
  • the web gallery is provided by the gh-pages branch of a second repository, called ā€œphotoramaā€ (but you can call it differently if you like). This is a fork of the original photorama repository from sunbliss

The big advantage is that I do not rely on any fancy image storage provider, and I have full control of where the pictures go.

Moreover, I can add pictures in my local copy of the ā€œphotostoreā€ repository even if I am offline, and modify the local copy of the web gallery to include the new images.
As soon as I have some internet connection, I can push the changes to github and the new images will be automatically online.

1 Like
43

Here they say that, even if you have unlimited space, repository should be under 1gb for reasons.
Sure they are still a lot of web compliant photo, but ā€¦

44

I know about the size limitation, however I plan to keep the image size well below 1MB, and I will never have 1000 or more good images to put in my gallery :wink:

45

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
46

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?

47

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
48

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

49

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
50

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:

51

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

52

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

53

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

54

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
55

That could be a possibility, yes.

56

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

But why do you need a storage repo?

57

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
58

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