My static photo gallery on GitHub

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

I noticed some weird flickering when I checked the site out at work on Friday. The large image size must have been it… not video memory on my computer at work, lol!

1 Like

@Carmelo_DrRaw how do you link to your google photo?
I feel really an idiot :confounded:

Thanks @patdavid, much better!

1 Like

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

I’ll do the same with the portfolio section ASAP.

Cheers.

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.