Full documentation
Transcription
Full documentation
2014 SlideshowFx Content Plug-in for Joomla ! Joël VALLIER / www.OopsTouch.com SlideshowFx content plug-in is aimed to display photo galleries and albums inside Joomla articles. This document is the user guide giving all instructions for installation and connection to Google+, Flickr, Facebook and Instagram photo sharing. Site: www.oopstouch.com Email: [email protected] Phone: +33 6 17 19 27 06 SIREN: 539 930 677 I. Summary I. Summary ........................................................................................................................................ 1 II. Quick Start Guide ............................................................................................................................ 3 III. General Presentation ...................................................................................................................... 7 IV. SlideshowFx installation ................................................................................................................. 9 V. Display Galleries as standard Menu .............................................................................................. 10 VI. Display Galleries inside Modules .................................................................................................. 12 VII. Insert Galleries / Albums in articles .............................................................................................. 13 1. Insert default gallery in article .................................................................................................. 14 2. Use of inline URL or RSS links inside article .............................................................................. 14 3. Use of inline user ID inside Joomla article ................................................................................ 16 4. Use of Flickr collections ............................................................................................................ 16 5. Use of Flickr galleries ................................................................................................................ 16 6. Use of hashtags ........................................................................................................................ 17 VIII. Widgetkit integration ................................................................................................................... 18 1. Installation................................................................................................................................ 18 2. Configure Slideshow Widgetkit content provider ..................................................................... 18 3. SlideshowFx content provider parameters ............................................................................... 19 4. How to display a gallery............................................................................................................ 19 5. Widgetkit settings for display of galleries ................................................................................. 20 IX. Display Galleries in Kunena forum ................................................................................................ 21 X. Background music ........................................................................................................................ 22 XI. APIs configuration ........................................................................................................................ 23 1. Google+/Picasa API configuration ............................................................................................ 23 2. Flickr API configuration............................................................................................................. 27 3. Facebook API configuration ...................................................................................................... 32 4. Instagram API configuration ..................................................................................................... 36 5. Piwigo API configuration .......................................................................................................... 40 6. OneDrive API configuration ...................................................................................................... 41 7. SlideshowFx API configuration ................................................................................................. 43 XII. SlideshowFx parameters ............................................................................................................... 45 1. Filters ........................................................................................................................................ 45 2. Gallery settings ......................................................................................................................... 46 SlideshowFx User Guide Page 1 3. Album settings .......................................................................................................................... 47 4. Slideshow settings .................................................................................................................... 48 5. Slider ........................................................................................................................................ 49 6. Video settings ........................................................................................................................... 50 7. Geolocation .............................................................................................................................. 50 8. Rating settings .......................................................................................................................... 51 9. ShareThis settings ..................................................................................................................... 52 10. Global settings ...................................................................................................................... 53 11. Translations settings ............................................................................................................. 53 12. Advanced settings ................................................................................................................ 54 13. CSS Layout settings ............................................................................................................... 55 XIII. Advanced inline parameters ......................................................................................................... 56 XIV. References .................................................................................................................................... 57 1. SlideshowFx related links ......................................................................................................... 57 2. Google+ related links ................................................................................................................ 58 3. Flickr related links ..................................................................................................................... 58 4. Facebook related links .............................................................................................................. 58 5. Instagram related links ............................................................................................................. 58 6. Piwigo related links .................................................................................................................. 59 7. Other links ................................................................................................................................ 59 8. Credits ...................................................................................................................................... 59 XV. Annexes ........................................................................................................................................ 60 1. Gallery and album Layout ......................................................................................................... 60 2. Feature list................................................................................................................................ 63 3. Software upgrade from Trial to Pro version ............................................................................. 65 4. Software upgrade from a very old version ............................................................................... 66 XVI. History .......................................................................................................................................... 67 SlideshowFx User Guide Page 2 II. Quick Start Guide SlideshowFx is a package of extensions aimed to display photo and video galleries, with some additional features, inside Joomla! websites. Photos can be stored locally on your server or on a remote Google+, YouTube, Picasa, Flickr, Facebook or Instagram server. The final rendering is the same whatever the underlined platform. Below some screenshots and a quick start guide. 1. Figure 1: SlideshowFx photo gallery with votes and ShareThis options enabled Figure 2: Included photo/video slideshow with support of rating and geolocation Check our website www.OopsTouch.com for live demo and video! SlideshowFx User Guide Page 3 Figure 3: A simple slider can be displayed in menu, module or article Requirements 1. Local photos or a Google+, Flickr, Facebook or Instagram user account with photos or videos uploaded (Picasa photos or YouTube videos can be displayed using your Google+ account) 2. A Joomla! website version 2.5 or higher 3. SlideshowFx Trial or Pro package 4. and… 5 minutes of your time ;-) Install SlideshowFx Package 1. Install SlideshowFx Trial/Pro package as any other extension Upload your photos on your local server if you want to display local albums (Optional) 1. 2. 3. 4. Create folder /images/slideshowfx/default used to store default user albums Upload your albums inside /images/slideshowfx/default (create one folder per album) (Use only jpeg photos with JPG extension / 1800 pixels is the recommended photo size) Use SlideshowFx as platform or API parameter in next sections to display local photos Important note: Display of local photos with Trial version works only on public websites. SlideshowFx User Guide Page 4 Configure your Google+, Flickr, Facebook or Instagram user account (optional) 1. Open menu Components SlideshowFx Gallery 2. Open User accounts tab 2. Click on one of the Demo buttons proposed for Google+, Flickr, Facebook, Instagram (Button displayed on the right / Google+ account is used for display of YouTube videos) 3. Sign-in to your Google+, Flickr, Facebook, Instagram user account 4. Grant access to your albums and photos 5. Confirm and Save SlideshowFx parameters Create your first menu Open Menus Menus Manager Select a menu from the list Create a New menu item Fill in Menu Title Select SlideshowFx Gallery and albums as Menu Item Type Select Google+, Flickr, Facebook, Instagram, YouTube from the Platform drop down list Select an All, Public albums or any album name from the Album drop down list (Google+, Flickr, Facebook, YouTube only) 8. Save parameters 1. 2. 3. 4. 5. 6. 7. 9. Click on button to open the newly created gallery Create your first module 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Open a Extensions Module Manager Create a New module Select SlideshowFx Module Fill in Title Select the appropriated Position From Menu Assignment select Module Assignment page(s) Select Google+, Flickr, Facebook, Instagram, YouTube from the Platform drop down list Select an All, Public albums or any album name from the Album drop down list Ensure that module is Published Save parameters Check result on frontend page Insert your first gallery in article 1. Create or Edit a new article from menu Content Article Manager 2. Insert in article {sfx api=’x’} with x set to one of the appropriated platform (picasa, flickr, facebook, instagram or youtube) 3. Save article 4. Create a new menu to display this article 5. Check result on frontend page SlideshowFx User Guide Page 5 Create your own Web App! Demo mode is based on OopTouch web Apps and is valid for few days. To display Picasa, Google+, Flickr, Facebook, Instagram or YouTube albums with Pro version, you have to create your own Web App. This step is a bit more complicated depending on platform used. Refer to our SlideshowFx User Guide for full details on how to proceed. Install SlideshowFx Professional Edition SlideshowFx Trial relies on OopsTouch server for web page rendering and is valid for few days. To continue with SlideshowFx download the Professional Edition. SlideshowFx Pro can be installed on top of the Trial version. However, there are some points to take care (no need for display of local albums): You have to create your own Google+, Flickr, Facebook or Instagram App, else Pro version will continue to work as Trial version. You have to reset all SlideshowFx API settings (Click on X button) in SlideshowFx menus and modules if they have been created before upgrade to Pro version, else menus and modules will continue to run in Trial mode. Your Joomla! and browser cache must be cleared after install in order to ensure that page displayed is the new one created by your website. If you use SlideshowFx Pro, please post a rating and a review at Joomla! Extensions Directory. Conditons SlideshowFx Pro payment includes a copy of SlideshowFx package, 1 year software upgrade and support (see our terms and conditons for details). You will receive the SlideshowFx package by email usually few minutes after your Paypal payment. Else you can get it from the menu My Account My Products (after login). If our product fails to work as advertized and we are unable to make it work, we will grant you a full refund within 30 days of the purchase. Useful links Full SlideshowFx documentation: http://www.oopstouch.com/documentation/slideshowfx/plugin Download and Purchase: http://www.oopstouch.com/download/slideshowfx/plugin Our support forum for any technical question, issue report or suggestion: http://www.oopstouch.com/support Contact form for non related technical questions: http://www.oopstouch.com/contact SlideshowFx User Guide Page 6 III. General Presentation SlideshowFx will provide all what you need, and probably all what you can imagine, to display Picasa, Google+, Flickr, Facebook and Instagram web albums or YouTube videos into your Joomla! website. Easy to install and configure, you just need to create a SlideshowFx Menu, Module or an article with tag {sfx} inside, SlideshowFx will do the rest (see screenshot below). Figure 4: SlideshowFx photo gallery with votes and ShareThis options activated There are many options allowing you to display only one or a set of albums or photos. Additional information, like date, album name, photo caption, access right can be displayed along with thumbnail or photo slideshow. Albums and photos can be sorted by published/created date or name. SlideshowFx allows visitors (all or only registered visitors) to vote for your photos or albums. Then photos and albums can be sorted by rating (Important: Joomla! cache mut be disabled). SlideshowFx is provided with a nice slideshow script. Except a list of small buttons on top of your screen (photo next/previous, first/last, maximize/minimize, download, close, slideshow play/pause, timer) the rest of the screen is dedicated to your photos!!! Whatever the size of your screen, and whatever the size of your photo, SlideshowFx will automatically adapt photo dimension in order to provide the better quality. This will improve user experience. You need to increase performances? No problem, an internal cache mechanism reduces drastically the access to Google+, Flickr, Facebook, Instagram and YouTube API, reducing processing time by several seconds!!! You don't believe me? Then activate the profiling option. This will insert profiling information in HTML page (not visible by visitors). SlideshowFx User Guide Page 7 Figure 5: Slideshow You want to display albums coming from several Google+/Picasa, Flickr, Facebook or Instagram user accounts? You can activate the 'merge' option and insert several {sfx …} tags in your article. SlideshowFx will get all albums information and will merge all together to provide a unique gallery on your web site. This feature is typically used by associations and clubs where each one can contribute to the photo gallery!!! You have to display large albums (more than 500 photos)? No, problem, a parameter in SlideshowFx allows you to increase the PHP PCRE limit. An optional scrollbar can be activated to facilitate album browsing. You can propose visitors (all or only registered users) to download your pictures in a limited or full resolution format (original file resolution uploaded). You can also block photo download, making photo download not impossible but much more complicated. You want to keep your Google+/Picasa or Flickr album private and provide access only through your Joomla! web site? No, problem, SlideshowFx comes along with a PHP script allowing getting a Picasa/Flickr token. This token is used to get access to private albums. Then the access to private albums from your web site can be restricted, or not, to registered users. If you use SlideshowFx plug-in, please post a rating and a review at Joomla! Extensions Directory. SlideshowFx User Guide Page 8 IV. SlideshowFx installation SlideshowFx package includes SlideshowFx content plug-in as well as SlideshowFx menu and module extensions. It can be installed on your Joomla website like any other Joomla extension from backend site, menu Extensions > Extension manager. The plug-in will be automatically activated. SlideshowFx 6.x packages can be installed on top of previous SlideshowFx 5.x content plug-in. However, it is strongly recommended to test version 6.x on development website before any deployment on production website. When the installation does not work this way you may try to install the SlideshowFx manually: Download SlideshowFx and unzip package to a directory on your PC. Using FTP, upload this directory to the Joomal root directory /tmp on your server. Go to the extensions installer in the Joomla administration, use the "Install from Directory". Set the directory of your uploaded SlideshowFx files. Click on the Install button and Joomla will install it from the given directory. After package installation or update, it is strongly recommended, like any other extension, to edit extension parameters and save parameters (even though no change occurred). By this way, new parameters introduced will take their default values. After installation, you can create a SlideshowFx Menu, Module or edit an article and insert {sfx} inside. Joomla! will display the default OopsTouch gallery in front-end. You can also configure your own user account from menu “Components / Slideshow Gallery” and click on Google+, Flickr, Facebook or Instagram “Demo” button in section “User Accounts”. This basic test allows you to check the compatibility of the extension with your website environment (PHP version and extensions, Joomla template end extensions). In case of problem, please, contact our support at www.oopstouch.com. Here is a flash animation showing plug-in installation and basic configuration with Google+ account. Next sections describe how to create your own App and configure SlideshowFx API parameters: Google+/Picasa API configuration (required for display of YouTube videos) Flickr API configuration Facebook API configuration Instagram API configuration A specific section describe various parameters available in SlideshowFx content plug-in Filters Gallery, Album, Slideshow settings Rating, ShareThis settings Global settings, Translations, Advanced settings and CSS Layout settings Last section gives links to some references. SlideshowFx User Guide Page 9 V. Display Galleries as standard Menu This section assumes that you have already configured your own Google+/Picasa, Flickr, Facebook or Instagram user account in simple demo mode (see section SlideshowFx installation) or normal mode (see sections APIs configuration Google+/Picasa API configuration, Flickr API configuration, Facebook API configuration, Instagram API configuration). From Joomla! “Menu Manager”, click on “New” or “Add New Menu Item”. Select item “SlideshowFx Gallery” / “Gallery and Albums” in “Menu Item Type”. Figure 6: SlideshowFx menu parameters Select one of the platforms proposed (Google+, Flickr, Facebook, Instagram or YouTube) in parameter “Platform”. Parameter “Username” will be automatically updated with the default user account configured in SlideshowFx plug-in. If this field is empty, SlideshowFx will display default OopsTouch user account. At any time you can click on button to reset menu configuration to your default user account defined in SlideshowFx plug-in parameters. Button can be used to link the menu to a different user account. In this case process is similar to the one used to configure the default user account in SlideshowFx plug-in (redirection to Google+, Flickr, Facebook or Instagram and grant access). Button can be used to display all API parameters (App Key, Secret, username, user ID, Token, Server) and so copy/past these parameters to a different SlideshowFx Menu, Module or inside SlideshowFx plug-in parameters. SlideshowFx User Guide Page 10 Figure 7: SlideshowFx expanded menu parameters App Key and App Secret with value “*” or Server set to “https:://www.oopstouch.com/trial” means that you are using OopsTouch demo App. In SlideshowFx plug-in parameters, set App Key and App Secret to your own App (see next sections) and clear parameter Server to switch to normal mode. Click on the button to reset menu to default plug-in parameters. Important note: You should never use button (and go through the grant process) to link your menu to your default user account. Copy/Past parameters to a different menu if they need to be linked to the same user account. Button gives a direct access to plug-in configuration. Display layout of galleries, albums and slideshow can be configured through the centralized plug-in parameters. Button gives a direct access to your Google+, Flickr, Facebook and Instagram user account. As soon as menu is configured and parameters saved, the button associated front page. will give you access to the The “Album” drop down list allows you to display all albums, only public albums or a selected album (this option doesn’t exist in Instagram). If you switch to expert mode (clisk on expand button ), parameter “Album URL” allows to select album (or gallery) based on its URL. “Hashtag” allows you to display a list of Google+/Picasa, Flickr or Instagram photos/videos based on their hashtag. SlideshowFx User Guide Page 11 VI. Display Galleries inside Modules Creation and configuration of SlideshowFx module is similar to menu creation (see previous section). Figure 8: SlideshowFx module parameters Module proposes additional parameters in tab “Layout” and “CSS”: Force module width Thumbnail per row Rows per page Navigation links Rating mode Thumbnail sorted by CSS code Ensure that module is published, parameter “Position” and “Menu Assignment” are set to the appropriate values else nothing will be displayed. Important note: You should never use button (and go through the grant process) to link your menu to your default user account. Copy/Past parameters to a different menu if they need to be linked to the same user account. See section “Display Gallery as standard menu” for a full description of various top left buttons. SlideshowFx User Guide Page 12 VII. Insert Galleries / Albums in articles SlideshowFx Package includes Editor Button aimed to insert any SlideshowFx gallery inside your article. To insert your gallery, put cursor in article text area and click on “SlideshowFx Gallery” button below text area. This will open a pop-up to configure your gallery. Select the Platform (Google+, Flickr, FaceBook, Instagram, YouTube or SlideshowFx). A list of default user’s albums is then displayed. Select one of the albums, all albums or only public albums. Select the Display mode (Gallery, Slider or Slideshow). Depending on this selection, addition tabs will be displayed allowing you to configure the display layout. Figure 9: SlideshowFx button in article editor Once you completed the gallery configuration, click on “Insert code” button. This will insert a {sfx …} line in your article. This line will be replaced by the gallery when article is displayed from front-end. At any time you can change the gallery configuration by putting cursor inside {sfx …} syntax and clicking on “SlideshowFx Gallery” button. By default, SlideshowFx button is disabled when article is edited from front end. You can activate it from SlideshowFx Editors plugin by setting parameter “Display in front end” to “Yes”. Next sections describe how to manually insert SlideshowFx galleries without use of the editor button. See section “Display Gallery as standard menu” for a full description of various top left buttons. SlideshowFx User Guide Page 13 1. Insert default gallery in article To insert the default gallery in a Joomla article, just create an article and insert below line: {sfx} The default gallery is a gallery linked to the Google+, Flickr, Facebook or Instagram username configured in SlideshowFx parameters (see next section for details on API configurations). If you have several API mode configured in SlideshowFx plug-in, then you can add the inline option “api” to force the API mode. Google+/Picasa: Flickr: Facebook: Instagram: YouTube: Local albums: {sfx api=’picasa’} or {sfx api=’google+’} {sfx api=’flickr’} {sfx api=’facebook’} {sfx api=’instagram’} {sfx api=’youtube’} {sfx api=’slideshowfx’} Note: Do not use double-quotes inside the brackets {sfx ...}. 2. Use of inline URL or RSS links inside article SlideshowFX can display a gallery or a single album (SlideshowFx Pro only) based gallery or album URL. Below some basic syntax: Gallery/Album: Slider: Album Thumbnail: Album Slideshow: {sfx url='<Gallery or Album Link>'} {sfx display='slider' url='< Gallery or Album Link>'} {sfx display='album-thumbnail' url='<Album Link>'} {sfx display='slideshow' url='<Album Link>'} Where: <Gallery Link> can be URL to a Google+, Facebook, Instagram gallery or YouTube playlists. <Album Link> can be URL to a Google+, Facebook, Instagram album or YouTube playlist. Direct link to YouTube video is also supported. In this case, SlideshowFx will display video thumbnail and click on this thumbnail will start video in slideshow. RSS link toward Picasa or Flickr galleries and albums are also accepted but no more proposed in last Picasa (migration toward Google+) and Flickr interfaces (remove since may 2013 with new Flickr offer). SlideshowFx User Guide Page 14 Notes: It is strongly recommended to switch Joomla article editor into source mode in order to avoid any HTML tags inserted in {sfx …} For the same reason, it is recommended to check article content in source mode after saving (some article editors can change article content with extra HTML tag during save process) Some example of URL: Google+ Gallery: https://plus.google.com/photos/.../albums?hl=en Google+ Album: https://plus.google.com/photos/.../albums/...?hl=en RSS Picasa Gallery: https://picasaweb.google.com/data/feed/base/user/... RSS Picasa Album: https://picasaweb.google.com/data/feed/base/user/.../albumid/... Flickr Gallery: https://www.flickr.com/photos/.../sets/ Flickr Album: https://www.flickr.com/photos/.../sets/.../ Flickr Collections: https://www.flickr.com/photos/.../collections/ Flickr Collection: https://www.flickr.com/photos/frizouilles/collections/.../ Flickr Public Galleries: https://www.flickr.com/photos/flickr/galleries/ Flickr Public Gallery: https://www.flickr.com/photos/flickr/galleries/.../ Facebook Gallery: https://www.facebook.com/.../photos Facebook Album: https://www.facebook.com/.../media_set?set=...&type=... Facebook Page Gallery: https://www.facebook.com/pages/.../...?sk=photos_stream&tab=... Facebook Page Album: https://www.facebook.com/media/set/?set=...&type=... Instagram Album: http://instagram.com/... YouTube Playlists: https://www.youtube.com/user/.../playlists YouTube Playlist: https://www.youtube.com/playlist?list=... YouTube video: https://www.youtube.com/watch?v=...&list=... YouTube video: https://www.youtube.com/watch?v=... Piwigo gallery: http://piwigo.org/demo/ws.php (or any Piwigo web service URL) Piwigo album: http://piwigo.org/demo/index.php?/category/America (for instance) Inline URL option can be used to display several user accounts inside a same website, including the display of private albums. Below the syntax: {sfx url=’URL’ token=’TOKEN’} Where: URL: Google+, Flickr, Facebook, Instagram url as defined above TOKEN: Token associated to the user account (not required for Piwigo servers) The option URL is not proposed for Instagram albums and deprecated on Flickr (see next option for alternative solution). Notes: You can get USER and TOKEN from SlideshowFx plug-in settings (see links click to get token). When token value is in-lined in article, the token field in SlideshowFx plug-in parameters must be empty. SlideshowFx User Guide Page 15 3. Use of inline user ID inside Joomla article The inline “user” option can be used to display several user accounts inside a same website, including the display of private albums. Below the syntax: {sfx api=’API’ user=’USER’ token=’TOKEN’} Where: API: The API mode (picasa, flickr, facebook or instagram) USER: Google+, Flickr, Facebook, Instagram user ID TOKEN: Token associated to the user account Notes: You can get USER and TOKEN from SlideshowFx plug-in settings (see links click to get token). In some cases USER includes a “@” character. This character must be replaced by “[at]” inside the article. When token value is in-lined in article, the token field in SlideshowFx plug-in parameters must be empty. Read section XIII (Advanced inline parameters) for details about inline parameters allowed. 4. Use of Flickr collections Support of Flickr collections has been introduced in SlideshowFx version 5.20. Collections are a set of albums or collections (exclusive). This nice feature allows you to create several galleries grouping albums per theme. To turn on collection, use the below syntax in your article: {sfx api=’flickr’ album=’collections’} Inline option "album" can be also a Flickr collection ID, something like xxxxxxxx-xxxxxxxxxxxxxxxxx. To get the collection ID, create an article to browse your collections (using syntax above), browse your collections to reach the one you want to display and get collection ID from the URL parameter "albid". Change your article to: {sfx api="flickr" album="xxxxxxxx-xxxxxxxxxxxxxxxxx"} Another solution is to use inline url parameter (see section dedicated to URL parameter). 5. Use of Flickr galleries Support of Flickr galleries has been introduced in SlideshowFx version 6.06.00. Galleries are a set of own user or any public photos. This nice feature allows you to create several albums grouping photos per theme. To turn on gallery, use the below syntax in your article: {sfx api=’flickr’ album=’galleries’} SlideshowFx User Guide Page 16 Inline option “album” can be also a Flickr gallery ID (something like xxxxxxxx-xxxxxxxxxxxxxxxxx). To get the gallery ID, create an article to browse your galleries (using syntax above), browse your galleries to reach the one you want to display and get gallery ID from the URL parameter “albid”. Change your article to: {sfx api=”flickr” album=”xxxxxxxx-xxxxxxxxxxxxxxxxx”} Another solution is to use inline url parameter (see section dedicated to URL parameter). 6. Use of hashtags Support of Google+, Flickr and Instagram hashtags has been introduced in SlideshowFx version 6.11.00. To turn on hashtag search, use the below syntax in your article: {sfx api=’picasa’ hashtag=’hashtag value’} {sfx api=’flickr’ hashtag=’hashtag value’} {sfx api=’instagram’ hashtag=’hashtag value’} It is not necessary to include hashrag character (#). Important note: The scope of the search hashtag depends on platforms: Picasa/Google+ Scope of search is restricted to Picasa/Googl+ user’s photos. List of hash tags using “,” as separator is accepted. In this case, SlideshowFx will display all photos matching all hash tags included in the list. Flickr Scope of search is restricted to Flickr user’s photos. Only 1 hash tag is accepted. Instagram Scope of search is not restricted to Flickr user’s photos but apply on all Instagram’s photos. Only 1 hash tag is accepted. SlideshowFx User Guide Page 17 VIII. Widgetkit integration Widgetkit is a toolkit for Joomla providing a simple and user-friendly way to enrich your website experience with galleries, slideshows, grids, switchers, and much more. Check Widgetkit site for details (http://yootheme.com/widgetkit). We assume, in this section, that you already installed Widgetkit and you have enough knowledge to create your own web page based on Widgetkit items. SlideshowFx Suite package includes a system plug-in for Widgetkit 2. This plug-in is a content provider to connect Widgetkit to your favored media storage (Google+, Flickr, Facebook and Instagram). This section describes how to install SlideshowFx system plug-in and perform the configuration inside Widgetkit. 1. Installation SlideshowFx Widgetkit system plug-in must be manually installed through the standard Joomla! extension manager. To get the plug-in, just decompress SlideshowFx Suite package and get file plg_widgetkit_sfx.zip from directory ”extra”. Plug-in is automatically activated and ready to use. After SlideshowFx Widgetkit system plugin installation, “SlideshowFx” will appear in Widgetkit content type select. 2. Configure Slideshow Widgetkit content provider Let start with an example of Widgetkit slideshow: Create an new article, From article editor, click on “Widgetkit” button (below article), From Widgetkit pop-up, click on “New”, Select “SlideshowFx” as “Content type”, Select “Slideshow” and click on “Create”, Give a name (“Test” for instance) to you Widgetkit (Field on top of the Widgetkit pop-up), Configure the URL to link this Widgetkit to the album that you want to display (Check section “Use of inline URL or RSS links inside article” for details about URLs) Turn “Show private albums” if you want to display a private album, Click on “Save”, After Save confirmed, click on “Cancel” to exit Widgetkit pop-up, Click on you newly created Widgetkit “Test”. This will close Widgetkit pop-up and insert a tag inside your article [widgetkit id="x" name="Test"]. Save your article and configure a menu to display it. Important Notes: At this point, use an URL pointing to an album (a set of photos). We’ll see later how to create a gallery (a set of albums). If save button is grayed, that means that you forgot to fill-in some mandatory fields. SlideshowFx User Guide Page 18 You can check result on front-end and go-back to Widgetkit (menu “Components / Widgetkit”) to configure the layout (select your widgetkit “Test” and click on “Settings”). 3. SlideshowFx content provider parameters Here is a short description of SlideshowFx content provider. URL: URL pointing to gallery or album that you want to display (Check section “Use of inline URL or RSS links inside article” for details) Show private albums: Allow or not display of private albums Max albums: Maximum number of albums to display. Leave empty for no limit. Albums thumbnail size: Define size of album thumbnails. SlideshowFx plug-in parameter is used by default. Max photos: Maximum number of photos to display. Leave empty for no limit. Photos thumbnail size: Define size of photo thumbnails. SlideshowFx plug-in parameter is used by default. Albums size: Define size of photos inside slideshow. SlideshowFx parameter used by default. Display albums in next Widgetkit: Used for display of galleries. See next section. In this current version, only default account can be displayed (account configured in SlideshowFx). 4. How to display a gallery A gallery is a set of album. Usually, you expect that a click on the album thumbnail open the album and display photos. Unfortunately Widgetkit will just start a slideshow with album’s thumbnails. To display the album, you have to: Create a Widgetkit to display the gallery (usually Widgetkit type is “Gallery” with name “My Gallery”), From “Content” tab of this Widgetkit “My Gallery”, configure “URL” to point to a gallery, Set parameter “Display albums in next widget” to “Yes”, From Widgetkit “Settings”, in “Lightbox” tab, disable “Lightbox” (Indeed, a click on thumbnail must open album page), From Widgetkit “Settings”, in “Layout” tab, set “Columns” (Phone portrait 1, Phone Landscape 2, Tablet 3, Desktop 4 for instance), Save the Widgetkit and insert it in your article, Create a new Widgetkit to display album (Widgetkit type can be “Gallery” as well with name “My Album”), From “Content” tab of this Widgetkit “My Album”, leave “URL” empty, Let parameters “Display albums in next widget” to default value “No”, From Widgetkit “Settings”, in “Layout” tab, set “Columns” (Phone portrait 1, Phone Landscape 2, Tablet 3, Desktop 4 for instance), From same tab, configure “Behavior” with value “Dynamic Grid” and 2 “Gutter (px)”, From Widgetkit “Settings”, in “Content” tab, disable “Show title” and “Show content”, From Widgetkit “Settings”, in “Lightbox” tab, enable “Show second media” Save the Widgetkit and insert it just after the first Widgetkit in same article. SlideshowFx User Guide Page 19 Important Note: Use only the first Widgetkit (“My Gallery” in this example) to configure content parameters. Indeed, all content parameters from second Widgetkit (“My Album” in this example) are ignored. Only Widgetkit settings are used to configure album layout. At the end you should have inside your article: [widgetkit id="x" name="My Gallery"][widgetkit id="y" name="My Album"] Save article and check result from front-end. You can then go-back Widgetkit settings to configure gallery layout (using Widgetkit named “My Gallery”) or album layout (using Widgetkit named “My Album”). You can change Widgetkit type as well as you want. 5. Widgetkit settings for display of galleries In SlideshowFx 6.19.x and previous versions, it was necessary to make a small patch in Widgekit gallery view. As of version 6.20.00, this is no more required. However when Gallery view is selected, you have to enable parameter “Show second media in Lightbox” in WidgetKit “Settings” tab “Lightbox”. SlideshowFx User Guide Page 20 IX. Display Galleries in Kunena forum As of SlideshowFx 6.03.00, Google+ and Flickr public albums can be displayed in any Kunena post. This requires SlidesowFx Kunena Integration plugin which is included in SlideshowFx Suite package but require a manual installation. Unzip SlideshowFx Suite package and get Kunena plugin from directory “pkg_slideshowfx_xxx/extra”. After installation, a new BBCode button will be added in post edit mode. To display a Google+ or Flickr album, write and select the album URL and click on SlideshowFx button. BBCode “[sfx][/sfx]” will be added. SlidesowFx Kunena Integration plugin have some specific parameters allowing you to adapt display inside Kunena forum. Some parameters are forced to a default value for a proper display. All other SlideshowFx parameters are taken from SlideshowFx content plugin. Figure 10: SlideshowFx Kunena Integration plugin You can add SlideshowFx inline parameters (see section XIII Advanced inline parameters for details) as follow: [sfx inline_parameter=value]Album URL[/sfx]. Simple quote around parameter value is not required. For instance [sfx display=slideshow]Album URL[/sfx] will display album as a simple thumbnail and click on thumbnail will start the slideshow. Notes: In Tapatalk, galleries are replaced by a simple link to the gallery. Display of Facebook, Instagram, YouTube or Google+, Flickr private albums is possible only for default user configured in SlideshowFx parameters. SlideshowFx User Guide Page 21 X. Background music Support of background music has been introduced in version 6.13.01 and still experimental. This option is available only when SlideshowFx is called from inline article. Syntax: {sfx audio=’url_to_audio_file’ autoplay=’0|1’ controls=’0|1’ loop=’0|1’ muted=’0|1’ audio_on=’all|album’ ...} Parameter url_to_audio_file can be ‘media/audio/file.mp3’ for instance. Default values are: autoplay=’1’ controls=’0’ loop=’1’ muted=’0’ audio_on=’album’ Parameter audio_on=’album’ allow background music only when user open an album. SlideshowFx User Guide Page 22 XI. APIs configuration 1. Google+/Picasa API configuration Even though principles described here still valid, below screenshots are outdated. You can follow instructions provided on YouTube tutorial at https://www.youtube.com/watch?v=wl4Esn3_kH4. In SlideshowFx content plug-in settings, go to section “Google+ API settings” and click on “Create or Edit your App”. Figure 11: Google+ user account configuration This will open a new webpage connected to Google+. Just sign-in with your Google+ account: From the Google Cloud Console, click on “CREATE PROJECT”. Then enter your “Project name”, leave “Project ID” with default value, check “I have read and agree to all Terms of Service…” and click on “Create”. SlideshowFx User Guide Page 23 Google+ will probably ask you to confirm your account through a security check. Just follow the instructions. At the end of this security check, your project will be created and you will be redirected to the Google Cloud Console project list. Refresh the page or ask again for project creation if your project doesn’t appear in the list. As soon as project appear in project list, click on it, then click on “APIs & auth” and “APIs”, turn on “YouTube Data API v3”. Click on “Consent screen”, provide information related to your application (Fields “EMAIL ADDRESS “ and “PRODUCT NAME” are mandatory) and click on “Save”. The consent screen will be shown to users whenever you request access to their private data using your client ID. Click on “Credentials” and in section “Oauth” click on “CREATE NEW CLIENT ID”. Select “Web application”, fill-in “AUTHORIZED JAVASCRIPT ORIGINS” and “AUTHORIZED REDIRECT URI” with values “Google+ API web origin” and “Google+ API web origin” provided by SlideshowFx and click on “Create Client ID”. Copy your “Client ID” and “Client secret” back into SlideshowFx Google+ API settings and save parameters. SlideshowFx User Guide Page 24 From SlideshowFx parameters, section Google+ API settings, click on “Get your App token”. Read instructions and click on “Accept”. Once the authorization accepted, all credential information will be displayed: Click on “Confirm”. Modifications will be highlighted in green in SlideshowFx parameters. Save parameters once again. You completed the configuration of your Google+ account. You can create a SlideshowFx menu, module or an article with only {sfx api=’picasa’} inside. SlideshowFx with display the gallery associated to your Google+ account. SlideshowFx User Guide Page 25 Notes: Old deprecated Picasa Oauth 1.0 protocol is no more supported by Google. Please upgrade to last SlideshowFx and create your own Google+ API key/secret as described in this section. Google+ App is required for display of YouTube playlists and videos. The inline parameter api=’picasa’ can be omitted if you didn’t configure another API (Flickr, Facebook or Instagram). By default, SlideshowFx will not display private albums even though you configured a token access. To display private albums, go to section “Filters” in SlideshowFx settings and change parameter “Access to private albums” to “Registered users” or “All users”. If you change parameter “YouTube Data API v3”, it can take several minutes before SlideshowFx get access to YouTube playlist. In between, Google+ API will report “BAD REQUEST” error message. At any time you can revoke a token by clicking on “Revoke a Picasa token”. SlideshowFx User Guide Page 26 2. Flickr API configuration Even though principles described here still valid, below screenshots are outdated. You can follow instructions provided on YouTube tutorial at https://www.youtube.com/watch?v=kGfFjXPBu2k. In SlideshowFx content plug-in settings, go to section “Flickr API settings” and click on “Create or Edit your App”. Figure 12: Flickr user account configuration This will redirect you to Flickr. Just sign-in with your Flickr account. From your Flickr home page, go to menu “Explore” and “App Garden”: SlideshowFx User Guide Page 27 From the App Garden, click on “Get an API key”: Choose Commercial or Non-Commercial App Key depending on your website purpose. Enter your application name (a name related to the gallery displayed on your website) and give a description of your application. Read the “Flickr API Terms of Use”, accept conditions (including Flickr members rights) and click on “SUBMIT”. This will display your App Key and secret code: Copy the App Key and secret code in SlideshowFx settings (see Figure 12: Flickr user account configuration) and save SlideshowFx parameters. Click on “Edit auth flow for this app” SlideshowFx User Guide Page 28 You will get the below form: Fill in “App Description”, select “Web Application” and configure “Callback URL” with URL provided in SlideshowFx parameters. App Logo is optional. Click on “SAVE CHANGES”. Your Flickr web app has been created. Go back to SlideshowFx parameters and configure the API key and secret code: Notes: At any time you can return to your Flickr App Key by clicking on “Edit or revoke an API key”. SlideshowFx User Guide Page 29 The Flickr username and user ID are the default OopsTouch parameters. You have to configure your own user name, user ID and a token by clicking on “Get your App token”. You will be redirected to Flickr which will ask you confirmation. Click on “OK, I’LL AUTHORIZE IT”. Note: Usually Flickr App and token are created from a same Flickr user account but they can be different. To do so, just sign-out after Flickr App creation and sign-in with a different Flickr account during token creation. Once the authorization accepted, a pop-up will give your username, user ID and token. Just click on “Confirm”. Modifications will be highlighted in green in SlideshowFx parameters. Save parameters once again. SlideshowFx User Guide Page 30 You completed the configuration of your Flickr account. You can create a SlideshowFx menu, module or an article with only {sfx api=’flickr’} inside. SlideshowFx with display the gallery associated to your Flickr account. Note: The inline parameter api=’flickr’ can be omitted if you didn’t configure another API (Picasa, Facebook or Instagram). By default, SlideshowFx will not display private albums even though you configured a token access. To display private albums, go to section “Filters” in SlideshowFx settings and change parameter “Access to private albums” to “Registered users” or “All users”. SlideshowFx User Guide Page 31 3. Facebook API configuration Even though principles described here still valid, below screenshots are outdated. Please contact our support at www.oopstouch.com/support if you need more help (English and French). In SlideshowFx content plug-in settings, go to section “Facebook API settings” and click on “Create or Edit your App”. Figure 13: Facebook user account configuration This will redirect you to Facebook. Just sign-in with your Facebook account: From the Facebook developers home page, click on “Create New App”: A pop-up will ask you the Facebook application name. Provide a name related to your website and click on “Continue”. Your Facebook App will be created with an App ID and App Secret code. SlideshowFx User Guide Page 32 From this summary App page, configure the following parameters: App Domains: your site domain name without http prefix (localhost in this example but more generally www.mydomain.com or mydomain.com) Disable Sandbox Mode (you can keep it enable to avoid use by other people) Check “Website with Facebook Login” and set your site URL with http prefix (URL profided by SlideshowFx in Erreur ! Source du renvoi introuvable.) Click on “Save Changes” Note: Your changes may take several minutes to propagate to all Facebook servers. SlideshowFx User Guide Page 33 In “Settings” menu on the left, click on “Permissions” set “User & Friend Permissions” to “user_photos” and click on “Save Changes”: Your Facebook App has been created. Go back to your Facebook App ID and Secret code (from “Settings” menu on the left, click on “Basic”). Copy the App ID and App Secret, go back to SlideshowFx Facebook API settings, past both information and click on “Save”. Note: At any time you can return to your Facebook App by clicking on “Check or remove a Facebook access token”. SlideshowFx User Guide Page 34 Now, you have to configure your Facebook user ID and token by clicking on “Get your App token”. A pop-up will ask you to authorize access to your Facebook information. Click on “Okay”. Note: Usually Facebook App and token are created from a same Facebook user account but they can be different. To do so, just sign-out after Facebook App creation and sign-in with a different Facebook account during token creation. Once the authorization accepted, a pop-up will inform you that your current user ID and token will be changed. Just accept the change. Modifications will be highlighted in green in SlideshowFx parameters. Save parameters once again. You completed the configuration of your Facebook Application and user ID in SlideshiwFx. You completed the configuration of your Facebook account. You can create a SlideshowFx menu, module or an article with only {sfx api=’flickr’} inside. SlideshowFx with display the gallery associated to your Facebook account. Note: The inline parameter api=’facebook’ can be omitted if you didn’t configure another API (Picasa, Flickr or Instagram). By default, SlideshowFx will not display private albums even though you configured a token access. To display private albums, go to section “Filters” in SlideshowFx settings and change parameter “Access to private albums” to “Registered users” or “All users”. Facebook access token must be reinitialized every 2 months or after each user password change. To do so, just click on “Get your App token”. SlideshowFx User Guide Page 35 4. Instagram API configuration Even though principles described here still valid, below screenshots could be outdated. Please contact our support at www.oopstouch.com/support if you need more help (English and French). In SlideshowFx content plug-in settings, go to section “Instagram API settings” and click on “Create or Edit you App”. Figure 14: Instagram user account configuration This will redirect you to Instagram. Just sign-in with your Instagram account and click on “Register Your Application”. SlideshowFx User Guide Page 36 Fill-in Application name and Description fields with information related to your website. Fill-in website and Oauth redirect URI with information provided by SlideshowFx (see Erreur ! Source du renvoi introuvable.). Then, click on “Register”. Your Instagram client has been created: SlideshowFx User Guide Page 37 Copy the Client ID and Client Secret, go back to SlideshowFx Instagram API settings (see Figure 11: Google+ user account configuration), past both information and click on “Save”. Note: At any time you can manage your Instagram client by clicking on “Create or Edit your App”. Now, you have to configure your Instagram username, user ID and token by clicking on “Get your App token”. Note: Usually Instagram client and token are created from a same Instagram user account but they can be different. To do so, just sign-out after creation of Instagram client and sign-in with a different Instagram account during token creation. Once the authorization accepted, a pop-up will inform you that your current user ID and token will be changed. Just accept the change. Modifications will be highlighted in green in SlideshowFx parameters. Save parameters once again. Note: Instagram token initialization is mandatory even though you want to display only public photos. SlideshowFx User Guide Page 38 You completed the configuration of your Instagram client and SlideshiwFx API configuration. You completed the configuration of your Instagram account. You can create a SlideshowFx menu, module or an article with only {sfx api=’instagram’} inside. SlideshowFx with display the gallery associated to your Instagram account. Notes: The inline parameter api=’instagram’ can be omitted if you didn’t configure another API (Picasa, Flickr or Facebook). Instagram API Term of Use do not allow download of more than 30 photos at same time. To overcome this restriction, you can increase the parameter “Max photos”. SlideshowFx will get photos using multiple consecutive queries. Value “0” can be used to download all photos. In this case, we strongly recommend you to activate SlideshowFx internal cache mechanism. By default, SlideshowFx will not display private albums even though you configured a token access. To display private albums, go to section “Filters” in SlideshowFx settings and change parameter “Access to private albums” to “Registered users” or “All users”. SlideshowFx User Guide Page 39 5. Piwigo API configuration Piwigo is a photo gallery software for the web that comes with powerful features to publish and manage your collection of pictures. Started in 2002, the project is now supported by an active community of users and developers. It supports numerous galleries of all sizes all over the world, from an individual ten photos party to the images stock of an agency. This scalability is supported by smart browsing capabilities based on categories and tags search. Piwigo is both web and photo standard compliant. And, icing on the cake, it is free and open source: Get and build your Piwigo server at http://piwigo.org Register to a Piwigo hosting solution from http://piwigo.org/hosting/ Whatever solution selected (your own server or hosted solution), SlideshowFx can integrate your Piwigo galleries inside Joomla article, module, menu, Kunena post or Widgetkit elements. Configuration is very easy. You just have to set “Piwigo server” in section “User account” of SlideshowFx plugin configuration with Piwigo web service URL. This URL is usually your Piwigo server URL ended with “/ws.php”. You can make a test with the Piwigo demo gallery: http://piwigo.org/demo/ws.php. By default, Piwigo returns small album thumbnail leading to bad image quality in Joomla gallery. You can force a larger thumbnail by configuring parameter “Album thumbnail size”. This assume that you configured Piwigo to provide such picture size. SlideshowFx User Guide Page 40 6. OneDrive API configuration Even though principles described here still valid, below screenshots could be outdated. YouTube tutorial can be found at https://www.youtube.com/watch?v=7YpZ_hGr2Kg. In SlideshowFx content plug-in settings, go to section “Microsoft OneDrive API settings” and click on “Get your App token”. Figure 15: Microsoft OneDrive user account configuration This will redirect you to Microsoft account developer center. Just sign-in with your OneDrive account and click on “Create application”. 16: Microsoft account developer center Fill-in field “Application name”. Use a name related to your website for instance. Read Microsoft services terms of use and click on “Accept”. Click on “API settings”, copy field “OneDrive redirect URI” from SlideshowFx settings and past value in field “Redirect URLs” in Microsoft OneDrive API settings. Field “Root domain” will be automatically configured. Save Microsft OneDrive parameters and click on “App Settings”. SlideshowFx User Guide Page 41 Copy “Client ID” and “Client secret” from Microsoft OneDrive App settings and past values in SlideshowFx settings “OneDrive client ID” and “OneDrive client secret”. Close Microsoft OneDrive window, save SlideshowFx settings and clisk on “Get your token”. You will be redirected to Microsoft OneDrive consent screen “Let this app access you info?”. Click on “Yes”. A new webpage will summarize your information (username, user ID and token). Click on “Confirm”. This will configure and highlight parameters inside SlideshowFx settings. Click on “Save”. Note: If you get an error page “We’re unable to complete your request” on get token, check browser URL to see the reason of the error. You should have something like “…&error_description=The+provided+value+for+the+input+parameter+’redirect_uri’+is+no t+valid…”. In this case check Redirect URI in App parameters. Click on OneDrive button to login to your OneDrive account. You can then upload your albums (one folder per album) in one of the below directory and configure “OneDrive Root directory” and “OneDrive path” fields to the appropriate value. Directory Applications/<Application name> Documents Photos Images OneDrive root Applications Documents Photos Root OneDrive path (keep this field empty) (keep this field empty) (keep this field empty) Images Photos can be uploaded through OneDrive web interface, OneDrive windows application or any OneDrive application for smartphones. Just connect the application to your OneDrive account. SlideshowFx User Guide Page 42 7. SlideshowFx API configuration SlideshowFx can be used to display photo and video albums stored locally on your server. To use this mode, just upload your photo/video albums in directory /images/slideshowfx/default. Photos must be JPEG files with “.jpg” as extension. Video must be mp4, ogg or webm formats (each video must be associated to a jpg photo for thumbnail creation). Then you can create a SlideshowFx Menu or Module and select platform SlideshowFx or insert in your Joomla article inline command {sfx api=’slideshowfx’}. The first time you display you album, SlideshowFx will build appropriated photos thumbnails and photos will be resized for web display. Photos and thumbnail size will depend on SlideshowFx parameters. All photos will be stored in directory /media/slideshowfx/cache/default. You can remove content of /media/slideshowfx/cache at any time to force photos refrech. You can keep default SlideshowFx API settings: Parameter Album cache can be disabled for debug purpose but is not recommended on production site since each time a visitor will display an album, SlidehowFx will build the appropriated sized photos. Photos resizing can be disabled when photos format can be directly used for the display on your website. A maximum 1800 pixels width and height is recommended. This parameter has no effect on thumbnails. GD library doesn’t support some JPEG photos (photos using transparency for instance). By default, SlideshowFx will display an alternate photo showing a question mark. You can disable error handling to force the use of original photos. To add a new user gallery, just create a new folder in /images/slideshowfx and puts user’s albums. Then use this folder name as user ID inside SlideshowFx Menu and Module (switch settings into expert mode to enter the user ID) or use inline command {sfx api=’slideshowfx’ user=’folder_name’} in articles. SlideshowFx will create associated thumbnails and resized photo for web display in a subdirectory of /media/slideshowfx/folder_name. SlideshowFx User Guide Page 43 Video Photos Albums SlideshowFx try to get albums and photos information from EXIF data stored in photos. When such data are not available information from file system are used. The table below gives more details about field used. Field Principal source Secondary source Thumbnail Photo cover.jpg. First photo found in folder. Name Album cover EXIF.IFD0.Title. Folder name. Description Album cover EXIF.IFD0.Comments. Published date Album cover EXIF.DateTimeOriginal. Updated date Same as published date. # of photos Count number of JPG files in album folder. Permissions Public. Thumbnail Original photo resized. Caption Photo EXIF.IFD0.Title. Description Photo EXIF.IFD0.Comments. Published date Photo EXIF.DateTimeOriginal. Updated date Same as published date. GPS position Photo EXIF.GPS Thumbnail Associated JPG photo resized Caption Photo EXIF.IFD0.Title. Description Photo EXIF.IFD0.Comments. Published date Photo EXIF.DateTimeOriginal. Updated date Same as published date. GPS position Photo EXIF.GPS Date of photo used as cover. File name. Date of file. Photo file name. Date of photo file. SlideshowFx is designed in such way that photos can be stored anywhere in the cloud. In this case, you have to configure SlideshowFx server and SlideshowFx secret parameters. Please contact support if you want to deploy this kind of topology. Notes: SlideshowFx requires EXIF and GD library on your PHP server hosting SlideshowFx API server. Execution of PHP script /plugins/content/slideshowfx/api/index.php must be allowed. Folders /media/slideshowfx must be writable. Joomla Search Engine Friendly URLs is supported except URL rewriting. Contact our support if you need such configuration or if you are facing troubles with other SEF extensions. .httaccss file generated by Admin Tool can block access to some pictures located in /media/slideshowfx directory. So far, the only workaround found is to disable parameter “Front-end protection” in .htaccess maker. SlideshowFx User Guide Page 44 XII. SlideshowFx parameters 1. Filters Access to your private albums can be forbidden or restricted to only registered users. Full resolution download is supported only in Picasa/Google+ mode. If your need this feature on Flickr, just let me know using SlideshowFx plug-in forum (full resolution is proposed only to Flickr Pro accounts). SlideshowFx User Guide Page 45 2. Gallery settings SlideshowFx Professional Edition for Joomla! 2.5 provides additional settings to configure galleries and albums layouts (standard layout, title on top, on left, on right, compact and justified layout). You can see some snapshots in annex section 1 (Gallery and album Layout) or have a demo on www.oopstouch.com by clicking on “Quick demo” link and select layout. SlideshowFx User Guide Page 46 3. Album settings SlideshowFx Professional Edition provides additional settings to configure galleries and albums layouts (standard layout, title on top, on left, on right and compact layout). You can see see some snapshots in annex section 1 (Gallery and album Layout) or have a demo on www.oopstouch.com by clicking on “Demonstration” button and select layout. SlideshowFx User Guide Page 47 4. Slideshow settings This section allows you to configure how slideshow is displayed. If some or all pictures are not correctly displayed, try to reduce parameter “Max. picture size” or ensure that resolution of the photos uploaded is big enough. SlideshowFx User Guide Page 48 5. Slider This section allows you to configure how Sliders are displayed in articles or menus. Similar parameters can be found in SlideshowFx module as well. SlideshowFx User Guide Page 49 6. Video settings For compatibility with different browser, when is enabled, it is recommended to keep default parameters as displayed here. Video is supported only in Picasa, Google+, Flickr and Instagram mode. The parameters “Player controls” and “Auto hide mode” are specific to Google+ Flash player. The parameters “Allow fullscreen” have no effect in Instragram mode. 7. Geolocation This section allows you to enable/disable geolocation support in SlideshowFx and customize most of display and controls options. When geolocation information is available and option enabled, a map pointer will be display on top/left of photo in slideshow. A click on this map pointer will switch display to map mode. A second click will switch back display to standard photo mode. See next screenshot for description of map display and controls. SlideshowFx User Guide Page 50 Display mode Pan control Street view Zoom control Map pointer Overview map Scale Note: You can change default map pointer by putting a PNG file in /media/slideshowfx (or any other subdirectory) and adding parameter geoPointer:’media/slideshowfx/pointer.png’ in “Customize / Advanced options” section. 8. Rating settings Rating mode cannot be enabled on website having Joomla! Cache enabled. To remove SlideshowFx database, don’t forget to set parameter “Allow clear votes” to “Yes”, save parameters and then click on link “Remove SlideshowFx database”. An alternative solution on is to install and unsinstall SlideshowFx Trial version available on www.oopstouch.com. SlideshowFx User Guide Page 51 9. ShareThis settings ShareThis option requires a valid ShareThis public key. Create your account sharethis.com and get your public key. SlideshowFx User Guide Page 52 10.Global settings You can drastically improve your website performances by activating SlideshowFx internal cache mechanism and configure a cache time. For galleries having a large number of albums, or albums having a large number of photos, you have to increase the default PHP PCRE’s backtracking limit. The default PHP value is 100000 which is suitable for around 200 albums/photos. Increase this parameters (adding 100000 step by step) until having a correct display of your bigger gallery and album. Force framework parameter can be set to “Yes” in some rare cases (website template based on Jquery for instance) when you get a Javascript error during web page loading. Another alternative is to activate jQuery framework in SlideshowFx plug-in. 11.Translations settings Date format/string and photo string are taken into account only when Multilingual support is disabled. Multilingual support can be enabled if you have installed a front-end SlideshowFx language file from www.oopstouch.com or if you have created your own language file based on /administrator/language/en-GB/en-GB.plg_content_slideshowfx.ini. Do not hesitate to share your translation on dedicated forum www.oopstouch.com. SlideshowFx User Guide Page 53 12.Advanced settings Here is the list of parameters that can be defined: timer: 4, overlayOpacity: 0.8, overlayFadeDuration: 400, overlayClose: true, resizeDuration: 600, initialWidth: 250, initialHeight: 250, imageFadeDuration: 400, captionAnimationDuration: 400 Default timeout for slideshow 1 is opaque, 0 is completely transparent Overlay fade-in/fade-out duration (in milliseconds) Close slideshow on click on overlay Photo resize duration (in milliseconds) Initial width of the box (in pixels) Initial height of the box (in pixels) Image fade-in duration (in milliseconds) Duration of the caption animation (in milliseconds) Notes: - Don’t forget the virgule “,” at the end of each line, except the last one. - Don’t write the field description above in blue. SlideshowFx User Guide Page 54 13.CSS Layout settings You can add extra CSS code here to adapt SlideshowFx colors to your website. For instance, default SlideshowFx colors will not fit with dark websites. The solution is to add some CSS code in this section. Below some basic example of CSS code: div.sfx { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); box-shadow: 4px 4px 2px transparent; } div.sfx_img { border-color: rgba(255, 255, 255, 0.4); } In this example, RGBA colors are used to get benefice of opacity parameter. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can use CSS Makers to get RGBA values (http://www.css3maker.com/css-3-rgba.html). You can remove shadow effet by changing box-shadow color to “transparent”. div.sfx { box-shadow: 4px 4px 2px transparent; } Do not hesitate to contact support on forum www.oopstouch.com for further help. SlideshowFx User Guide Page 55 XIII. Advanced inline parameters You can overwrite the default plug-in parameters by adding extra information in articles: {sfx album=’xxx’ Param1=’Value1’ Param2=’Value2’ …} Param1 and Param2 are extra parameters. Value1 and Value2 are associated values. There is no specific limitation in term of number of parameters. Simple brackets (‘) are used as delimiter for value. Double brackets (“) are not allowed. Parameters related to plug-in settings: user: Overwrite default username api: force API mode (picasa or flickr) token: Overwrite default token private: Overwrite default private access (0: Registered users only, 1: All users) gallery_layout: Gallery layout (standard, right, left, top or compact) albums_row: Number of album thumbnail per row. title_size: Font size to be used for album title. max_title_lenght: Max. 56ength for album title. album_layout: Album layout (standard, right, left, top or compact) pictures_row: Number of pictures 56humbnail per row. caption_size: Font size to be used for picture caption. max_caption_lenght: Max. 56ength for picture caption. size: Size of album thumbnail in slideshowmode. img_size: Set image size in slideshow. slideshow_caption: Overwrite default show caption option (0: Hide , 1: Show) download: Overwrite default allow download option (0: Disable, 1: Allow) repeat: Activate slideshow loopback mode. autoplay: Start auto slideshow. download: Allow picture download. debug: Overwrite default error report mode (0: Disable alerts, 1: Basic alerts, 2: Full report) sfx_options: Overwrite default SlideshowFX advanced parameters css_code: Overwrite default embedded CSS code … Specific inline parameters (no equivalent plug-in parameters): album: Album ID display: Display mode (gallery, album, album-thumbnail or slideshow) align: Define how to align thumbnail (left, right) Contact support if you need more help in inline parameters. SlideshowFx User Guide Page 56 XIV. References 1. SlideshowFx related links [1] Basic demo of photo gallery on Joomla connected to Google+: http://www.oopstouch.com/live/slideshowfx/plugin (Additional demos with Flickr and Facebook available. Check menus on the left) [2] Basic demo of photo gallery on WordPress connected to Google+: http://wp.oopstouch.com/?page_id=22 (Additional demos with Flickr and Facebook available. Check menu “Demonstration”) [3] Test SlideshowFx with your own Picasa, Google+, Flickr or Facebook user account: http://www.oopstouch.com/demo/slideshowfx/plugin [4] Check Joomla reviews on Joomla Extension Directory (rating at 4.88 out of 5.00) http://extensions.joomla.org/extensions/social-web/social-media/photo-channels/17357 [5] Flash animation showing SlideshowFx installation and basic configuration with Google+ account http://www.oopstouch.com/files/tutorials/flash/demo-googleplus.htm [6] Our support forum for any technical question, issue report or suggestion: http://www.oopstouch.com/support [7] Contact form for non related technical questions: http://www.oopstouch.com/contact [8] Get SlideshowFx for Joomla http://www.oopstouch.com/download/slideshowfx/plugin (Trial version available to check compatibility with your website. Limited feature list) [9] Get SlideshowFx Integration for Kunena http://www.oopstouch.com/files/sfx/extensions/plg_kunena_sfx.zip [10]Get SlideshowFx for WordPress http://www.oopstouch.com/download/slideshowfx/wordpress (Free version with limited feature available from WordPress repository) [11]Terms and conditions: http://www.oopstouch.com/conditions SlideshowFx User Guide Page 57 2. Google+ related links [12] Google+ https://plus.google.com [13]Google+ Web Applications https://cloud.google.com/console [14]Revoke a Picasa token https://accounts.google.com/IssuedAuthSubTokens [15]Picasa Web Albums Data API Terms of Service https://developers.google.com/picasa-web/terms 3. Flickr related links [16]Flickr http://www.flickr.com [17]The Flickr Developer Guide http://www.flickr.com/services/developer [18]Request a Flickr API Key http://www.flickr.com/services/apps/create [19]The Flickr APIs Terms of Use http://www.flickr.com/services/api/tos 4. Facebook related links [20]Facebook https://www.facebook.com [21]Facebook photos https://www.facebook.com/me/photos [22]Facebook Apps https://developers.facebook.com/apps [23]Facebook debug tool https://developers.facebook.com/tools/debug [24]Facebook Platform Policies https://developers.facebook.com/policy 5. Instagram related links [25] Instagram http://instagram.com [26]Instagram Terms of Use http://instagram.com/about/legal/terms [27]Instagram developers http://instagram.com/developer [28]Instagram API Terms of Use http://instagram.com/about/legal/terms/api SlideshowFx User Guide Page 58 6. Piwigo related links [29]Piwigo official website http://piwigo.org [30]Piwigo demo website http://piwigo.org/demo/ [31]Piwigo hosting http://piwigo.org/hosting 7. Other links [32] CSS code Maker http://www.css3maker.com [33]Widgetkit http://yootheme.com/widgetkit 8. Credits Slider mode is based on Camera Slideshow, Copyright © 2012 by Manuel Masia (www.pixedelic.com) and licensed under MIT license (http://www.opensource.org/licenses/mit-license.php). Justified layout in gallery and album views in based on Justified Gallery, Copyright © 2014 Miro Mannino (http://miromannino.github.io/Justified-Gallery). SlideshowFx User Guide Page 59 XV. Annexes 1. Gallery and album Layout SlideshowFx Pro provides 5 different layouts in gallery and album view. Here are some snapshots. Figure 17: Standard Layout Figure 18: Title on top SlideshowFx User Guide Page 60 Figure 19: Title on right Figure 20: Title on left SlideshowFx User Guide Page 61 Figure 21: Compact layout SlideshowFx User Guide Page 62 2. Feature list Platforms Support of Picasa, Google+, Flickr, Facebook, Instagram and Piwigo photos Support of Picasa, Google+, Flickr, Instagram and YouTube videos Support of private photos and videos (Picasa, Google+, Flickr, Facebook and Instagram) Support of local photo albums Features Display all albums, a single selected album or simple album thumbnail Display Flickr Collections and Galleries (including public Galleries) Display Google, Flickr or Instagram photos/videos based on hashtag. Optional automatic scrolling in gallery and album view Optional start slideshow on album click Optional photo animation in slideshow (zoom+move) Support photos and video geolocation and map display except with YouTube (API restriction) Support album, photos and videos rating Integration of ShareThis buttons connected to 40+ social networks Support download of photos in a selected resolution (Including full resolution when possible) Layout 6 different layouts (album and photo title on bottom, top, left, right or compact mode) Widgetkit Integration (SlideshowFx acts as content provider) Embedded HTML slider with image transition inside articles, menus and modules Tag “New” and “Updated” on top of thumbnails to highlight the last changes Possibility to merge several photo galleries into a single gallery Possibility to sort albums or photos/video by title, date, popularity or randomly Full control on elements display (buttons, information, colors) Automatic photo enlarge option in slideshow Optional automatic slideshow Performances Internal cache mechanism increasing response time and decreasing access to 3 rd parties API (Google+, Flickr, Facebook and Instagram) Pagination and scroll mechanism with support of large albums (Tested with 700+ photos on Google+ / 2000+ photos on Flickr) Search engine optimization Possibility to display album description Page title automatically initialized with current album title HTML meta description update based on albums descriptions SlideshowFx User Guide Page 63 Access control Possibility to restrict private albums to registered users Possibility to restrict photo download to registered users Possibility to restrict photo and video rating to registered users Compatibility Support of responsive templates Automatic thumbnail size calculation to fit to the display device Compatible with last Joomla! Platforms 2.5 and 3.x Native compatible with both Jquery and Mootols frameworks Compatible with last browser Firefox, Chrome, Safari, IE, Opera Conditions Full feature Trial version to check compatibility with your website before any purchase Full documentation (50+ pages) 1 year free upgrade and support 30 days money back No advertising link SlideshowFx User Guide Page 64 3. Software upgrade from Trial to Pro version SlideshowFx can be installed on top of Trial version, however, there are some points described below to check in order to ensure that Pro is not running into Trial mode. Ensure that you have created your own Google+, Flickr+, Facebook or Instagram App. Configure App key and Secret in SlideshowFx settings, in one of the sections API settings (“*” force plugin to run into demo mode). Get a new token (click on Get your token button in SlideshowFx settings, in one of the sections API settings. See sections API configuration for details. Then do the following checks: Menu Components / SlideshowFx Gallery / Tab User accounts / API settings: Parameter “Server” must be empty or hidden. Menu Components / SlideshowFx Gallery / Tab User accounts / API settings: Parameter “Default Server” must be empty. In any SlideshowFx Menu, parameter “Server” must be empty or hidden (switch to expert mode by clicking on [+] button). In any SlideshowFx Module, parameter “Server” must be empty or hidden (switch to expert mode by clicking on [+] button). If you continue to get error messages “Pro version is running in demo mode” or “Your Trial period expired”, please, contact our support using contact form with below information: URL to front-end web page where error is displayed, Platform used (Google+, Flickr, Facebook or Instagram), Your App ID, Your App Secret, User ID, Token, Admin login/password. We will help you to fix the issue. SlideshowFx User Guide Page 65 4. Software upgrade from a very old version SlideshowFx starting from version 5.0 is dedicated to Joomla! 2.5 and 3.x. Here is a list of points to take care during plug-in upgrade from a very old version: Starting from version 6.09.00, SlideshowFx supports display of YouTube playlists and videos. However, a Google token renewal is required (click on Get Token button from Google+ user account in SlideshowFx parameters). SlideshowFx version 6.0 is a full redesign of the plug-in. In case of problem after upgrade from a previous version please contact support. Tokens created with SlideshowFx version 5.x and former versions can be used with last SlideshowFx 6.x. However, to get a new token from Flickr, Instagram you need to change your API Key configuration with new callback URL. As of version 5.05, an old workaround for Google Chrome as been removed. There is a risk of regression in the calculation of thumbnail width in gallery and album view. Please, contact support through forum in case of problem. As of version 5.01, the parameter “Force Mootools” is replaced by “Force framework”. If “Force Mootools” was set to “Yes”, the new parameter “Force framework” must be set to “Yes” after upgrade to SlideshowFx 5.01 or higher. As of version 4.04 for Joomla 2.5 (compatible 3.0), both PHP #strftime and #date formats are accepted but #strftime format is deprecated in Joomla! 3.0. After installation, whatever your Joomla! Version, please take care on display date format and report any problem. Video download is not allowed (picture is returned instead of video). After upgrade to SlideshowFx 4.03 you may have to change basic syntax {sfx rss=’RSS link’} to {sfx rss=’RSS link’ display=’slideshow’} since default display mode has been changed to gallery or album depending on RSS or Google+ link. After upgrade to SlideshowFx Pro 3.09 (or higher version), check button style in ShareThis option. After upgrade to SlideshowFx Pro 3.07 (or higher version), if date is not correctly displayed please check date format in Advanced Parameters (removing the date format will restore default parameter). Do not hesitate to contact support on forum www.oopstouch.com for more help. SlideshowFx User Guide Page 66 XVI. History Edition 01 02 Date June 4th, 2013 June 27th, 2013 02.01 02.02 June 28th, 2013 September 7th, 2013 02.03 November 16th, 2013 03 May 8th, 2014 04 June 5th, 2014 05 06 June 12th, 2014 June 28th, 2014 07 July 6th, 2014 08 July 12th, 2014 09 August 19th, 2014 10 October 11th, 2014 11 December 6th, 2014 12 January 12th, 2015 13 January 20th, 2015 14 February 20th, 2015 15 February 27th, 2015 16 March 22nd, 2015 17 April 3rd, 2015 18 May 25th, 2015 SlideshowFx User Guide Comment First edition based on SlideshowFx version 5.18. New edition based on SlideshowFx version 5.18. Description of Flickr collections. General presentation and advanced inline parameters added. Add information related to CSS code parameter. Section software upgrade updated. Add link to Flash animation (basic installation and configuration) Section “Tips and tricks” added (SlideshowFx inside a module). Instruction added in case of Picasa authentication error. URL provided in clear in section references. Update according SlideshowFx version 5.30: - Support of Google+ Oauth 2.0 protocol. - Support of full screen mode using 3rd party javascript. Update for SlideshowFx version 6.0 (Packaged with menu and module extensions). Update for SlideshowFx version 6.02.00 (SlideshowFx Kunena Integration). Update for SlideshowFx version 6.03.00 (Support of Flickr videos). Update for SlideshowFx version 6.04.00 (Support of Instagram videos). Update for SlideshowFx version 6.05.00 (Support of geolocation). Update for SlideshowFx version 6.05.05 (Support of full screen mode). Update for SlideshowFx version 6.06.00 (Support of Flickr galleries, automatic scrolling and animations). Update for SlideshowFx version 6.07.00 (Support of Slider mode based on Camera Slideshow from Manuel Masia / See section credits for details). Update for SlideshowFx version 6.08.00 (Support of local photo albums) Update for SlideshowFx version 6.09.00 (Support of YouTube playlists and videos) Update for SlideshowFx version 6.09.03 (Support of local videos) Update for SlideshowFx version 6.10.00 (SlideshowFx Editors button added) Update for SlideshowFx version 6.10.01 (Support of Instagram hashtag added) Change in Google+ App configuration for support of YouTube. Update for SlideshowFx version 6.10.03 (Support of Flickr hashtag added) Update for SlideshowFx version 6.11.00 (Support of Google+/Picasa hashtag added) Description of manual install Page 67 19 June 20th, 2015 20 June 22nd, 2015 Update for SlideshowFx version 6.13.02 (Support background music / Upgrade from Trial to Pro version). Old Picasa Oauth 1.0 removed (no more supported by Google). 21 June 23rd, 2015 Add tips related to Admin Tool use with SlideshowFx API. 22 July 12th, 2015 23 August 1st, 2015 24 August 30th, 2015 25 October 18th, 2015 26 December 30th, 2015 Update for SlideshowFx version 6.14.00 (New justified layout). Update for SlideshowFx version 6.15.00 (Widgetkit Integration) Update for SlideshowFx version 6.16.00 (Piwigo Integration) Update for SlideshowFx version 6.18.00 (OneDrive Integration) Link to YouTube tutorials added. 27 February 13th, 2016 28 April 2nd, 2016 SlideshowFx User Guide Update for SlideshowFx version 6.20.00 (Enhancement of WidgetKit Integration) List of advanced Slideshow parameters added. Page 68