• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Image gallery with portrait and landscape pictures

New Here ,
Nov 21, 2018 Nov 21, 2018

Copy link to clipboard

Copied

Hi, I want to make a gallery page that is responsive but includes both portrait and landscape images (like the image attached) is there a way to achieve this without buying a plugin?  The only way I figured to do it so far is to add individual classes to each image and then adjust the margins to get them in line, I'm going to have multiple pages like this and don't want to have to do this for each as it is incredibly time consuming.  Any suggestions would be much appreciated!Screenshot 2018-11-21 at 16.08.33.png

Views

3.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 21, 2018 Nov 21, 2018

Try the below:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Masonry</title>

</head>

<body>

<style>

body {

}

img {

max-width: 100%;

display: block;

}

* {

box-sizing: border-box;

}

.masonry {

width: 80%;

margin: 0 auto;

column-count: 4;

column-gap: .5em;

}

@media screen and (max-width: 768px) {

.masonry {

width: 90%;

}

}

@media screen and (max-width: 480px) {

.masonry {

width: 100%;

}

}

.masonry_item {

margin: 0;

width: 100%;

}

.masonry_item img {

margin: 0 0 .5em 0;

}

@media screen and (max-width: 76

...

Votes

Translate

Translate
LEGEND ,
Nov 21, 2018 Nov 21, 2018

Copy link to clipboard

Copied

Try the below:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Masonry</title>

</head>

<body>

<style>

body {

}

img {

max-width: 100%;

display: block;

}

* {

box-sizing: border-box;

}

.masonry {

width: 80%;

margin: 0 auto;

column-count: 4;

column-gap: .5em;

}

@media screen and (max-width: 768px) {

.masonry {

width: 90%;

}

}

@media screen and (max-width: 480px) {

.masonry {

width: 100%;

}

}

.masonry_item {

margin: 0;

width: 100%;

}

.masonry_item img {

margin: 0 0 .5em 0;

}

@media screen and (max-width: 768px) {

.masonry {

column-count: 3;

}

}

@media screen and (max-width: 480px) {

.masonry {

column-count: 2;

}

}

@media screen and (max-width: 320px) {

.masonry {

column-count: 1;

}

}

}

</style>

<div class="masonry">

<div class="masonry_item">

<img src="https://source.unsplash.com/random/?nature" alt="Nature">

<img src="https://source.unsplash.com/random/?food" alt="Food">

<img src="https://source.unsplash.com/random/?business" alt="Business">

<img src="https://source.unsplash.com/random/?fashion" alt="Fashion">

<img src="https://source.unsplash.com/random/?animal" alt="Animal">

<img src="https://source.unsplash.com/random/?nature" alt="Nature">

<img src="https://source.unsplash.com/random/?people" alt="Food">

<img src="https://source.unsplash.com/random/?lion" alt="Business">

<img src="https://source.unsplash.com/random/?fruit" alt="Fashion">

<img src="https://source.unsplash.com/random/?architecture" alt="Animal">

<img src="https://source.unsplash.com/random/?water" alt="Nature">

<img src="https://source.unsplash.com/random/?transport" alt="Food">

<img src="https://source.unsplash.com/random/?shopping" alt="Business">

<img src="https://source.unsplash.com/random/?leaves" alt="Fashion">

<img src="https://source.unsplash.com/random/?elephant" alt="Animal">

</div>

</div>

</body>

</html>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 21, 2018 Nov 21, 2018

Copy link to clipboard

Copied

While Osgood gave you the best pure CSS hack for a masonry grid, which your screen capture depicts, I thought I'd add that masonry grids are kind of unnatural things where web pages are concerned. So, if you can live without the faux masonry look, you can use CSS Flexbox to create a more readable grid:

Test Document

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 21, 2018 Nov 21, 2018

Copy link to clipboard

Copied

This gallery is dynamically populated with images on the server with PHP code -- a huge time saver for large collections.

Alt-Web Demo :: Responsive Masonry Gallery

The CSS layout is similar to what osgood posted  but it incorporates a Fancybox3 mobile-friendly viewer. 

Fancybox3 costs $29 for a single commercial license.   I think the options & user experience on mobile devices are worth the price.

https://fancyapps.com/fancybox/3/#license

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 21, 2018 Nov 21, 2018

Copy link to clipboard

Copied

LATEST

and here is a true Dreamweaver plugin:

Test Document

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines