New Theme based on 'Big Picture'

Jeff S

Joined: 2013-04-03
Posts: 7
Posted: Wed, 2013-04-03 18:28

Hey guys,

I've created a new theme based on the Big Picture photo blog on Boston.com. It uses lazy loading of images, which required a tiny hack to gallery's core, so I can't just package up this theme as it is.

Here's an example

It shows all the photos in the album on a single page, but only loads the images as they scroll into view. This is pretty much required for a layout like this. The 'thumbnails' are big at 800px, meaning that folks really don't need to click thru to really see your work. I've added image numbers to each caption (which change when adding, removing, or re-ordering photos) and the captions are big and obvious, just like on Big Picture.

Any feedback or things I could improve?

The hack to G2's core was to format the "img" tag to use a placeholder image in the src and to add a custom tag for the real URL of the image. Javascript notices scrolls, sees what images are on screen, and changes the src to the real URL. Might there be a way to do this purely within the theme?

Cheers, Jeff
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Wed, 2013-04-03 19:12

I have a similar theme w/ large thumbs, which would be easy to load via scroll as well.
You should not have to hack anymore than theme.inc

-s
________________________________
All New jQuery Minislideshow for G2/G3
 
Jeff S

Joined: 2013-04-03
Posts: 7
Posted: Wed, 2013-04-03 20:26

Interesting. I guess it's possible, but I don't know how to change GalleryDerivative::render from theme.inc - is there an example you could point me to?
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Wed, 2013-04-03 21:40

You tell me how and why you changed the renderer and I'll show you.

-s
________________________________
All New jQuery Minislideshow for G2/G3
 
Jeff S

Joined: 2013-04-03
Posts: 7
Posted: Wed, 2013-04-03 22:32 
17:30:36-> diff GalleryDerivativeImage.class GalleryDerivativeImage.class.orig
210,217d209
< 		if(isset($params['lazy'])) {
< 	    	unset($params['lazy']);
< 
< 	    	$html = sprintf('<noscript><img src="%s"%s/></noscript>', $src, $sizeStr);
< 		    $html .= sprintf('<img src="/gallery2/images/grey.gif" data-original="%s"%s', $src, $sizeStr);
< 		} else {
< 	    	$html = sprintf('<img src="%s"%s', $src, $sizeStr);
< 		}
218a211
> 	    $html = sprintf('<img src="%s"%s', $src, $sizeStr);

Then in the theme, I add 'lazy', obviously.
 
Jeff S

Joined: 2013-04-03
Posts: 7
Posted: Wed, 2013-04-03 22:38

oops. The 'why'..

The lazy loader works by first loading a place-holder image, scaling it to the proper height and width. On page load and scrolls, it modified the src tag from the placeholder to the proper URL which is contained in the data-original tag. There's noscript fall-back, and if 'lazy' isn't set, it just uses the old code.

Oh, and THANKS!
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Thu, 2013-04-04 00:42

Oh yea, you would certainly do this in the theme.
Using Chris' example it should be super easy.

-s
________________________________
All New jQuery Minislideshow for G2/G3
 
Jeff S

Joined: 2013-04-03
Posts: 7
Posted: Thu, 2013-04-04 01:49

I don't quite understand.

The lazy loading already works, I'm not looking for another js/css solution. Anyway, thanks for the input.
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Thu, 2013-04-04 01:55

Chris' example uses your false image but he includes the real image in the data-src:
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">
Its the same thing you are doing only simpler... and no changes to core.

-s
________________________________
All New jQuery Minislideshow for G2/G3
 
Jeff S

Joined: 2013-04-03
Posts: 7
Posted: Thu, 2013-04-04 12:16

That's exactly what I'm doing. He's calling the real image "data-src" and I call it "data-original"
Mine: (in php)
<img src="/gallery2/images/grey.gif" data-original="%s"%s', $src, $sizeStr

Guess I'm not seeing the difference. Anyway, I'm content with the solution I have, it just means I can't package and share my theme with others (without them hacking core, too). Since it's just you and I talking, and you could implement this on your own, I guess there's no need for me to package this up, so no need to change what I've got working. (a worse solution would be to re-implement GalleryDerivative::render - perhaps using Chris's code, perhaps using the jquery version I'm using now - in my theme and ignore the one in core. That's harder to maintain than what I'm doing now.
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Thu, 2013-04-04 15:12

in your theme's templates/album.tpl this would be done:

<img src="{g->url href="themes/your theme/images/grey.gif"}" data-original="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.id`"}" width="{$child.width}" height="{$child.height}">

grey.gif should be in themes/your theme/images/grey.gif
no need to hack the core

-s
________________________________
All New jQuery Minislideshow for G2/G3
 
Jeff S

Joined: 2013-04-03
Posts: 7
Posted: Thu, 2013-04-04 15:32

Ahhh! Now I see the light.

So, that re-creates some of what GalleryDerivative::render - the important bits, but doesn't include all the logic that goes with it, like resizing if needed, building an alt tag, forceFullUrl adn forceRawImage checks (latter of which doesn't seem to be used). Alt tag wouldn't be hard to re-create, too, and the shrinking if necessary isn't likely needed as long as I pre-create thumbnails at the right size (at least that's what I think that's there for).

Thanks for your continued help. I get the approach you're taking and I'll consider it.

Cheers, Jeff
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Thu, 2013-04-04 15:46

you can use forceFullUrl=true
{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.id`" forceFullUrl=true}
you can use any like forJavascript=true or forceDirect=true or htmlEntities=false...

setting alt & title is trivial alt="{$child.title}" title="{$child.title}"

You can also set the image size in css by giving it a class eg.

.giImage {
  width: 100%;
  max-width: 800px;
  height: auto;
}

this way the img would scale with the browser like in my example

-s
________________________________
All New jQuery Minislideshow for G2/G3