How to .... Gallery in Bludit

How to integrate a fancy gallery in Bludit CMS. It is quit easy to do, by using nanogallery2.

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 bl-plugins/nano_photos/js folder and all files from css including the font folder to the bl-plugins/nano_photos/css folder on your webserver.

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.

html_code.png 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"

Custom_fields_parser.png

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".

Options_Gallery200.png 

Finally place the variable "Gallery200" in the text where your gallery should appear.

Variable_Gallery200.png 

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.

Your Reaction to this Post?

Laurent
Written by Laurent on November 27, 2021
Thank a lot! It works very well.
lodria
further examples
Written by lodria on April 17, 2021
Can you share more examples?
Author
further examples
Written by on April 18, 2021
The documentation ( https://nanogallery2.nanostudio.org/documentation.html ) of nanogallery2 is very good. There is also a visual builder: https://nanogallery2.nanostudio.org/builder.html
lodria
Thorough explanation
Written by lodria on April 17, 2021
Well, that looks really good. Thanks for sharing