Images and design

Iki · 2017-09-08 12:08:55

First my apologies, as always, for the sheer simplicity of my questions. What I’m doing right now is just trying to understand what TXP is doing and how it works. Since I’ve been out of the business for years, my knowledge base is antique. (Google Fonts! What am I supposed to do with the hundreds of fonts I’ve collected or purchased over the years?!?)

I’ve uploaded one photo on my test site, (lastcallradio.com). I also made it sticky so it’s always on top. (Because who wouldn’t want to look at Chuck first?) What I’m noticing here is that the image on the site automatically sizes to the browser – the actual photo is I uploaded is 2400×1600 pixels, and that’s not what I see when I load the page. So there’s already a little magic happening here.

One of the sections I want to create is a photo gallery, and so image thumbnail creation is important. But with the way it’s just resizing the original for display, can’t I just “create” the thumbnails using CSS? Like, on the page where the thumbnails would be, make the template show the last 5 images at 20% of the browser window, and if you click one, you go to that image’s page where you can see it fully, at however large your browser window is? Or do you absolutely need both a physical thumbnail image and the physical original image?

Thanks for reading!

Barb

Bloke · 2017-09-08 13:20:23

Iki wrote #306907:

the image on the site automatically sizes to the browser

Correct. Because the image tag in your template (<txp:image> probably) has been told to adopt a width and height of “0” (i.e. ‘automatic’) so the picture scales to the size of the container (the <figure> in this case, which is then constrained by the <article> and any enclosing <div> tags and the <body> and so on, until it reaches the current browser window size).

You’ll notice, pleasingly I hope, that this also works in reverse as you scale down the browser window size. So your site will look great on mobiles too, without you having to do anything.

Two things here:

You can override the tag so it will display the image in full size, but you will break the nice scalable effects on smaller and larger device sizes.
By uploading such a huge file, you’re making your site slower than it needs to be because all users (even mobile users) need to download that massive file before the site displays properly and they see the cute doggie. You’ll do your visitors a great service if — before you upload the images — you resize and optimise them to (roughly) fit the largest container into which you intend to place them.

This isn’t the end of the story as there are techniques you can employ using (for example) my smd_thumbnail plugin, which will allow you to construct HTML such that you can deliver the best version of an image for the platform upon which it is served. So you can upload your full-scale picture, have the plugin automatically create you a bunch of smaller images for use on various screen sizes of your choosing, safe in the knowledge that you’ll not be causing people to download more bytes than they need. Fewer bytes = faster site = happier visitors.

This leads into your other question…

do you absolutely need both a physical thumbnail image and the physical original image?

No, but for the performance reasons stated above, it’s highly recommended. As you suggest, you can set things up so you serve the thumbnails (smaller files, few bytes, happier visitors) and only when the visitors clicks on one will it go fetch the larger version from the server and display it somehow (in a lightbox, at full browser width, etc), so they only download what they need, rather than you forcing them to download everything on the offchance they want to see it.

The image tags built into Textpattern will allow you to construct pretty much any gallery experience you like. If you need some guidance, there’s plenty of advice in this forum or slightly older advice on Textpattern Tips (note that most tips that talk about smd_gallery can now be done by built-in tags, which is far better). But if you get stuck, just ask and we’ll do what we can to help out.

Last edited by Bloke (2017-09-08 13:28:12)

Iki · 2017-09-08 13:54:08

You’ll notice, pleasingly I hope, that this also works in reverse as you scale down the browser window size. So your site will look great on mobiles too, without you having to do anything.

I did notice that. :) The file isn’t that big – only 420kb, since I’ve already optimized it in Photoshop. Right off the camera, it’s 6-7mb. But I’m not too worried about visitor experience, since my plan is not to have any visitors, or search engines, or SEO or any of that other stuff. I’ve got other websites for that. This website is for just me.

That said, “Begin as you mean to go on” is sage advice, and I don’t really want to develop any bad habits!

optimise them to (roughly) fit the largest container into which you intend to place them.

So, the question now is, if I’m uploading pictures of many different sizes, how do you keep any sort of uniformity in the gallery?

This isn’t the end of the story as there are techniques you can employ using (for example) my smd_thumbnail plugin, which will allow you to construct HTML such that you can deliver the best version

Already had that plugin page opened in another tab before I posted this. :)
I think I do need the thumbnails, and I can see the value of the different size thumbs for different devices. And even though the site is just for me, there’s no reason to annoy myself by having badly sized thumbnails in case I try to show someone a pic from the gallery on my phone! I do like it better when the full pics aren’t downloaded unless I specifically ask for one.

Thanks!

Textpattern CMS

Textpattern CMS support forum

#1 2017-09-08 12:08:55

Images and design

#2 2017-09-08 13:20:23

Re: Images and design

Iki wrote #306907:

#3 2017-09-08 13:54:08

Re: Images and design

Board footer