Make your own Photogrid

Rating

There are many modules that represent images in a beautiful way. We will make a photo collage in which you decide how it should look.

This discussion will cover the images in a node and the images in a view. Both have a totally different principle, but the CSS remains the same.

1) Photo collage of multiple images in a view.

The collage below. For small screens the images show differently. Everything works fine, but in the Internet Explorer there is not always an ideal aspect ratio.


Screen001650.png

Create a view, where you have the Result Counter field. This generates a number for each image. For multiple image fields you put the images as separate rows.

Screen001648.png

Then we rewrite the field. We use the tokens.


Screen001649.png

Each image will now get a separate class.

Screen001651.png

Now you need to apply the CSS. I have some hover effects added. I opt for relative positioning and look how much the image should be shifted upward and to the left. You do this best picture by picture. You look where the next picture shows up, and with top and left you adjust. A negative top value puts the picture up. When the picture is in addition to the previous image, put nothing. It stands floating unless you want to go to another row. Note that for the width,i use percentage. The site is responsive in width.

You can also use absolute positioning. This is easier, but you should keep an eye on your whole site with menu bars and blocks. Not as simple as it looks.

Images that you proposed in an area always give a distorted aspect ratio. We will solve this by cropping and make it fit in the area that we provide for the photo. The following CSS provide the crop from the center . The collage was developed for 12 photos. If there are more pictures, then they are displayed just as normally.

object-fit: cover;
object-position: center;

@media screen and (max-width:799px){
  .nummer1 img,.nummer2 img,.nummer3 img,.nummer4 img,.nummer5 img,.nummer6 img,.nummer7 img,.nummer8 img,.nummer9 img,.nummer10 img,.nummer11 img,.nummer12 img{
    
    width:80%;
    height:200px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 auto;
    float:none;
  }
}

@media screen and (min-width:800px){
  #main-content{
    height:1000px;
    overflow:hidden;
    }
.nummer1 img,.nummer2 img,.nummer3 img,.nummer4 img,.nummer5 img,.nummer6 img,.nummer7 img,.nummer8 img,.nummer9 img,.nummer10 img,.nummer11 img,.nummer12 img{
   position: relative;
   object-fit: cover;
   object-position: center;
   padding:2px;
   -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
     }  
.nummer1 img{
  top:0;
  left:0;
  width: 50%;
  height: 200px;
  float:left;
     }
     .nummer1: hover img, .nummer2: hover img, .nummer3: hover img, .nummer4: hover img, .nummer5: hover img, .nummer6: hover img, .nummer7: hover img, .nummer8: hover img, .nummer9 : hover img, .nummer10: hover img, .nummer11: hover img, .nummer12: hover {img 
        -moz-transform: scale (0.99); 
      -webkit-transform: scale (0.99); 
      transform: scale (0.99); 
      opacity: 0.9; 
          }

.nummer2 img{
  width:25%;
  height:300px;
  float:left;
    }
.nummer3 img{
  width:25%;
  height:150px;
  float:left;
 
}
.nummer4 img{
  width:25%;
  height:250px;
}
.nummer5 img{
  top:-200px;
  left:0;
  width:25%;
  height:150px;
  float:left;
  }
.nummer6 img{
   top:-200px;
  left:0;
  width:25%;
  height:100px;
  float:left;
  }
.nummer7 img{
  top:-100px;
  left:-25%;
  width:50%;
  height:300px;
  float:left;
  }
.nummer8 img{
  top:-350px;
  left:0;
  width:25%;
  height:250px;
  }
.nummer9 img{
  top:-550px;
  left:75%;
  width:25%;
  height:200px;
 }

.nummer10 img{
  top:-550px;
  float:left;
  width:33.33%;
  height:250px;
  float:left;
  }
.nummer11 img{
  top:-550px;
  width:33.33%;
  height:250px;
  float:left;
 }
.nummer12 img{
  top:-550px;
  width:33.33%;
  height:250px;
}
}

2) Photo collage of multiple images in a single node.

If we want to do the same with a node, then we have either Computed fields or Token necessary filter. I use this example the latter.

Screen001644.png
We can use the same CSS as in the view, but how can we give to each photo individually another class?


Screen001645.png

The token filter (you have to check the text settings eg in full HTML) shows the tokens to use. Each image should be numbered sequentially. This token information can be found at your Help tab in Drupal!

[Node: field_reisfoto_s_afbeeldingen: 0] etc ... with: entity behind you can find out the name of the file. I will use this to establish a link.

Screen001643.png

In your content type, create a text field and you write in the source code, the class to represent the figure. I also put a link on any photo to open it by clicking in the browser. You do this for all images in your collage.

Screen001641.png

If you have done this you need to turn off the image field in the view. You have rewritten the images with the tokens .. Otherwise you see them double.


Screen001642.png

The input display you need the picture field of course.

Screen001640.png

Create CSS with the CSS injector..


Screen001639.png

For smaller screens with @media, we give an alternative. The images would be too small in a collage.

Screen001647.png