[ghporter]

I'm working on a set of web pages (internal to my home LAN) to share (tons of) photos I've taken over the years and have digitized. Most of these image files are pretty large and have resolutions of up to 4000X6000 (portrait) or 6000x4000 (landscape). I want to share these photos to anything from laptops or desktops to tablets and phones, so I want the page to supply properly sized images to whatever platform it requesting them.

As a test bed, I have coded a page to show some of these large images using the viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This works great for landscape-oriented images, and fills the width of the window with the image.
But portrait-oriented images also fill the width of the window, and require a LOT of vertical scrolling.

I've researched the heck out of this, and while I've found plenty of advice about using viewport width or height units (percentages of the viewport's width or height), so far I haven't found anything that tells me how tall the viewport is in the first place. I can't figure out how viewport height is determined, especially if the image I want to display is big enough to fill the width of the viewport - is it just the currently viewable window's height, or something else?

Every definition or description I find either assumes I've read the entire site's content up to defining viewport, or gives really nice details about the tag itself, and its attributes. But so far I haven't found anything that simply says how the use of the tag relates to how a browser will render the image.

I've messed with a workaround of setting the maximum height of the images at 600 pixels, but that feels like a band-aid instead of understanding how to use the dimensions of the viewport. I have this vague idea that I might size every image as if it were a literal 35mm slide, so whether portrait or landscape, it would be "correctly" sized for whatever platform is being used to view the web page.

If anyone could do some hand-holding and walk me through using a viewport tag, I'd appreciate it. And if it would simply be more appropriate to go a different route, I'd love to hear any suggestions.

Thanks in advance; I'm looking forward to any help I can get.

[ghporter]

I’ve found a few helpful posts online that have gotten me a little farther along, but the issue is still essentially that I don't know how to tell the browser to format images so they aren’t super tall compared to the visible browser window.

On the other hand, if you just open an image file with Google Chrome, if it’s in portrait orientation, Chrome will open it ONLY within the VISIBLE window. Geez, if the browser can just automatically size a file like that, why can’t I tell it to do the same through a web page?

Anyway, I’ve been looking at possibly building a “picture frame” structure in a page (maybe “slide frame” a la old fashioned 35mm slides would be a better name). I would tell the browser to use padding top/bottom of landscape images, and left/right of portrait images. This means the page would need to know the orientation of the image…but if I have that data, I could just dynamically size the image, right?

Thoughts?

[reader50]

I'm not up on my CSS, but you can still use an old-fashioned table. That's your frame idea - specify the table dimensions. Don't remember if you can do proportions - I haven't done any web coding in awhile. But you can definitely hard-code pixel dimensions.

[ghporter]

Your post got me thinking of a 1X1 table sized big enough to fill a good portion of the screen as the frame. To make that work I need to figure out how to change the contents of the table element.

I've also found some examples of a "filmstrip carousel", which seems to be workable. Here's one that looks like it uses Java Script to work some magic, but I haven't puzzled out exactly what that magic is.

[andi*pandi]

sounds like he wants it responsive- otherwise too small on desktop or too large on phone. soo no hardcoded pixels/table widths

media query
max-width
max-height

https://css-tricks.com/a-complete-gu...media-queries/

[ghporter]

I definitely need it to be responsive. OK on a laptop or tablet screen would be bad on a phone screen. And I recently found out that there's an actually useful web browser built into Amazon's Fire TV Stick (though I need a wireless keyboard and mouse for it to be "useful" as well). I got a fair handle on responsiveness by using

Code:
 <meta name="viewport" content="width=device-width, initial-scale=1">

but it ONLY makes width responsive. So this directive keeps landscape images from being too wide for any screen, but it makes portrait images the width of the screen, thus requiring vertical scrolling to get the whole picture. (Pun accidental, but appropriate.)

Lots of searching pointed to a CSS library called Bootstrap that does scads of stuff for you. I spent way too much time trying to figure it out. Then I came across w3.css, from w3Schools. Like Bootstrap it does stuff for you, but unlike Bootstrap it has formal tutorials with examples, and as they say on their intro page, w3.css is "smaller, faster, and easier to use."

So while I've actually learned a bunch about CSS from casting around for how to do this or that, I'm going to start using w3.css (and their Javascript library, w3.js) to make my project work more easily.

Oh, and I'm also messing with image file size. A JPEG at 100% quality is at least as large as a PNG (uncompressed) of the same image, which means longer load times. Sure, a browser will load the whole picture, but waiting on a 14MB file to load is not optimal for showing off how cute the kid was with his puppy...

Which led to a side quest...I'm starting to look at what might be a good image size (vertical pixels by horizontal pixels) for everything up to a big screen TV, then I'll scale my pictures appropriately. After that, I'll be able to figure out if I want to use JPEGs or PNGs.

[reader50]

Originally Posted by ghporter 

Which led to a side quest...I'm starting to look at what might be a good image size (vertical pixels by horizontal pixels) for everything up to a big screen TV, then I'll scale my pictures appropriately.

Use a 4K screen as your reference. Higher-res TVs or monitors are quite rare, and hugely expensive. Likely to remain so for awhile too, as there isn't much 8K content. And 4K is pretty sharp today, even on a big-screen TV. So size for 3840x2160 or smaller, with download links for full-res originals.

That should keep you for at least 5 years, after which you can decide if it's worth reworking for 8K. As I see it, 5K monitors are a niche that hasn't spread beyond the monied few - they're around the same price as 8K today. So in my opinion, the next big resolution jump will be to 8K. Which I don't see becoming affordable for at least 5 years.

[ghporter]

I think I have the formatting licked. I'll worry about actual image size and resolution later.

The slide show code basically uses a list of img tags and steps through the list. There's code for wrapping the list in both directions; click "forward" on the last slide, and it goes to the first, "back" on the first slide goes to the last.

But the image list entries are essentially like this:

Code:
<img class="mySlides" src="picfolder/picture01.jpg" style="width: 100%">

Getting portrait images to not require lots of vertical scrolling was pretty much a matter of changing the "width" to 50% - these are classic 2:3 aspect ratio images, so that's not perfect, but it works. But this container class I'm using is left justified by default, so portrait images show up all the way to the left.

The trick to making them both fit(ish) the viewport height AND be centered was this:

Code:
<center><img class="mySlides" src="picfolder/picture01.jpg" style="width: 50%"></center>

Now I essentially have a template to make a slide show from every folder full of images. It isn't automatically figuring out that a file is in portrait orientation, so I have to tweak the list of images appropriately, but building the list is only a matter of a lot of cut and paste, then updating image filenames (which will always be numbers), and finally adding the center tags to portrait images and updating their widths.

I think I'll cobble up a demo of this and put it on my website later, just to show off how it works.

[reader50]

Having to set parameters manually for each pic? Ugh. The server code should read the directory, using whatever filenames are present. And should check the image dimensions, then scale a pic as needed to fit the user's screen.

I dislike solutions that set me up for extra work. Indefinitely.

[ghporter]

While I’m sure I could work out the script for that at some point, I’m just glad I got stuff working. Automating it will be a nice project to get into sometime soon.

Here’s a demo of my slide shows.

These are photos I took 40 years ago at Lost Maples State Natural Area. It’s a beautiful place, an “island” of maple (and other) trees that “shouldn’t be in Texas” because of the climate, but because of the geology and geography, the area allowed them to thrive.

You’re welcome to inspect the page’s code, and you can download the w3.css file from the link in the code to look at it too.

[reader50]

What code are you using, besides CSS? If I were doing the project, I'd use a PHP script, which would fetch and scale images as needed for the browser.

I'd be happy to look over your code - zip it and email it. I'll offer opinions, and if it's a language I know, code suggestions.

[ghporter]

It's all HTML, CSS, and a little Java Script. I'll email you a zip of the whole demo, images and all.

I'm not really up on PHP, but if it can scale images on the fly, I'm all ears.

[reader50]

PHP can scale images if the GD image library is installed on the server's version of PHP. But unless the images are humongous raw pics, it's simpler to tell the browser to scale them. Family pics in particular, relatives may want to zoom into. Giving them the full sizes and letting the browser scale will keep everyone happy.

[ghporter]

I've done some poking around and it looks like PHP is not so unfamiliar. I'm looking forward to playing with it. For example, there's a function to just plain read the image dimensions, which will say whether the image is portrait or landscape...

My images may actually be "humongous" pics. is 6000x4000 humongous? But these are JPEGs, not RAW. Minor issue at this point.

So without manually tweaking HTML for each image, I should be able to have PHP figure out orientation, scale appropriately, and return an image to display that will fit in the slideshow box. Once I figure out PHP, anyway.

[andi*pandi]

I should've told you to look into lightbox JavaScripts...

[ghporter]

It looks like "while it can be done," using PHP for the entire slideshow is clumsy, not user friendly, and otherwise a bad idea.

Instead, I apparently need to use PHP to create my list of images and size them appropriately based on orientation, then use Javascript to do the actual slideshow itself.

In the code I'm using from w3schools, the image files are explicitly listed (along with the left/right control buttons) in the HTML like this:

Code:
<div class="w3-content w3-display-container">
	<center><img class="mySlides" src="LM01s.JPG" style="width:100%"></center>
	<center><img class="mySlides" src="LM02s.JPG" style="width:50%"></center>
  	<center><img class="mySlides" src="LM03s.JPG" style="width:100%"></center>
  	<center><img class="mySlides" src="LM04s.JPG" style="width:50%"></center>
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>

As you can see, it can become a large workload to just create the list if there are a lot of image files, and marking the portrait images with "width:50%" is just asking for manual errors.

The Jacascript that does the slideshow works nicely, and I understand it. So I'm hoping there's a PHP routine or routines I can use to find the file names in the folder, determine their orientation, scale appropriately, then build this list (or array, or whatever).

andi, I have looked at the lightbox plugin stuff, but I would like to understand what I'm doing instead of handing off more stuff to some black box to do things for me. If I'm misunderstanding lightbox, please let me know.

[reader50]

I got your email, and will code something. But things turned busy in the RW, so it might be another day or two. Sorry.

[ghporter]

Free help is welcome, whether it's instant or "in a while." Meanwhile, I'm studying PHP, and maybe even figuring out a thing or two.

[ghporter]

I am learning... PHP feels pretty close to C, much like Java/Javascript does, except PHP looks to be more flexible and powerful. Nice.

[ghporter]

The thing that still gets me a little befuddled is that PHP isn’t just something you can sprinkle into a basic web page - even though a LOT of tutorials seem to make it look that way.

Curiously (to me), the w3schools stuff on PHP is almost clear on this point. “Let’s make a dynamic web page…” and they start out with basically a skeleton “index.php” file. However, it looks like I can have a link on a basic HTML page to a PHP page, so I won’t necessarily have to worry about another file to tell browsers “which index.xxx” file to look for.

[reader50]

I usually serve the whole page through a PHP file, but if memory serves, you can do just a section. Like the body content. While you could code your PHP section into your index file, you'd more likely just add PHP tags at the right point, and {include imageserver.php} into your page. That keeps all your PHP code in a separate file, where you don't have to mix syntax between HTML and PHP.

Did a little coding tonight, just roughing things out. I'll have to look up my filesystem functions again, it's been awhile.

Since PHP has been popular for some time, you could save a lot of time if someone has already coded a PHP album service. Might be worth some googling.

[ghporter]

I’ve been playing with a “section” approach I got from somebody’s tutorial. They basically chopped up an HTML file into “header”, “body”, and “footer”, and had an “index.php” file echo those sections in order. I messed around with it, figured out how to get CSS to work with it, and then ran out of time.

I also found out (again) that having a single resource like a customized CSS file is great. But you gotta NOT have copies of it floating around, or you’ll edit the wrong one and get Really Frustrated. Which is kind of why I ran out of time.

I have also tried putting PHP tagged stuff in a regular .HTML file, but it hasn’t worked, and I don’t understand why not. So I haven’t played with “coding” with PHP yet. I wanted to just get something working before I went there.

[ghporter]

I’m making inroads into how to make PHP do stuff for me. I can now do things like parse a directory for file names, concatenate the directory name on those file names, and output HTML to show image files.

My next step is to use that stuff to plug the qualified file names into my CSS-based slideshow and see how that works.

I’m honestly having fun with this. I still don’t know why plugging a PHP block into an HTML file hasn’t worked for me, but I’m still digging into that. <hint> Any guidance on this particular topic would be appreciated. </hint>

[reader50]

Might be an Apache setting on your system. Where PHP is only active if the filename ends in .php

[ghporter]

That's probably it. I slapped all of the "components" together into a single file. It works with a PHP extension, not with an HTML extension.

Now I have to dig into Apache to find the mime-type stuff and change a setting or two.

[ghporter]

I think a LOT of Apache's configuration system is more complex than it needs to be. Particularly when "implementation for 'specific OS'" has a vastly different set of filenames, etc. And I haven't found a GUI Apache configuration tool for Debian that actually does anything either - I naively assume that a GUI tool "should" take into account where they hide various configuration stuff. Grrr.

Anyway, I had to tell Apache that it could process PHP in HTML files (changing a setting in etc/apache2/mods-enabled/php7.3.conf), make sure the edited file's permissions would allow Apache (and whatever group it belongs to) to read it, and restart Apache a couple of times. All of this while trying to interpolate between instructions for PHP 5, PHP 7, PHP 8, and so on. Grrr again, but now I can get PHP running in HTML files.

But my go-to editor of late, Bluefish, won't highlight PHP in an HTML file. At least I haven't found a setting to make it do so. more grrr. So I have of course run into mismatched braces and parentheses aplenty. I remember fishing for such mismatches WAY back in my undergrad stuff, but that was with 1990-vintage IDEs, so that's the feel I'm getting.

But I have it working! So far! Fingers crossed!

[reader50]

I use BBEdit for coding. Used their TextWrangler app until it broke after Mojave. Both are free, and do PHP highlighting. BBEdit disables some features after the free evaluation period, but nothing that affects my uses. It even does brackets auto-complete. I haven't decided yet if that helps or annoys me.

[ghporter]

Bluefish auto-completes parentheses and brackets, which is annoying.

I'm trying to keep my web editing on Linux. That keeps me from having to transfer files, etc. I'm going to be searching for a PHP+HTML friendly editor for Linux, in all of that copious free time I enjoy right now.

[ghporter]

I found a decent, Linux-based editor: Geany.

It’s not flashy, but it highlights stuff for me, like PHP tags, along with HTML tags, brackets, parentheses, and so on. So I’m cleaning up a couple of files because now I can see what I’m doing.

[ghporter]

OK, I have a real success story here.

Here’s a PHP-based version of the same demo. It’s smaller and quicker, and the coolest part is all I had to do was replace the block of hard-coded HTML file specs with a smallish chunk of PHP code.

Here’s a link to download a zipped copy of the “index.php” file.

It still depends on some Javascript to switch from one slide to the next, but I hope to come up with PHP code to replace that some time soon. Just because I want to, not because I need to avoid JS for my purposes.

And I’m also going to investigate using PHP to automatically scale my 6000x4000 original images. I have an awful lot of them, and if I can get them scaled automatically, that would be a huge bonus.

This project has made me want to explore PHP more. Like, would it be possible to “call” a PHP page, pass it a folder name, and have that completely eliminate the manual coding for each slideshow?

Also I’m thinking I should write a program/PHP page that does the scaling ahead of time - which would create a new folder containing the scaled images. Someone mentioned not losing the highest quality versions of the images so viewers could zoom in to see if Aunt Gladys was really wearing Gramma Sara’s brooch. Having a separate folder of faster loading, good quality images for the slideshow would make viewing the stuff easier, and maybe I could also make each scaled image a link to the enormous version.

[ghporter]

Here’s a really late update…

I’m using Javascript to grab the client browser’s window size, then setting the height of the image based on that (sort of “window height - title height - fudge factor”). It not only works well, but it gave me the idea to start capturing each client’s window dimensions in a database. This will give me an idea of the maximum height the files need to be, so I can go through and resize the JPEGs (from 6000x4000 pixels in some cases) to that height.

MySQL turned out to be easier to use than I’d expected. At first I was using MySQL Workbench, but later I found Webmin, which makes managing MySQL, Apache, and a lot of other stuff much simpler. I’m glad for the Workbench experience, but for the kinds of things I am doing, Workbench feels like overkill.

Most of my prior HTML experience had been with HTML 3, so I chose to start developing all of this with HTML 4. Now that I have much of the functionality for the site established, I have been going through the code page by page and cleaning up form and comments. While I was doing that I noticed one page wasn’t doing what I wanted…it turned out that a function I’d written had a typo that didn’t show up until later. So a couple of days ago I started looking at code validation.

On the way to validation, I came across “HTML Tidy”. It’s been helpful, especially with pages that I revised several times. Just the way it helps with indentation has been great, making my code a lot easier to read, but it also has pointed out where I copied examples from the Web that weren’t well written (or were actually ancient and kinda-sorta complied with HTML 3, maybe?). So far, so good.

Validation tools seem to be almost all aimed at world-facing pages, not internal pages. One tool, v.NU, is supposed to let you run it locally, but I’m still wrestling with that. The W3C Validator is also supposed to have a version that you run on your server, but so far all I’ve been able to get it to do is hook me up to the W3C validator web site.

This project has been both challenging and rewarding, and every new bit repeats that experience.

[reader50]

My effort on your behalf petered out after you got something working. Ask if you have specific questions of course. I used phpmyadmin for SQL access, and did try tidy. But I gradually got anal about my indentations, and tidy didn't always agree with my preferences.

[ghporter]

I hear you about tidy. Its defaults aren't ideal from my point of view either. One thing though was that it did make my chaotic indentation consistent. With a little experience, I expect to tweak its configuration to make such things more to my liking.

I'd really like to get Validator working on my Linux server, but I haven't figured out how to run it yet. There's a bunch of documentation but it doesn't always make a bunch of sense. I may wind up haunting the W3C forums to see if I can pick up what it is that I'm missing. I have managed to get v.NU to work - it's a jar file, and the challenge was figuring out how to tell Java where the jar file was, and then tell it what file to check.

I was floored at how easy some parts of what I've done were. And stymied by how some things that I figured should be simple wound up being really hard. Starting out with how important the order you link different CSS files is.