Highlighted

Image gallery with portrait and landscape pictures

New Here ,
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

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>

TOPICS
Create Slideshows in Dreamweaver, Learn Dreamweaver

Views

1.8K

Likes

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

Image gallery with portrait and landscape pictures

New Here ,
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

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>

TOPICS
Create Slideshows in Dreamweaver, Learn Dreamweaver

Views

1.8K

Likes

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
Nov 21, 2018 0
LEGEND ,
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>

Likes

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
Reply
Loading...
Nov 21, 2018 1
Mentor ,
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

Likes

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
Reply
Loading...
Nov 21, 2018 1
Adobe Community Professional ,
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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Nov 21, 2018 0
ALsp LATEST
Mentor ,
Nov 21, 2018

Copy link to clipboard

Copied

and here is a true Dreamweaver plugin:

Test Document

Likes

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
Reply
Loading...
Nov 21, 2018 0