Photo Grid Layout using CSS Grid. (how to deal with photos that have different dimensions?)

1

I am following this tutorial for making a photo grid layout using CSS grid,. (https://scrimba.com/g/gR8PTE)

It is great and all and I have successfully created the layout on code pen. here is mine (fixed link)

But one thing I am not sure is that are all the image he used in the video have a universal size?
I cannot get access to the original files that are listed there. I can only guess.

image
image310Ă—893 87.1 KB

And what if all the photos are having different dimensions?

Just like this in google photo:

gooogle photo
gooogle photo2268Ă—1052 1.26 MB

How do I achieve the same effect?

TLDR: how do I make this image gallery I have look like google photo? If so how to do it?

3

I fixed it. thanks for notifying me.

5

video 8, an awesome image grid.

6

@zhouxiang19910319 Video 20 of CSSGrid.io shows a way to do this.

1 Like
7

Well, it doesn’t seem like you’ve set the images’ dimensions yet. Try giving them a width and height of 100%.

1 Like
8

I’ve done this sort of thing for a client, I need to be able to display the photo a consistent size on the homepage, but I have no control over the dimension of the photo they have (photos come in at various sizes/dimensions since they’re a news organization).

One thing you can do is have an outer div, and inside this div place your image.
The outer div will have a set fixed height, and an overflow: hidden property. Any image that is taller than the div will be truncated.
The image is displayed at 100% width so it fills the whole width of the div (and at the same time, it’s also resized on the display device). The “extra” image if the photo is taller than the div height is just hidden away.

Again, the CSS-only solution just hides the image and does not necessarily resize the photo.

If you really want to resize the photos to have a fixed width/height, you need to use an image library.

On the image library I’m using, I can explicitly set the width and height of image, and crop, stretch, or pad it.

resizing-modes.png906Ă—290 120 KB

You can combine the above CSS solution and the actual file/image resizing (via image library) for the most efficient solution. Your image is actually resized (and also it’s file size physically reduced).

1 Like
9

A clearer example.

imageresizing.jpg1000Ă—1600 427 KB

10

thanks for the reply.

which photo library were you using at that time?

11

ImageResizing for .NET.
http://imageresizing.net/

1 Like
12

hmmm finding a way to use the free license is gonna be a challenge for me.

does this work?

I just create the bin folder inside my web-folder and follow the steps??
I thought everything can be included like bootstrap CDN…

13
131068Ă—273 50.3 KB

13

Are you on a Windows server? You need to be on a Windows server that’s capable of running .NET framework.

On my project, I just install the ImageResizer module using NuGet for Solutions. Then it adds the necessary entries in web.config file, and also copies automatically the DLL in my /Bin folder.

imagedll.png702Ă—837 53.5 KB

14

im not on a windows server…
I am coding on my own mac mini.

I see. so there is no way I can use this lib for now?

(im completely new to this so bear with me :wink: )

15

I see… (I’m on Mac too, but running Windows 10 machine in Parallels as my VM, Windows development machine).

But nodejs has an image resizing library. See this.

1 Like
16

thank you ! i will take a look at it.

also which parallel version are you using right now?

so am I understanding this correctly? sometimes certain library will only work on one platform so we develop on that platform, but once your site is finished, it can be viewed on any platform.

also I have a spare windows PC at home, so if I get on to that machine I can make it work right? with windows 10 OS?

17

I’m using Parallels Desktop 13 for Mac, Pro Edition. I’m using it to run VMs of various kinds… Windows 2000 Advance Server, Server 2008, Ubuntu Linux, Windows 8.1, Windows 10, macOSX, Android4.

so am I understanding this correctly? sometimes certain library will only work on one platform so we develop on that platform, but once your site is finished, it can be viewed on any platform.

Yes, for hosting websites, it’s generally divided into 2 camps/ecosystem – Windows server and Linux servers. Some software platforms can run on both servers, but generally sysadmin will pick the server that is best for that platform. For example… PHP (for running PHP based sites, like WordPress) is typically run on Linux flavored servers, though Windows can also host PHP/WordPress websites if that option is installed.

Linux: PHP, mySQL, Node, Apache, Rails, Ruby, etc.
Windows: ASP, ASP.NET, MSSQL etc.

also I have a spare windows PC at home, so if I get on to that machine I can make it work right? with windows 10 OS?

You can install Windows 10 on that machine, install IIS (the web server), and the .NET Framework. So you can develop/host Windows-based sites on that machine (for development purposes)… or do what I did (just install a VM on your OSX, and running Windows on that VM).

Of course, if you want the public to be able to view your .NET developed site, you’d need windows hosting for that. You just can’t upload it to Github or Surge.sh or heroku and expect it to work.

.NET website development is a whole another can of worms, mainly using C# Object Oriented programming, and the .NET Framework.

If you don’t plan on learning .NET, I think getting the Nodejs image library working is a good bet for you.

1 Like
18

thank you for the in depth explanation.