Adding multiple images

User 2765857 Photo


Registered User
614 posts

Hello all - Slowly learning CFF and it is really a great program thank you CC.

Ok question - if I want to add multiple images on a page do I add row than add a container ? If I want to add a total of say 9 images what is the best way to add to make it responsive :rolleyes: I have no problem adding if only 12 span but want to have it when it goes larger to have 2 images in row and than desk top to have 3 images in a row, and all 3 rows would have 3 each for a total of 9 images.
Do I use sub-grid ?
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I have a gallery with 8 images on the site in my signature (summer page). The images have a small title below them. So I have that column that I give classes like .small-up-2 and .medium-up-3 and large-up-4. inside that column I pop 8 containers, and in each of them an image and a small heading. The images need to have a max width. The positioning is done in flex.

In your case I would remove the medium class and change the large one to .large-up-3.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2765857 Photo


Registered User
614 posts

Inger wrote:
I have a gallery with 8 images on the site in my signature (summer page). The images have a small title below them. So I have that column that I give classes like .small-up-2 and .medium-up-3 and large-up-4. inside that column I pop 8 containers, and in each of them an image and a small heading. The images need to have a max width. The positioning is done in flex.

In your case I would remove the medium class and change the large one to .large-up-3.


Thank you Inger for ur reply But first What a Great site you have you really did a fantastic job.

The way you have the images on the Summer page is what I hoping to do except on small 440 px I would want all 9 in 12 span with small heading under each. I will try to implement what you wrote tomorrow -should be interesting :|
A Big New Jersey Thank You
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 2765857 Photo


Registered User
614 posts

Inger thanks for trying to help but after working on trying to get the images like you have on the Sumner page I gave up I think it is the Flex I cannot get. Will just have to keep in 2 col until I learn more.
Thanks again.
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Here are the flex and margin settings I used:

The column: Display flex, then down the list: row, wrap, center, stretch, stretch. All the way from small to large.
The containers: Display flex, then column, no-wrap, center, center, stretch. At some larger breakpoint I adjusted it to
column, no-wrap, flex-start, center, flex-start.
The images: display block, width 100%, started 150px max-width, then increased to 250 and 320. It will be up to you how wide you want the images.
The title: display block, header 5, started at 14px font size, increased to 16px
Margins on the containers: 2px bottom margin at larger br.points
Margins on pictures: 5, 5, 15, 5 (top-right-bottom-left), increased to 10, 10, 15, 10.
Margins on titles: 8px (0.5 rem) bottom.

Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,782 posts
Online Now

Ray wrote:
Inger thanks for trying to help but after working on trying to get the images like you have on the Sumner page I gave up I think it is the Flex I cannot get. Will just have to keep in 2 col until I learn more.
Thanks again.
Ray


Hi Ray from Sunny Bali
What is the MAX-WIDTH of the row ?
What size are the images you want display ?

At the lower end to put 2 images on the top, then 1 image underneith (all in the same column is going to take some jiggery pockery,,
consider having the 3 images stacked (centered) for each column.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

Have a look at this see if it's something like what you are after (image size matters a bit)

http://balismartproperty.coffeecup.com/storage/images-multiple.wmv
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

It's a bit difficult to understand your video. Do you have three containers, each with 3 images, and those containers are set to display column on small screens?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,782 posts
Online Now

Inger wrote:
It's a bit difficult to understand your video. Do you have three containers, each with 3 images, and those containers are set to display column on small screens?


You aren't meant to understand it just look at it....... if it looks like that is what you want then I will make one showing the process (not going to make a video if it's not what he wanted as far as layout is concerned)

Here is another one with a slightly different layout this one doesn't use FLEXING at all

http://balismartproperty.coffeecup.com/storage/multiple-images-no-flexing.wmv
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

The first video is just 3 columns each with 3 images (auto centered left right)

each column is set
position = flex
display = row
wrap = wrap (at lower points where only 2 images on top & 1 underneath)
justify = space around
items = center
contents = stretch
the images are set to 50% width

at the point where you want all 3 images in a row
column is same except change wrap to no-wrap and items to flex-start

change width of images to whatever you desire as can be fitted onto the column

The second example is just using 9 columns each with an image auto centered as normal (left/right auto:
no flexing

at lower end each column is set to 6 spans except the last one which is set to 12 spans

where you want 3 images in a row set the column width to 4 spans each (adjust image width accordingly as you please
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.