▼
Streaming live at 10am (PST)

Designhelp with a gallery layout

Design help General
#1

hello
is there any chance that you can help med with one small thing.

In this design go to this page
“Inspirationsgalleri bilder”
and you will se 6 images.
the last one is horisontal and dont fill the box.
Yes i know i coluld use background. but im makeing a gallery and need to use images as img-tag
i dont whant to stretch the image, but i want to fill the box.
I have user overflow=hidden on the height but this is only working och standing/vertical images
i would like this work also on the width.

i have used a custom code but this only stretches the images. not nice.

the box is 300x300
is there any technique to center the image and have it big enouge to fill up the box.
se red-dotts in the attatchment.

Any advice ?:slight_smile:

Here is the preview
https://preview.webflow.com/preview/magnussons22015601?preview=ca2d9f0a404e0d550553114dc2e6bf2f

gallery.JPG1081×900 145 KB

#2

Yep. When you want to do that you need 3 elements: the box you already have: set it to 300px height straight. The image you already have: remove any height or width or dimension values.

Now add a div in the box and call it imgcont. Put the image in it. Now change the size of this div. As your image is bigger, it will always fill it.

I did that:

By the way, you’re using 1200px images for 300px illustrations on the site, this is not good :slight_smile: Make 300px images and for this size this should weight under 40ko.

#3

Thanks for this! I will try this.
The images is just for testing, not for use in the real site. but thanks for the advice anyway :smile:

#4

i tried this now, and it works almost as i want to. but.
if you put that divbox (imgcont) to the other images. they will also be modifed.
and then looses its “center” .
do i make me understood in my bad english? :smile:

#5

Doohh, ofcourse… the images is 1200px… thats why the images looses its “center”, ther are to big for 300px box

im slow today :wink:

#6

you can still add a class for each to edit their center.

#7

is there any way to focus the image from bottom left corner , instead of top left corner?
i have position set to realtive and tried bottom left corner, but no luck.

#8

Wich one? If you want to position a thing, the parent must be positioned too for reference… a “relative” does the trick.

#9

i gave imgcont relative also, and also the galleryImage to realtive and bottom left corner.
Doesnt hlp. did also set the imgcont to bottom left corner, still no luck.

#10

I would say that your best bet in this case is to crop the images to 300x300 px from the start. That way you get perfect control over the look, and better performance. The other solution is to, as @vincent said, add a sub-class to each of the images and edit their offset values individually. Not optimal in my opinion though since it is not very scalable. If you wanted to add more images later, each one would have to have its own subclass and that gets unwieldy quickly… :smile:

#11

yes it would be optimal if i could have all images 300x300. the problem there is no imageshadeler that can crop on the fly when upload. then i have uset that. thats why im trying to manage it with css and “crop” it in a container. and its a gallery and dynamic so i cant give every image its own subclass. every image must share :smile:
so if i only could show from bottom left instead top left, i would be so greatful!

#12

Hi @patrik, there are many good free tools as well, that you can use for image optimization before you upload to Webflow: Best Image Optimization Tools

I hope this helps :slight_smile: One thing you could do, is create a nice 300x300 pic thumbnail image leading to larger sized images in a lightbox :slight_smile: Cheers, Dave

#13

Hi @cyberdave, yes i know. but, im not administrator of this site when its done. Its a “no knowledge customer” that will upload images :smile:
So it has to be dumb-safe :smile:

i will take to the webhotel and se what they can do with at image-handling component.

#14

Hi @patrik, thanks for the update. We do not --yet-- have client editing of sites, i.e. the owner of the site in Webflow is the one who edits the site and uploads those images. When we add client side editing, we will certainly keep this in mind when updates are made :slight_smile:

If you can help to describe how you want it to work on wish list, we can use that as feedback during the development :slight_smile: More info on our Wish List here: Guidelines for posting to the Wish List category

Cheers, Dave

1 Like
#15

@cyberdave, you are missunderstanding me :smile:
I put this site to my own CMS and let the client upload images to the gallery throu that CMS.
that CMS in on a webhotell that not have any imagemanipulation-component that crops. only resize.
Please understand my bad english and description. :smile:

The site i make in webflow i export and connect it to my CMS.
i never let the client use webflow.
The gallery is made by the client its self by uploading images to a database (mySQL)
and then i loop that out to webflow gallery.
the images is sometime standing, and cant be 300x300. and sometimes horizontal. and thats why also it cant be 300x300, that the images will be stretched and looses its aspect ratio in some way.

Thats why i want to use the overflow in the container so the containter can be 300x300 and any image can be what ever size. but overflows is hidden. so its never loses it aspect.
And thats why i want to view the images from bottom left instead of top left. because of details mostly is more in the bottom of pictures.

I never let the client to redesign when the site is done. but ad images/pictures and edit text, thats ok, via my CMS. becouse that content is in mysql. :smile:

was this understandable ? :smile:

#16

Hi @patrik, thanks for the update :slight_smile: Yes that part definitely helps to explain in greater detail :slight_smile: So may I ask, you want a div that is 300x300 and any image placed in that div is cropped to 300x300? Is that correct? Cheers, Dave

#17

Pjuh :smile:
Google translate at is best :smile:

Yes, we can call i crop , but this has i already managed to do. now my only thing left is to have the image to view bottom left corner instead as default top left corner

#18