The Bootstrap Darkroom theme

Presentation of the Bootstrap Darkroom theme

Developed by Thomas Kuther, Bootstrap Darkroom is a modern theme, filled with features and fit for mobile devices.

Its characteristics:

• Over 30 color sets to customize your gallery
• A beautiful full-screen slideshow which handles autoplay
• 100 % responsive, meaning it automatically adapts to all screen sizes
• Easy browsing in your albums with a photo carousel
• Many customizable options…

Customizing Boostrap Darkroom’s colors

Bootstrap Darkroom offers over 30 different color sets.

To choose yours, once you have activated the Bootstrap Darkroom theme in the administration (Configuration > Themes), click on the Configuration button.

You can then view the different color sets available using the drop-down "Theme" list. Select a color set to see a preview appear.

Save the settings: the chosen color set is applied to your gallery.

Bootstrap Darkroom options

The Bootstrap Darkroom theme configuration offers many other options, available in 3 tabs.

Tab 1: Appearance

Full width layout

Activating the "full width" option allows your content to fill up all the space on the page, no matter the screen size.

Site logo

Lets you display a logo instead of the site name, in the top left.

If you activate this option, you will need to set the relative path to access the image in your Piwigo gallery in the "Path" field. If you need help, contact support is you are a piwigo.com customer.

Page header (banner)

You can add a banner to your gallery. You have access to two banner styles:

• This option lets you create a "Jumbotron-style" banner on your gallery's homepage. The banner's content is set in HTML from the Configuration > Options menu. The content can include a title, text, an image, a button... To learn more about the page banner creation area, visit this article.

• This option lets you use an image located in your Piwigo gallery as a banner background. If you want, you can display this image in full height. The text displayed over it is set from the Configuration > Options menu.

To learn more about banner creation in Piwigo, read this article:

Appearance of the categories page (albums)

If you want, you can display the albums in a vertical list with a square thumbnail, as with the Smart Pocket mobile theme.

You can activate this option for all screens or only for mobile devices.

Appearance of the thumbnails page (photos)

Several options allow you to edit the appearance of photos on listing pages (namely an album's page).

• Show image caption
• Use description rather than title for images

You can also change the behavior when a user clicks on an image.

By default, clicking on an image opens the detailed image page. Instead, it is possible to display the image in a pop-in window in slideshow form. This option can be activated for all screens, or only for mobile devices.

Appearance of the image page

The image's detailed information (rating, upload date, tags, EXIF data...) can be displayed in several ways based on your choice:

• Card grid below the image (default choice)

• Tabs below the image

• Sidebar (information bar to the left of the image, which the user can show or hide)

• Disabled (in this case, the information is not displayed).

Custom CSS

The Custom CSS field lets you display custom CSS code.

Tab 2: Components

Bootstrap Darkroom's second configuration tab offers additional options for customizing your gallery's appearance.

Slick Carousel Settings

By default, Bootstrap Darkroom shows a carousel on an image's page, allowing users to browse through other images from the same album.

Several options are available:

• Activating or deactivating this carousel
• Lazyload or OnDemand: changing the images' loading method
• Infinite looping: lets you activate the infinite looping of the carousel's images
• Center mode: lets you display the current image at the center of the carousel

PhotoSwipe Settings

By default, Bootstrap Darkroom uses the PhotoSwipe component to view a slideshow in full-screen mode.

You can deactivate it if you want to use another slideshow component:

• Piwigo’s default slideshow
• The Fotorama slideshow (for this, you need to activate the Fotorama plugin)

You can also set the slideshow's scrolling interval (3500 milliseconds by default).

Quick search

This option lets you display a quick search engine in your gallery's browsing bar.

Comments

If you want, you can use the Disqus component to manage comments on your gallery.

To do this, you first need to create an account on the Disqus website. When you activate Disqus in the Bootstrap Darkroom configuration, you need to enter the name of your Disqus site in the “Disqus shortname” field.

You should know that if you go for this option, you allow for comments to be handled and hosted on a third-party platform.

Tag cloud

You have the choice between two types of tag clouds for your gallery's Tags menu.

• Basic: this format displays tags in horizontal lists. It is less suitable if you have few tags in your gallery.

• HTML 5 Canvas: this format takes up the entire size of the screen and displays tags in different directions.

Tab 3: Social Integration

The last configuration tab for the Bootstrap Darkroom theme lets you choose whether or not to activate social media share buttons on an image's page.

You can choose which social media to activate.

You can also choose the display mode for the share buttons:

• Default icons

• Colored buttons

Going further

If you want to go further in the customization of your Bootstrap Darkroom theme, you can:

• Contact support if you are a piwigo.com plan customer
• Contact support if you are using a self-hosted Piwigo gallery and have signed a maintenance contract
• Visit the theme’s documentation on GitHub
• Ask a question on the Piwigo forum

Article summary

• Presentation of the Bootstrap Darkroom theme
• Customizing Boostrap Darkroom’s colors
• Bootstrap Darkroom options
• Tab 1: Appearance
• Tab 2: Components
• Tab 3: Social Integration
• Going further

← Previous

The Modus theme