Hi, I’m trying to create a responsive website for my wife’s paintings.
I have a mixture of canvas / jpegs shapes and sizes. For a responsive design I need to specify position and size per image per screen size, also portrate / landscape for mobile.
What is the best way to approach this problem? - or maybe it’s not a problem!
Happy with PHP, CSS solutions.
Thanks for any help
I’m not 100% sure, but I think CSS FlexGrid can handle that.
This is setting an impossible task, there are so many screen sizes in the world already and the number is growing, then x2 for orientation. Then multiply with the number of different size and aspect pictures.
Don’t go there!
The way to handle it is forget screen sizes, make your page fluid, then it will fit anything. Though it will help if one dimension of the picture is fixed, but it keeps its aspect ratio.
This example with “flex” I did some time ago, the thumbnails have a uniform height, but the aspect ratios vary the width.
This one uses columns and instead the width is fixed, but the heights vary to cope with different aspects.
The topic it relates to is linked at the bottom.
3 Likes
Hi John, yes I looked at your suggestion, but as Sam pointed out there’s to many variables and I’m more comfortable with a css solution.
Thanks
Hi, is this what you mean, do you have experience with it? So many of these frameworks around like to hear some recommendations before I try one.
I was referring to this tutorial: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout. I’m still learning. Grid is an approved part of CSS.
1 Like
No for a responsive design you probably would not do any of those rigid techniques at all.
Sam had given you some good ideas to look at.
The basics are that you create a fluid layout without rigid position or sizing and let the images adapt to the screen size as required. Of course it can be as complex as you want if you need to cater for ‘art direction’ or hi res double density images and then you should look at the picture element or srcset (but it’s not for the faint-hearted I’m afraid. ).
CSS grid is a layout mechanism for laying out content on a page. It is not specifically meant for images although you can create a grid of images using it. You can do similar with flexbox or indeed other simpler techniques but it all depends on the criteria involved.
Without a demo of what you have so far and what you are working towards its hard to give specific advice but you should try and simplify your requirements into a manageable system. Don’t position things with hard fixed margins or absolute/relative positioning but create natural alignments through flexbox or indeed grid. Allow the images to grow and shrink (within limits) and control their position as mentioned above with correct structures and media queries where the display needs to change.
If you can describe how you would like them to look then maybe we can give you a starting point or at least say what or what is not viable.
1 Like
What I did for my gallery was crop a square from the centre of the photo; resize and used that as a standard size thumbnail. It works quite well and gives a neat layout and generally there is a good idea of what the full sized image contains. This can easily be done automatically using Imagemagick on upload.
I did consider trying to find the area with most detail in and automatically crop around that but it is a bit beyond my skills and the centre crop works most of the time.
3 Likes
This can also be acheived with CSS alone, with no need to do any image editing or saving different versions.
I have done this using the object-fit: cover property and a set size.
On the down side, you don’t get art direction, on the part to crop. If the original is large, you may want separate, smaller thumbnail versions, to only load hi-res on demand.
Though if they are not far apart in size, you may gain by not needing to cache two versions of the same image.
1 Like
I have just remembered on my previous gallery I resized the photo to fit on a standard coloured background ( could be transparent ) and composed them into one. This also gave a nice easy layout.
Hi,
A couple of screen shots of what I’m trying to do. Like images to adjust to device’s screen size.
Thanks for any help
I’ll try again with an Online Demo
PHP source script:
<?php declare(strict_types=1);
$tmp = 'https://sea2.discourse-cdn.com/sitepoint/community/user_avatar/www.sitepoint.com/john_betong/45/38544_2.png';
$aImgs = [
'SitePoint logo' => $tmp ,
'Oil minature 1' => '3-1-main.jpg',
'Animated log' => 'jb_in_shorts.gif',
'The Storm Clears' => '3-12-main.jpg',
];
$images = '';
foreach ($aImgs as $key => $img) :
$dims = getimagesize($img);
$dims = $dims[3]; // width=??? height=???
$images .= "\n" .'<div class="wrp">';
$images .= '<h2 class="tal">' .$key ."</h2>\n";
$images .= '<p class="tac wrp">';
$images .='<img src="' .$img . '" ' .$dims .' alt="#">';
$images .= "</p>\n <br>";
$images .='</div>';
endforeach;
?><!doctype html>
<html lang="en">
<head>
<title> title goes here </title>
<style>
body {background-color: #CFB789;}
img,
div {border-radius: 0.88em;}
img {max-width: 88%; height:auto;}
.mga {margin: 2em auto;}
.tac {text-align: center;} .tal {text-align: left;}
.w88 {width: 88%; max-width: 1024px;}
.wrp {background-color: #fffbbf; margin: 4.2em;}
</style>
</head>
<body>
<div class="w88 mga tac">
<h1 class="tal"> title goes here </h1>
<?= $images ?>
</div>
</body>
</html>
The script:
- has four images in an array
- extra images can be easily added or URL links to images
- array is parsed and
a. image width and height extracted
b. dimensions are added to the image
c. HTML script created - web-page is fully responsive and is even Google Mobile Friendly
Edit:
W3.org Validations:
So you only have a single column, not rows like my thumbnail galleries.
That makes it very easy.
All you need to make images fluid is this:-
img {
max-width: 100%;
height: auto;
}
The max-width means the width of the image will never exceed the width of its container. So assuming that the container is fluid (block elements are by default) it will not exceed the screen width. Margins/padding on the container will provide a gutter.
Some may use width instead of max-width, but that can result in the image width going above its intrinsic pixel size, which can get ugly, so I prefer max-width.
The height: auto property ensures it maintains its aspect ratio as the width changes on smaller screens.
Example:-
2 Likes
To make it more of a challenge, I have done a fork of that pen where I try to fit the picture fully on the screen in both dimensions, so I constrained the height too.
I did this with the object-fit: contain property and a max-height constrained with vh units.
.gallery img {
/*box-shadow: 6px 6px 8px rgba(0,0,0,0.4);*/
object-fit: contain;
max-height: 90vh;
}
Just one drawback, it does not play nice with the box-shadow effect (commented out).
I have yet to think of a solution for that, but I have set a challenge… 
2 Likes
You could try move the object-fit declaration to the figure rule. 
Should have mentioned the image also needs an auto width to keep its ratio. 
1 Like
If I do that, it squashes the images, if i move the max-height too I get overlapping images.
I did initially put the height constraint on the figure but that made the same oversize image overlap problem.
I’m not keen on how object-fit works, I would prefer if it worked on a parent - child basis, where you make a child fit the parent.
But you actually have to apply it to the image itself, so it fits itself with the size you give it.
That did it.
1 Like