Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Sizing an Image to Fit Viewport Height - Now PHP to Automate Image Sizing etc.

Sizing an Image to Fit Viewport Height - Now PHP to Automate Image Sizing etc.
Thread Tools
ghporter
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Aug 20, 2023, 03:02 PM
 
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.

Glenn -----OTR/L, MOT, Tx
     
ghporter  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Aug 24, 2023, 08:48 PM
 
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?

Glenn -----OTR/L, MOT, Tx
     
reader50
Administrator
Join Date: Jun 2000
Location: California
Status: Offline
Reply With Quote
Aug 24, 2023, 09:53 PM
 
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  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Aug 25, 2023, 12:40 AM
 
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.

Glenn -----OTR/L, MOT, Tx
     
andi*pandi
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Aug 31, 2023, 01:07 PM
 
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  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Aug 31, 2023, 05:19 PM
 
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.

Glenn -----OTR/L, MOT, Tx
     
reader50
Administrator
Join Date: Jun 2000
Location: California
Status: Offline
Reply With Quote
Aug 31, 2023, 07:11 PM
 
Originally Posted by ghporter View Post
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  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 13, 2023, 11:02 AM
 
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.

Glenn -----OTR/L, MOT, Tx
     
reader50
Administrator
Join Date: Jun 2000
Location: California
Status: Offline
Reply With Quote
Sep 13, 2023, 12:06 PM
 
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  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 14, 2023, 04:11 PM
 
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.

Glenn -----OTR/L, MOT, Tx
     
reader50
Administrator
Join Date: Jun 2000
Location: California
Status: Offline
Reply With Quote
Sep 14, 2023, 06:03 PM
 
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  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 14, 2023, 09:27 PM
 
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.

Glenn -----OTR/L, MOT, Tx
     
reader50
Administrator
Join Date: Jun 2000
Location: California
Status: Offline
Reply With Quote
Sep 14, 2023, 11:34 PM
 
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  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 15, 2023, 01:26 AM
 
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.

Glenn -----OTR/L, MOT, Tx
     
andi*pandi
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Sep 15, 2023, 05:00 PM
 
I should've told you to look into lightbox JavaScripts...
     
ghporter  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 15, 2023, 06:27 PM
 
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.

Glenn -----OTR/L, MOT, Tx
     
reader50
Administrator
Join Date: Jun 2000
Location: California
Status: Offline
Reply With Quote
Sep 15, 2023, 07:06 PM
 
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  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 15, 2023, 08:19 PM
 
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.

Glenn -----OTR/L, MOT, Tx
     
ghporter  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 15, 2023, 08:55 PM
 
I am learning... PHP feels pretty close to C, much like Java/Javascript does, except PHP looks to be more flexible and powerful. Nice.

Glenn -----OTR/L, MOT, Tx
     
ghporter  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 16, 2023, 11:24 AM
 
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.

Glenn -----OTR/L, MOT, Tx
     
reader50
Administrator
Join Date: Jun 2000
Location: California
Status: Offline
Reply With Quote
Sep 17, 2023, 03:24 AM
 
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  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 17, 2023, 04:42 PM
 
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.

Glenn -----OTR/L, MOT, Tx
     
ghporter  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 21, 2023, 10:36 AM
 
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>

Glenn -----OTR/L, MOT, Tx
     
reader50
Administrator
Join Date: Jun 2000
Location: California
Status: Offline
Reply With Quote
Sep 21, 2023, 11:47 AM
 
Might be an Apache setting on your system. Where PHP is only active if the filename ends in .php
     
ghporter  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 21, 2023, 02:01 PM
 
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.

Glenn -----OTR/L, MOT, Tx
     
ghporter  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 21, 2023, 04:18 PM
 
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!

Glenn -----OTR/L, MOT, Tx
     
reader50
Administrator
Join Date: Jun 2000
Location: California
Status: Offline
Reply With Quote
Sep 21, 2023, 05:04 PM
 
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  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 21, 2023, 05:45 PM
 
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.

Glenn -----OTR/L, MOT, Tx
     
ghporter  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 23, 2023, 02:02 PM
 
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.

Glenn -----OTR/L, MOT, Tx
     
ghporter  (op)
Administrator
Join Date: Apr 2001
Location: San Antonio TX USA
Status: Offline
Reply With Quote
Sep 24, 2023, 11:58 AM
 
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.

Glenn -----OTR/L, MOT, Tx
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 08:24 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,