Logic to make logos match size


#1

So I have a sponsor logo area on the site i’m working on and i’m wondering what the best way to do this is. It’s the age old problem of some of them being big and square and some being wide and short. I know Kirby can give me the widths and heights of images, but how would go about checking the width and height and making sure they are all the same height with the logo width being auto width?

I think I need to check for the longest edge and then add either a “tall-logo”, “wide-logo” or “square-logo” to it accordingly. Then i can do the scaling in CSS.


#2

Couple of solutions I can think of.

If you have control over the logs you can use svgs and view box size to try make them look similar.
That’s what I did here https://minimalissimo.com (you can see the 5 logos in the footer)

Another option could be to size the container and apply the logos as background images and use background-size:contain

Logos has always been and will always be a problem to align visually because as you said they come in all shapes and forms so no solution is gonna be perfect.

Also, if background images are not an option you can try use object-fit


#3

Thanks for the suggestions. I have already tried the background-size and object-fit options, but it happens on all logos, and there is still a big difference in scale between them. i think if i can add those three classes to them, i can even them out in finer detail.

I know i could put custom fields in the file meta to add the class, but I prefer to automate as much as possible to avoid over complicating the UI.


#4

Then why not use a hook that checks the image dimensions on upload and adds a class based on this data in the meta data automatically?


#5

If you have logos in all shapes and forms then yes, adding a couple of classes is probably the best solution. Either on the template or using a hook as @texnixe suggested.

Logos are such a pain…