You don't need to be an 'investor' to invest in Singletrack: 6 days left: 95% of target - Find out more
I have a website with a directory for dumping the odd image in, for zoom meetings etc so I can give people a quick link.
I have a simple (not for me) bit code that I was helped with at Stackoverflow. Got my head kicked in over there :-(.
The code displays the images perfectly and sorted as server modified date. Great.
But what I cant work out is how to make really large images render smaller or automatically scale to the screen size.
Any coding gods here that could shed some light on the code or tell me what and how to add.
I assume its something todo with the Echo part.
Example
https://www.sidingstudios.com/mtb/
PHP Code of Index File
<?php
$files = glob('img/*');
$output = [];
foreach ($files as $f)
{
$output[filemtime($f)] = $f;
}
ksort($output);
$images = array_reverse($output);
foreach ($images as $image)
{
echo '<br />';
}
?>
This hopefully simple bit code operates bit like a Instagram layout without the comments etc. I just want my images on my server.
Trying to display code on this forum.
The right way to do it would be to scale the images when you upload them to the directory with the ImageMagik library. However bandwidth is cheap these days, so big images are probably not as much of a problem.
Can you set a max-width on img tags with CSS on your page?
@toby
Just looking to use the index.php and leave in the given directory. I just upload to that directory using Rightload on the PC and AntFTP on the phone.
Fire and Forget, delete images at a later date. Sometimes I hav'nt got the time to go resizing.
Can the max width be set in the code above ?
Depends what you want to achieve by resizing as to where you do the resizing client side or server side? Server side achieves smaller downloads for client, client side achieves simpler code for you. None of it's going to be anywhere near as simple as that code up there though.
It's just for personnel use. The img directory will be deleted every now and again via FTP.
Just uploaded a large image as a demo. Looking to get the Bob Ross image to scale smaller or force to max width somehow.
@sirromj Thanks. If its to complex, I will stay with the code above and live with large images. Hoping it was going to something simple with the Echo. If not, so be it.
Add width and height to img tag
so width=“500px” for example
If you use CSS max-width, it won't try and upscale images that are already small, and if you just set the width (ignoring the height) it should preserve the aspect ratio of each image. So in the code above, I'd add style="max-width: 200px;" to the echo on line 15 between the 'img' and the 'src=...' parts.
Edit to add: obviously, you can tweak the 200 number in that to get an appropriate width for what you're trying to achieve.
?
style=”max-width: 200px;
echo '<img_style=”max-width: 200px; src="' . $image . '"><br />';
No underscore between "img" and "style", Also your quotes aren't balanced. Try this
echo ‘<br />’;
AAgh! the forum messed things up. Had to add a space after the <
echo ‘< img style=”max-width: 200px" src=”‘ . $image . ‘”>< br />’;
That works, awesome 🙂 Just what I'm after.
https://www.sidingstudios.com/mtb/
Thanks for your help guys 🙂
🙂
PS When I copied in your code, the apostrophies seemed to cock it up, made them look like the orginal code and all was good.
PPS All I want now is the ability to delete, an admin area, likes and share options, displaying file name and avatars all in the same one file ;-). Basically and Instagram Clone in one file. ONLY KIDDING.
Thanks again guys.
I've killed it 🙁
But I'm it will work again somehow 🙂
Getting there 🙂
https://www.sidingstudios.com/mtb/
Speech marks seemed to be a problem.
How do I hide the <br/>
RT
Remove the spaces.
<br> Not < br />
The slash you shouldn't need either. It's legacy from xhtml days.
Use % rather than px and it’ll make full use of your browser/device width… responsive layout on the cheap.
@buthcher
That worked nicely.
@kelvin
That looks very nice now.
https://www.sidingstudios.com/mtb/
Might go back to the grid layout. But I now have options 🙂
Thanks again everyone.
Who needs Instagram 😉 with this code.
Might go back to the grid layout.
Do both. Make it 50% and you’ll have at least two on row… 33% and you’ll have at least three… etc.
Even better. Thanks.
I wish I could code. But I'm learning now 🙂
Changed to 50% but still getting just a column. Is it something to do with the <BR> ?
https://www.sidingstudios.com/mtb/
Yup, remove them. They 'break' the line.
Thanks again.
I'll play with that later. Got a fencing panel to install now.
The bit of code could be bigger than Instagram 😉
Could'nt not resist. All works like a treat now. Just what I was looking for.
Well chuffed,easy to please.
RT
https://www.sidingstudios.com/mtb/
PS If anyone wants the file here is a link.
PS Change TXT to PHP. I'm sure there is a better was to do this for downloading, but there it is. Sorry about REMS. I just wanted to keep a record.
Might try and make the images linked in the future. But it works now and I'm well happy.
Must go now, its nearly 09:00.