My static photo gallery on GitHub

This looks very nice, and quite elegant! Some of your photos didn’t load for me either. Do those templates have any Flash components? Flash is no longer working on Firefox in Linux. Could be something else though.

FWIW, I have been using github sites and similar Jekyll-powered static site generators for my own website, including my photo gallery. It’s a very flexible approach to creating and hosting a website, blog, or gallery. I quite like it! :smile:

Super excited about this!

Got to work on it, but somehow managed to delete the /gallery/albums folder. Any tips how to get this back, or create a new folder? I worked out how to create a new file, but creating a new github folder seems way less obvious.

@Carmelo_DrRaw @paperdigits @patdavid

The photo gallery is under revision control, so you should be able to revert it to the state before you deleted the gallery/albums folder:
https://help.github.com/desktop/guides/contributing/reverting-a-commit/

It’s like creating files, but you append “/” at the end of the file name… github will automatically interpret this as a folder name. More on this here:

Thank you, much appreciated!

So here’s my offering…
https://fotonut.github.io/fotonut/

Very nice! Some images are very slow to load… maybe you can consider uploading images with a smaller resolution?

On my version of the gallery I am now adding two versions of the same image, one at about 2000 pixels in width for the full-screen slideshow, and one at 400 pixels for gallery thumbnails. This makes the loading of the page much faster.

Also, I am now storing the images in a separate git repository, so that forking my web gallery will not pull also all the Jpegs. I’ve also opted for a more polished slideshow, with dimmed buttons and a completely black background. The new version is online if you want to take a look.

1 Like

Nice ! I’m not the only one to use the photorama theme :slight_smile:

http://pixtolero.github.io/

1 Like

That’s cool @Pixtolero, how did you incorporate your blog?

It’s the “journal” feature already in photorama jekyll theme

How can I make the text below appear closer to the bottom of the screen? This is on the home page…

Cheers.

Can’t help until the CSS linking is sorted out. :slight_smile: I’m happy to have a quick look once you do, though.

All good to go now @patdavid, standing by to take the next step by lowering the text, bottom left.

fotonut.nz

Cheers.

I’ve just run the site through Google’s ‘PageSpeed Insights’ https://developers.google.com/speed/pagespeed/, who recommend I should remove one render blocking script (http://fotonut.nz/js/modernizr.js) and optimise css delivery in order to speed up the website.

I’m probably going to lower the resolution of my pics to help speed things up, but is it safe to remove the modernizr.js script?

Cheers.

Modernizer.js is quite large, but for a decent reason: it translates new web standards into old web standards on the fly from browsers that can’t understand new web technology.

There are still a lot of people running IE8 and I’m sure there are plenty of crummy mobile browsers out there. By removing modernizer, those people might not get some content from your site.

Ah, I see. So prolly best to leave it as is then?

I still use modernizer.js on all my sites and feel it is worth it and the author or your template felt it necessary as well. Your web site will still work for most people without modernizer, but it provides good functionality out of the box by just loading it.

1 Like

I would like to apologise not being very active on this thread I’ve created, particularly to help with issues, but the truth is that I’m a completely newbie at web programming… and that’s actually why I started this thread, because the original theme allowed a newbie to set-up a web gallery in less than half a day :wink:

1 Like

Feel free to ask away, I’m happy to answer any questions that I can.

1 Like

Ok, depending on how far down you want it to be…

You can just add a new CSS rule to remove the 1.5em padding on the bottom of that element. So either…

Edit WYSIWYG.css directly by changing:

/*galleries adapted*/
...
    .fullscreen-gallery .gallery-caption .entry-summary { padding-bottom: 1.5em; }
...

To

/*galleries adapted*/
...
    .fullscreen-gallery .gallery-caption .entry-summary { padding-bottom: 1.5em; }
    .entry-summary p { padding-bottom: 0; }
...

Or add another CSS rule somewhere in a file that loads after WYSIWYG.css:

.entry-sumary p { padding-bottom: 0; }

I’m not sure what WYSIWYG.css is from, but if there’s an editor that’s visual you may want to check if there’s a way to do it there… :slight_smile:

Holy mackeral, your images are huge. One of them is 2.4MB! And over 5000px wide! :astonished:

I would scale these down to a much, much smaller resolution, and a much much smaller filesize. I find that for “Hero” images sliding on a background on something like this, I would target closer to 2048px wide (maybe only a touch bigger). I’d also compress heavily to help page loading speed. For pixls.us I target about 2048px wide and try to target about 300kb per image for header/lede images (agressive compression helps here).

Remember, 6 images x 300kb = 1.8MB for someone to download still. You might even get away with smaller overall file dimensions (~1650px wide?).