Snippets/Pinterest Like Gallery

How to use Snippets
List of Snippets

Pinterest Like Gallery
Language(s):	CSS
Compatible with:	MediaWiki 1.22+ (all)

Description

Enables an end user to post a gallery of images that layouts in a Pinterest Like format. Will not show correctly on lower versions of ie (ie 9 & down, I think). Semantic results will layout in the "Pinterest" Like format if the ask query is between the divisors. Mediawiki Galleries will behave strangely between the divisors (not recommended). Additionally no "LightBox" features seem to work. Will work with Snippets/Image Expand on Hover; however in ie the images will only expand within the column and will not ride over the other columns.

The Size of the Images will be controlled by CSS and any sizes set will effect nothing. See the example, the first image has a size set, but that size of the image is not effected.

Visual Example

Pinterest Like Gallery:

Usage

Gallery, or Image, must be between the following division tags:<div id="PinterestlikeContent"> </div>. Just list your images on the Page (like the example) and the Images will appear in the Pinterest Like Gallery.

Example:

<div id="PinterestlikeContent">
[[Image:Astronotus_ocellatus.jpg|500px]]
[[Image:Salmonlarvakils.jpg]]
[[Image:Georgia Aquarium - Giant Grouper.jpg]]
[[Image:Pterois volitans Manado-e.jpg]]
[[Image:Macropodus opercularis - front (aka).jpg]]
[[Image:Fishmarket 01.jpg]]
[[Image:Pseudorasbora parva(edited version).jpg]]
[[Image:MC Rotfeuerfisch.jpg]]
[[Image:Cleaning station konan.jpg]]
[[Image:Synchiropus splendidus 2 Luc Viatour.jpg]]

[[File:Psetta maxima Luc Viatour.jpg]]
[[File:Australian blenny.jpg]]</div>

Code

Pinterest Like Gallery.css:

/* CSS Pinterest Like Gallery for Mediawiki
 * 
 * @author: Unknown
 * current version crafted together by [[User:Christharp]] from several CSS sites. For my website:[http://www.yellpedia.com/wiki/Main_Page Yellpedia]
 */

#container {
    width: 1200px;
    margin: 0 auto;
}
 
#PinterestlikeContent {
    column-count: 4;
    column-gap: 3px;
    width: 1200px;
}
 
#PinterestlikeContent img{
    display: inline-block;
    margin-bottom: 5px;
    width: 100%;
}
@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
    #PinterestlikeContent {
        column-count: 3;
        column-gap: 0;
        width: 1000px;
    }
     
    #container {
        width: 1000px;
    }
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
    #PinterestlikeContent {
        column-count: 3;
        column-gap: 0;
        width: 800px;
    }
     
    #container {
        width: 800px;
    }
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
    #PinterestlikeContent {
        column-count: 3;
        column-gap: 0;
        width: 600px;
    }
     
    #container {
        width: 600px;
    }
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
    #PinterestlikeContent {
        column-count: 2;
        column-gap: 0;
        width: 400px;
    }
     
    #container {
        width: 400px;
    }
}

Changing Number of Columns

One can change the number of columns by changing the column count. Column count automatically goes down depending upon the size of the device. You can change this per page via a template and if you're using Extension:CSS.