WordPress not loaded!';
exit;
}
require_once 'Admin_Page.php';
class Getting_Started extends Admin_Page {
private static ?Getting_Started $instance = null;
private function __construct() {
// Empty
}
public static function get_instance() {
if (null === self::$instance) {
self::$instance = new Getting_Started();
}
return self::$instance;
}
public function render_content() {
$this->tabs();
$this->capabilities();
$this->build_gallery();
$this->layouts();
$this->lightbox();
$this->secret_menu();
$this->helper_shortcode();
$this->really_technical();
}
private function tabs() {
?>
Capabilities and Documentation
Photonic can show you photos and galleries not just from standard WordPress, but also from several
third-party photo-hosting providers
such as Flickr, SmugMug, Google Photos etc. The following table tells you what you need for each
provider, and provides you with
documentation links for how to show something using Photonic.
[
'name' => 'BaguetteBox',
'url' => 'https://feimosi.github.io/baguetteBox.js/',
'size' => '~10KB JS, ~4KB CSS',
'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch'],
'license' => 'MIT',
'notes' => 'No support for YouTube / Vimeo',
],
'bigPicture' => [
'name' => 'BigPicture',
'url' => 'https://henrygd.me/bigpicture/',
'size' => '~9KB JS, no CSS',
'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'MIT',
'notes' => 'No support for videos in galleries',
],
'colorbox' => [
'name' => 'Colorbox',
'url' => 'https://jacklmoore.com/colorbox/',
'size' => '~10KB JS, 5KB CSS',
'supports' => ['autoStart', 'bundled', 'deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'MIT',
],
'fancybox' => [
'name' => 'Fancybox1',
'url' => 'http://fancybox.net/',
'size' => '~16KB JS, 9KB CSS',
'supports' => ['autoStart', 'html5', 'touch', 'ytVimeo'],
'license' => 'MIT, GPL',
],
'fancybox2' => [
'name' => 'Fancybox2',
'url' => 'https://fancyapps.com/fancybox/',
'size' => '~23KB JS, 5KB CSS',
'supports' => ['autoStart', 'deepLinking', 'socialSharing', 'html5', 'thumbnails', 'touch', 'ytVimeo'],
'license' => 'CC-BY-NC 3.0',
],
'fancybox3' => [
'name' => 'Fancybox3',
'url' => 'https://fancyapps.com/fancybox/3',
'size' => '~61KB JS, 14KB CSS',
'supports' => ['autoStart', 'bundled', 'deepLinking', 'html5', 'socialSharing', 'thumbnails', 'touch', 'ytVimeo'],
'license' => 'GPL v3',
],
'featherlight' => [
'name' => 'Featherlight',
'url' => 'https://noelboss.github.io/featherlight/',
'size' => '~13KB JS, 5KB CSS',
'supports' => ['bundled', 'deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'MIT',
],
'glightbox' => [
'name' => '"Gie" Lightbox (GLightbox)',
'url' => 'https://biati-digital.github.io/glightbox/',
'size' => '~54KB JS, 14KB CSS',
'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'MIT',
],
'imageLightbox' => [
'name' => 'Image Lightbox',
'url' => 'https://osvaldas.info/image-lightbox-responsive-touch-friendly',
'size' => '~6KB JS, 5KB CSS',
'supports' => ['bundled', 'deepLinking', 'socialSharing', 'touch'],
'license' => 'MIT',
'notes' => 'No video support',
],
'lightCase' => [
'name' => 'LightCase',
'url' => 'https://cornel.bopp-art.com/lightcase/',
'size' => '~26KB JS, 14KB CSS',
'supports' => ['autoStart', 'bundled', 'deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'GPL',
],
'lightGallery' => [
'name' => 'LightGallery',
'url' => 'https://lightgalleryjs.com/',
'size' => '~52KB JS, 21KB CSS, ~26KB Fonts, + Additional Plugins',
'supports' => ['autoStart', 'bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'thumbnails', 'touch', 'ytVimeo'],
'license' => 'GPL v3',
],
'magnific' => [
'name' => 'Magnific Popup',
'url' => 'https://dimsemenov.com/plugins/magnific-popup/',
'size' => '~20KB JS, 7KB CSS',
'supports' => ['deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'MIT',
],
'photoSwipe' => [
'name' => 'PhotoSwipe',
'url' => 'https://github.com/dimsemenov/PhotoSwipe/tree/v4.1.3',
'size' => '~41KB JS, 11KB CSS',
'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'MIT',
'notes' => 'No video support for Flickr',
],
'photoSwipe5' => [
'name' => 'PhotoSwipe v5',
'url' => 'https://photoswipe.com/',
'size' => '~66KB JS, 5KB CSS',
'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'MIT',
'notes' => 'No video support for Flickr',
],
'prettyPhoto' => [
'name' => 'PrettyPhoto',
'url' => 'http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/',
'size' => '~23KB JS, 27KB CSS',
'supports' => ['autoStart', 'deepLinking', 'socialSharing', 'thumbnails', 'touch', 'ytVimeo'],
'license' => 'GPL v2.0',
'notes' => 'YouTube / Vimeo supported, but not other videos'
],
'strip' => [
'name' => 'Strip',
'url' => 'http://stripjs.com',
'size' => '~39KB JS, 13KB CSS',
'supports' => ['bundled', 'deepLinking', 'touch', 'ytVimeo'],
'license' => 'CC-BY 4.0',
'notes' => 'YouTube / Vimeo supported, but not other videos',
],
'spotlight' => [
'name' => 'Spotlight',
'url' => 'https://nextapps-de.github.io/spotlight/',
'size' => '~10KB JS, 11KB CSS',
'supports' => ['autoStart', 'bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'Apache 2.0',
],
'swipebox' => [
'name' => 'Swipebox',
'url' => 'https://brutaldesign.github.io/swipebox/',
'size' => '~12KB JS, 5KB CSS',
'supports' => ['bundled', 'deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'MIT',
],
'thickbox' => [
'name' => 'Thickbox',
'url' => 'http://codylindley.com/thickbox/',
'size' => '~12KB JS',
'supports' => ['bundled', 'deepLinking', 'html5', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'MIT',
'notes' => 'No video support'
],
'venobox' => [
'name' => 'VenoBox',
'url' => 'https://veno.es/venobox/',
'size' => '~16KB JS, ~15KB CSS',
'supports' => ['bundled', 'deepLinking', 'html5', 'noJQ', 'socialSharing', 'touch', 'ytVimeo'],
'license' => 'MIT',
],
];
$lightboxes_json = wp_json_encode($lightboxes);
$supports = [
'autoStart' => 'Auto-start slideshow',
'bundled' => 'Bundled with Photonic',
'deepLinking' => 'Deep-linking',
'html5' => 'HTML5 Videos from Flickr etc.',
'noJQ' => 'No jQuery required',
'socialSharing' => 'Social Sharing',
'thumbnails' => 'Thumbnails',
'touch' => 'Touch / gestures',
'ytVimeo' => 'YouTube, Vimeo etc.',
];
?>
Which Lightbox?
Photonic includes several lightboxes and supports some others that it cannot include due to licensing
reasons. Each lightbox has
its own strengths — some are lightweight, some are full-featured and some are very elegant
looking. You can pick one based on the
features that you feel are most important to you. Note that out-of-the-box, several of these don't
support features such as touch gestures, or deep-linking,
but for Photonic those capabilities have been integrated into the scripts via other approaches.
The Secret Menu
While the shortcode generator for Photonic is fairly comprehensive, there are some additional hidden
shortcode parameters that you can use. These are baked into the
interactive shortcode builder / Photonic block for Gutenberg, but will not show up in the traditional
shortcode interface:
title_position – Takes values none, regular, tooltip,
below, hover-slideup-show and slideup-stick. It overrides the
title positioning that you have set for that particular provider through your options.
headers – Takes a comma-separated list containing none or more of
thumbnail, title, and counter.
If a value is specified, that particular component will be shown in the level 2 entity's (i.e. album
/ gallery / set) header, regardless of the back-end options.
So, setting headers='title,counter' for a particular call to display a Zenfolio set,
will show the title and photo-count for that set in the header, and not its thumbnail.
fx – Applicable to slideshow layouts. Takes values fade and slide
to provide the transitioning effect between slides.
speed – Applicable to slideshow layouts. Takes numeric values in milliseconds,
determines the speed of transitioning of slides.
timeout – Applicable to slideshow layouts. Takes numeric values in milliseconds,
determines the pause between two slides.
pause – Applicable to slideshow layouts. Takes values 0 (no pause)
and 1 (pause), determines if the slideshow should pause upon hovering on it.
controls – Applicable to slideshow layouts. Takes values show and
hide, and shows "Previous" and "Next" buttons on the slideshow.
strip-style – Applicable to slideshow layouts. Takes values thumbs
and button. If set, and if the layout / style parameter is
set to strip-below, strip-above, strip-right, it shows
buttons below the slideshow.
popup – Takes values show and hide. If set, and if a
level 2 thumbnail (i.e. an Album, Photoset or Gallery thumbnail) is being displayed, this setting
overrides Photonic → Settings → Generic Options → Overlaid Popup Panel →
Enable Interim Popup for Album Thumbnails.
The Helper Shortcode
There is a second utility shortcode present in the plugin, which displays the output of the helpers but
in the front-end.
- Short-code:
photonic_helper
-
Attributes: This primary attribute is
type. Depending on the value of
type other attributes can be passed:
-
type='flickr' - Additional attributes:
user='xxx' - Passing the user name (i.e. from
https://flickr.com/photos/xxx) will get the user_id for use in the Flickr shortcode
group='yyy' - Passing the group name will get the group_id for use in
the Flickr shortcode
-
type='google' - Additional attributes:
album_type='self' - Prints out the user's Google Photos albums in
tabular form
album_type='shared' - Prints out the all Google Photos albums shared
with and by the user in tabular form
The Really Technical Stuff
You are running PHP with the following details:
 . 'screenshot-2.jpg'; ?>)
 . 'screenshot-1.png'; ?>)
 . 'screenshot-5.jpg'; ?>)
 . 'screenshot-6.jpg'; ?>)
 . 'screenshot-8.png'; ?>)
 . 'screenshot-3.png'; ?>)
 . 'screenshot-4.png'; ?>)
 . 'screenshot-7.png'; ?>)