How to display images?


#1

I have 5 product images and they all need to display near the top of my clients homepage. I initially thought of doing a slideshow and rotate through all 5 but I don’t like the thought of them not all displaying at once. The photos are portrait and around 2:1 width-to-height ratio. So they are pretty tall for a portrait-orientation image, but I can crop a tiny bit if needed.

What are some ways I can display these images? It’s just static images.


#2

Hi, Ryan.

I played with header layouts using 5 1:2 images and concluded that 5 images in a row worked best. They scaled together and remained adequately distinct at smartphone widths. The aspect ratio of 5 images across the top of the page worked out to 48:19 in my layout and was visually easy to follow - did not look like screen clutter. Simple, functional, not fancy. Guess it depends of the image detail needed to represent each product.


#3

I’ve misspoken. The images are actually landscape not portrait. Can I claim it as a senior moment yet?

I say that because I’m not sure 5 landscape-ish images willl look all that good side-by-side in a row.


#4

I’m sorta glad to hear that. The layout seemed too easy. 5 static landscape images is definitely more challenging. Sounds like a bit of animation would help, if permissible. I’ll get back with you in a while.

:nono: Not qualified. :tongue:


#5

Then I’ll pull the millenial card and say it was an ADD moment :smiley: .


#6

I’ll take an ADHD moment anytime before settling for the pasture. :winky:

How about something like 5 images near the top (4 smalls and 1 larger)?
The layout is easily done with foreground or background images
Fully responsive w/o breakpoints.
JS reqd. Click small image to swap with larger image. Clicking larger image does nothing.

A couple of possible layouts

5-images-at-top-of-page%3DRyanReese

It’s just a screenshot because I don’t know if you are still interested… and… someone else will have to write the JS (sorry, not my skill).


#7

I saw this post but for some reason I thought it was for another person. Sorry about that.

The 5 images are…

  1. An image with a red backround that has instructions in the image
  2. Image showing the product.
  3. Image in the hand of someone.
  4. Tool with an accessory included in it
  5. Toolbox (separate product that can hold many of said tools)

I’m thinking of going with option B of what you posted. Image A can be instructions, and then BCDE can be whatever I feel like putting in there. Easy to make it responsive…probably just going to stack it in some fashion.

I’ll try that tonight :slight_smile: . Thanks Ron. These are good ideas.


#8

I absolutely love this, and I skimmed over it in my first reply. Any ideas on how to get users to actually click the images besides just relying on the cursor?

Visual clues?


#9

It’s useful to know the context of the pictures. I wasn’t sure if it were the case or not that the pictured should be equal and hold the same weight in the design, or whether it would be OK for one or two of the images to take precedence and be larger than the others.
Keeping them equal would be a challenge with 5 being a difficult number when you wrap to new lines/columns, it does not divide by anything. Having one or two larger images gives you a lot more scope for a neat design.

Hover effects are an obvious idea, but no good on touch screen. Maybe some animated effect to make it look “live” not static. But probably keep it subtle and slow so it isn’t distracting and annoying, which continuous movement can be.

Could probably be hacked with :target/checkbox/radio along with flex/grid: order but JS is probably best for this.


#10

@RyanReese,

Do you want to use foreground or background images?

(The images must have the same aspect ratio.)


#11

A note that says “click a thumb for a larger view”?

I believe that foreground images would be more semantically appropriate.
@coothead wrote the JS for this demo. See what you think.

No extra charge for the images :winky:

swap-images-fg-working.zip (300.8 KB)


#12

Image zoom-on-hover effect?

https://codepen.io/gandalf458/pen/PdrOEN - doesn’t have a link but that could be added…

Edit: I’ve added an anchor tag for the sake of completeness.


#13

Right, that’s what I’m not sure about because I was thinking of getting a visual clue on top of a hover effect. So you open the page and you instantly can tell there is something you can do to interact with the images.

Useful! Thank you!

I’ll probably do background images for this and crop where needed since the images have a center focal point and I can easily crop out the sides and maintain the essence of the image. But I’ll keep images in the HTML itself and hide them.

Nice! I’ll add that to Ron/Cootheads code. Thanks!


#14

background images

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>swap images bg = coothead</title>
<!--
https://www.sitepoint.com/community/t/js-lesson/307282/
onClick, swap bg images
code mostly by coothead.
-->
    <style>
html {
    box-sizing:border-box;
}
*, *::before, *::after {
    box-sizing:inherit;
}
body {
    background-color:#f9f9f9;
    font:100% / 162% Pverdana,arial,helvetica,sans-serif;
}
.container {  
    display:flex; 
    border:0.375vw solid #fdb;
}
.container div {
    background-size:100% auto;
}
#main {
    width:50%;
    padding-top:33.33%;
    border:0.375vw solid #fdb;
    background-image:url("https://via.placeholder.com/900x600?text=A");
}
.thumb1,.thumb2 {
    width:25%;
}
.thumb1 div, 
.thumb2 div {
    padding-top:66.67%;
    border:0.375vw solid #fdb;
    cursor:pointer;
}
.thumb1 div:first-child {
    background-image:url("https://via.placeholder.com/900x600?text=B");
}
.thumb1 div:last-child {
    background-image:url("https://via.placeholder.com/900x600?text=C");
}
.thumb2 div:first-child {
    background-image:url("https://via.placeholder.com/900x600?text=D");
}
.thumb2 div:last-child {
    background-image:url("https://via.placeholder.com/900x600?text=E");
}
    </style>
</head>
<body>
 
<div class="container">
    <div id="main"></div>
    <div class="thumb1">
        <div id="b"></div>
        <div id="c"></div>
    </div>
    <div class="thumb2">
        <div id="d"></div>
        <div id="e"></div>
    </div>
</div>

<script>
( function( w, d ) {
    'use strict';
/*  put the "thumbs" ids in an array */
    var ids = [ 'b', 'c', 'd', 'e' ], 
        temp,
        main = d.getElementById( 'main' );
/*  add event handler to each "thumb" */
    ids.forEach(function( id ) {
        d.getElementById( id ).addEventListener( 'click', 
        function() {
/* add "main's" back-ground-image to temp */
            temp= w.getComputedStyle( main ).getPropertyValue( 'background-image' );
/* change *main's" back-ground-image to clicked "thumb's" back-ground-image */
            main.style.backgroundImage = w.getComputedStyle( this ).getPropertyValue( 'background-image' );
/* change clicked "thumb's" back-ground-image to *main's"  back-ground-image -( temp ) */
            this.style.backgroundImage = temp;
        });
    });
}( window, document ));
</script>

</body>
</html>

I may be showing my age but I often put a prominent outline around objects that are clickable… no hovering required to spot the outline. I am not a fan of that zoom effect or of a litebox shading over images on hover. Those are my prefs, though.


#15

Finished it and it’s beautiful (imo). Thanks a lot everyone!


#16

Cool, almost… :shifty:

Could you show us “working page” that simulates your finished product (I assume the actual page private)?

I’d enjoy seeing what you did. :sunglasses:


#18

I could say for sure if I would see the photos. I think you can find a way out by placing your photos in the background. You should further consider the design of the text and other elements so that the photos are visible.