First of all, you download nanogallery2 and also nanoPhotosProvider2. It might be also useful to get the Bludit Plugin "Media" for an easy upload of photos in folders later.
Copy nanogallery2 to your web server
Unzip the downloaded files. Now we need to move this files to our web server.
I created a new folder "nano_photos" in the Bludit plugin folder bl-plugins/nano_photos
. Inside this folder we need two more folders called css
and js
.
Copy from nanogallery2-xxx/dist/
all javascript files (*.js) to the
folder and all files from bl-plugins/
nano_photos/jscss
including the font folder to the
folder on your webserver.bl-plugins/
nano_photos/css
Now we go on with the nanoPhotosProvider2 files. (BTW: This tool will generate thumbnails and images for you). Open the file nano_photos_provider2.cfg
in an editor and edit the line contentFolder ="...
contentFolder = "../../bl-content/uploads/media"
Copy all php files and the cfg file from nano_photos_provider2-xxx
to bl-plugins/nano_photos/
.
Load css and js
To load the needed js and css we will use the plugin "HTML code". Go to Settings - Plugins -> HTML code - Settings.
Head:
<link href="bl-plugins/nano_photos/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
Footer:
<script src="bl-plugins/nano_photos/js/jquery.nanogallery2.min.js"></script>
Preparing a custom field
We will use a custom field to easily place a gallery into a page. For this we need to add a new entry:
Go to Settings - General - Custom fields and add:
{
"Gallery200": {
"type": "string",
"placeholder": "Gallery name",
"label": "Gallery200"
}
}
Now we need to add some code in the plugin "Custom fields parser". Open the plugin Setting - Plugins -> Custom fields parser - Settings. There should be a new field called "Gallery200"
For details of all parameter please take a look in the documentation from nanogalley2. For now you can use:
<div id="Gallery200" data-nanogallery2='{
"kind": "nano_photos_provider2",
"dataProvider": "bl-plugins/nano_photos/nano_photos_provider2.php",
"thumbnailWidth": "200",
"thumbnailBorderVertical": 4,
"thumbnailBorderHorizontal": 4,
"thumbnailDisplayTransitionDuration": 200,
"thumbnailLabel": {
"position": "overImageOnBottom",
"titleMultiLine": true
},
"thumbnailHoverEffect2": "imageScaleIn80|labelAppear75",
"galleryDisplayMode": "rows",
"galleryMaxRows": 2,
"thumbnailAlignment": "center",
"thumbnailGutterWidth": 4,
"thumbnailGutterHeight": 4,
"thumbnailOpenImage": true,
"album": "{{ value }}"
}'></div>
(Here is why I use the label "Gallery200" in the custom field. The thumbnail width will be 200px. )
Upload your photos
Now it is time to upload your photos for the gallery. You can use the plugin "Media" or just use ftp. Create a new folder in bl-content/uploads/media/name_of_your_folder
, just copy the photo there.
Nearly done
Create a new content or edit a page. In the options you will find the new entry "Gallery200", in the field below just enter the name of your gallery, which is the name of the folder you copied the photos. (name_of_your_folder
) My gallery is in the folder "Namibia01".
Finally place the variable "Gallery200" in the text where your gallery should appear.
Save the page and visit your website ... and after some while (nanoPhotoProvider2 has to generate the thumbnails first) you will see your gallery. There are a lot of options and possibilities with nanogallery2. If you do a big change delete the folder _thumbnails
in your gallery folder and nanoPhotoProvider2 will redo the thumbnails.
That's all folks.