Gallery Creation

Photonic started out as a shortcode-based plugin. While the basis of the plugin has always been the tweaking of a shortcode, it can get challenging to remember all the different parameters of the shortcode. So Photonic offers you multiple ways out.

Prerequisites (🔗)

Photonic supports multiple sources for photos, but most of them have some prerequisites:

  • WordPress – no prerequisites; proceed to the next section
  • Flickr
    • API key required – see here for instructions
    • Authentication required only if you want to display private photos – see here for instructions
  • SmugMug
    • API key required – see here for instructions
    • Authentication required only if you want to display private photos – see here for instructions
  • Google Photos
    • Client ID required – first, obtain the client ID as per the instructions
    • Authentication required – see here for instructions
  • Zenfolio – no prerequisites; proceed to the next section
  • Instagram
    • Authentication required – see here for instructions

Gallery Creation: Pre-Gutenberg (< WP 5.0) (🔗)

If you are not using the Gutenberg editor and are sticking to the Classic Editor, you get to see this at the top of each post:

Adding or Editing a Gallery
Click on either of the buttons

Gallery Builder Wizard (🔗)

If you click on “Add / Edit Photonic Gallery“, it launches an interactive wizard where you can choose what type of gallery you want to show.

Pick your source
Clicking on “Add / Edit Photonic Gallery” starts a wizard that lets you pick your source

Subsequent screens are generated based on your selections on the initial screens.

Make your choices
Each selection drives the next screen that lets you build out your shortcode

Vanilla Editor (🔗)

If you click on the “Add Media” button, you are shown the traditional gallery interface with an additional tab for “Photonic”:

Click on the new "Photonic" tab
Clicking on the “Add Media” button gives you the classical interface, where you can click on the new “Photonic” tab

Click on the individual tabs for Flickr, Picasa etc.
Click on the individual tabs for Flickr, Picasa etc.

Gallery Creation: Gutenberg and Beyond (≥ WP 5.0) (🔗)

Gutenberg is the codename for WordPress’ new editing experience. It dispenses with traditional constructs such as shortcodes and introduces “blocks”. Photonic version 2.10 has been written to support Gutenberg, but if you use the “Classic Block” and use the “Convert to Blocks” feature therein you need to take care of a few things, so do read-up here.

When you click on the button to add a new block you are shown one for Photonic:

Blocks
Pick the “Photonic Gallery” block

Once you pick the block you will be taken to the gallery builder wizard.

Photonic in Widgets (🔗)

There are two ways to use Photonic in widgets:

  1. Enter a shortcode into a text widget by going into the “Text” mode for the widget. Obviously you have to construct the shortcode by hand in this mode:
    Shortcode in a Text Widget
    Shortcode in a Text Widget – no bells or whistles
  2. Use the built-in Photonic widget to build out your shortcode. Clicking on the Photonic icon launches the wizard for you to build the shortcode:
    Photonic Widget
    The Photonic widget facilitates the creation of a gallery shortcode using the wizard

Working with Page Builders (🔗)

While no specific module has been built for common page builders, you can use the Photonic Widget in Elementor or Beaver Builder.

  1. Elementor
    To use Photonic in Elementor, search for the “Photonic Gallery” widget:
    Search for Photonic
    The Photonic Gallery widget appears in the WordPress Widgets section

    Once you have found it, drag it to the area of your choice. It will open up the widget in the “Elements” window, and you can use the wizard from that point:
    Photonic Wizard from Elementor
    The WP widget lets you use the full capabilities of Photonic in Elementor
  2. Beaver Builder
    Similar to Elementor, the WordPress widget can be used for Beaver Builder:
    Photonic in Beaver
    The WordPress widget can be used to create a gallery in Beaver

    Once you have found it, drag it to the area of your choice. You will then see the widget to help you start the wizard:
    Beaver Widget
    Click on the Photonic logo to launch the wizard

Compatibility for Divi’s page builder has not been built, and compatibility with other page builders has not been tested. But with Elementor, Beaver and Gutenberg about 70% of the page builder market should be covered.