News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Speed up attachment viewing?

Started by Jade Elizabeth, January 24, 2016, 04:01:19 AM

Previous topic - Next topic

Antechinus

Quote from: Bloc on March 30, 2016, 07:28:21 PMOn slow connections thats akin to pure torture lol. At least downloading both should make it rather quick since CSS background images will not hold up the download of the others...

Really? I would have thought that they'd start downloading based on where they were called in the markup.

Jade Elizabeth

Quote from: Antechinus on March 30, 2016, 07:59:23 AM
You can do that too. Just disable thumbnails, and use CSS to scale the image to fit available post width. Simple.

Ohhhhhhhhhhhhhhhhhhhhhhhhhhh ha ha

* Jade Elizabeth is a little too blonde

Quote from: Bloc on March 30, 2016, 02:14:08 PM
The great thing about a thumbnail + the full picture-hidden-on-default after each other, is that while you see only the small thumbnails, the big picture will have time to be downloaded once you press the thumbnail. Its not javascript, rather a :target routine. And since the big picture shows in full width and adjust to any users screen, it will look more modern. Plus its instantly there(its a background image that will download in the background giving a better user experience overall IMO)

Thats all. :)

(check out the Display.template of the the ModernStyle theme for a demonstration, or visit: http://demos.bjornhkristiansen.com/index.php?topic=4.msg4#)

Can't view attachments as a guest lol.

Quote from: Bloc on March 30, 2016, 07:28:21 PM
Requirement to click is an advantage, you get to see the smaller thumbnail quickly(ish). Having full width images waiting to be downloaded and THEN scaled is not the best user experience. On slow connections thats akin to pure torture lol. At least downloading both should make it rather quick since CSS background images will not hold up the download of the others and since its not showed you will not see any downloading progress. 

But I suggest trying it out and see. The smallest and quickest option is of course just showing the pure links. :D


Yes I am noticing with thumbnails off the thumbnail shows first then the bigger image and that's just super freaking annoying.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Antechinus

Jade, if you want to try it with no thumbnails, and just load the freaking image so there nya nya nya (which admittedly will not be everyone's preference, but if you want to try it) all you basically have to do is set the attachments to display: inline-block; (more versatile than using floats) and set a max-width of 99% or whatever fits, with height set to auto. If you want to have belt and braces for odd images that are really tall and narrow, you can set a max-height too.

Jade Elizabeth

Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Antechinus

It appears to have the max-width sorted, which is cool. Doesn't appear to have divs surrounding the images set as inline-block. Mind you that probably doesn't matter if you get a lot of mobile traffic, because they'll be stacking down the page on mobile anyway. Can be handy on desktop, depending on screen width and image size.

Bloc

Quote from: Antechinus on March 30, 2016, 07:43:08 PM
Quote from: Bloc on March 30, 2016, 07:28:21 PMOn slow connections thats akin to pure torture lol. At least downloading both should make it rather quick since CSS background images will not hold up the download of the others...

Really? I would have thought that they'd start downloading based on where they were called in the markup.

Yes..but since the big background image is set to display: none it won't be fetched until its set to display: block. Meaning all the thumbs come down first, the big one-by-one when you click them. Thats a LOT better to work with than downloading all the big ones and and re-scaling them. Thats about the worst you can do lol, making the poor browser both download the large image and re-scale them too(which takes longer  on big images) Result: large images, even if they fit within your windows, that takes forever to load.

How is that different from SMF built-in thumb/big? Well, you avoid javascript, you have the big image cover the whole screen(in my styling anyway, thats up to you of course) and it just looks better..imo anyway. 8) AND you get the same result on a mobile.

Antechinus

Ok, didn't know it wouldn't be cached until the thumbnail was clicked.

I realise downloading heaps of big uns at once is a bandwidth hog. Thing is that if the big uns aren't already cached, you're still going to have a loading delay when you click the thumbnail, and that loading delay was what Jade was grumbling about. So to stop Jade grumbling, or at least make her grumble a bit less, just going ahead and loading the things might be better for her site. As long as people have fast enough connections to handle it, of course, but if they're frequenting image-heavy threads then they should have.

Jade Elizabeth

Yeah it's pretty obvious that section is where the images are XD.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Bloc

Quote from: Antechinus on March 31, 2016, 04:26:44 PM
Ok, didn't know it wouldn't be cached until the thumbnail was clicked.

I realise downloading heaps of big uns at once is a bandwidth hog. Thing is that if the big uns aren't already cached, you're still going to have a loading delay when you click the thumbnail, and that loading delay was what Jade was grumbling about. So to stop Jade grumbling, or at least make her grumble a bit less, just going ahead and loading the things might be better for her site. As long as people have fast enough connections to handle it, of course, but if they're frequenting image-heavy threads then they should have.
Yup. bandwidth and all that. Though one big download of 200k go faster than 10 x 200k (loading at once....) ;)

For my part I am of the opinion that if someone can't be bothered to click to see the bigger picture once they seen the smaller one, they aren't really interested in looking at it anyway :P :)


Antechinus

ROFL. Well the problem seems to be that Jade's bunch are too lazy to click the thumbnails, but want people to look at their pictures. So as a site-specific option to deal with that crowd...

Jade Elizabeth

Goddammet they're big every freaking where now XD.

Can I like stupid code into a template to make them big for just one board? It's so slow it's killing me.

And yes way too lazy/stupid to click the boxes in the gallery, but apparently super smart out side there and clicking them and ******ing they never load (which is fair enough it pisses me off too lol).
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Antechinus

#31
Yeah that should be possible. You'd just need to set a PHP conditional that uses the id of the relevant board. There's this in Display.template.php:

if ($attachment['is_image'])
{
if ($attachment['thumbnail']['has_thumb'])
echo '
<a href="', $attachment['href'], ';image" id="link_', $attachment['id'], '" onclick="', $attachment['thumbnail']['javascript'], '"><img src="', $attachment['thumbnail']['href'], '" alt="" id="thumb_', $attachment['id'], '" /></a><br />';
else
echo '


So if that was changed to something like:

if (($attachment['is_image']) && (['board_id'] != 10))
{
if ($attachment['thumbnail']['has_thumb'])
echo '
<a href="', $attachment['href'], ';image" id="link_', $attachment['id'], '" onclick="', $attachment['thumbnail']['javascript'], '"><img src="', $attachment['thumbnail']['href'], '" alt="" id="thumb_', $attachment['id'], '" /></a><br />';
else
echo '
<img src="' . $attachment['href'] . ';image" alt="" width="' . $attachment['width'] . '" height="' . $attachment['height'] . '"/><br />';
}
elseif ($attachment['is_image'])
{
echo '
<img src="' . $attachment['href'] . ';image" alt=""/><br />';
}


That should work. With the caveat that I just pulled the board id stuff out of my arse and you'd have to look up the actual variable to get it right.

Jade Elizabeth

Thanks Ant! I already have a tonne of code in the message index for the gallery area (the outcome you can see here: http://www.colormeforum.com/strut-your-stuff/ but not here: http://www.colormeforum.com/coloring-outside-the-lines/ and definitely not in normal boards lol) so adding another chunk won't be too bad. I'll just add a reminder comment in there so I remember ha ha.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Antechinus

Looked back through some stuff. I think the variable you'd want is $context['current_board'] which should just output a basic number (like 1, 2, 3, 4, etc).

Bloc

Yup, you can use that variable, it should work even in Display.template.

About filling up templates with specific code - no stranger to that heh. :)

Advertisement: