Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; WP_MatchesMapRegex has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-includes/class-wp.php on line 635

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Translation_Entry has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-includes/pomo/entry.php on line 14

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_Reader has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-includes/pomo/streams.php on line 12

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_FileReader has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-includes/pomo/streams.php on line 106

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_StringReader has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-includes/pomo/streams.php on line 150

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_CachedFileReader has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-includes/pomo/streams.php on line 189

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_CachedIntFileReader has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-includes/pomo/streams.php on line 204

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; WP_Widget_Factory has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-includes/widgets.php on line 403

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; BbpressWpTweaks has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-content/plugins/bbpress-wp-tweaks/bbpress-wp-tweaks.php on line 39

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; BbpressWpTweaks_Login_Links_Widget has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-content/plugins/bbpress-wp-tweaks/bbpress-wp-tweaks.php on line 319

Deprecated: Function create_function() is deprecated in /homepages/31/d167922195/htdocs/photofolders/wp-content/plugins/bbpress-wp-tweaks/bbpress-wp-tweaks.php on line 485

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bestcommentersclass has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-content/plugins/best-commenters/best-commenters.php on line 29

Deprecated: Array and string offset access syntax with curly braces is deprecated in /homepages/31/d167922195/htdocs/photofolders/wp-content/plugins/capcc/capcc.php on line 392

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; capcc_captcha has a deprecated constructor in /homepages/31/d167922195/htdocs/photofolders/wp-content/plugins/capcc/capcc.php on line 317

Deprecated: Array and string offset access syntax with curly braces is deprecated in /homepages/31/d167922195/htdocs/photofolders/wp-content/plugins/live-comment-preview/live-comment-preview.php on line 101

Deprecated: Function create_function() is deprecated in /homepages/31/d167922195/htdocs/photofolders/wp-includes/pomo/translations.php on line 171
Photo Folders, Just another WordPress site

Documentation : widgets

Published on 15 June 2014 and updated on 28 June 2014 -
PDF Print This Page

Photo-Folder's pictures widgets are key functions of the plugin. They enable you to embed pictures from Photo-Folders into your posts in Wordpress or in any other web site.

The differentiation comes from their diversity, and their support of touch based interfaces. They can be embedded in web site: through JavaScript calls, Iframe calls, PHP calls embedable in a Wordpress theme as well as with a Wordpress SHORTCODE in the web site running the plugin.

Photo-Folders's widget generator is interactive. You don't need to program to visually create your widget. The related widget code is then generated automatically and be quickly embedded into your web site code.

Widgets can contain pictures from an album as well as from a search result, providing a great flexibility on the way pictures can be presented. You can for example show in a widget the most recent 12 pictures containing a given name from a given album or group. You can also create a widget from a TOP category. It will showcase the TOP items you have in a given category and make all related pictures available from one click.

Ten different widgets

Photo-Folders offers you ten different presentation widgets covering a wide range of pictures presentation modes in a web site.

  • A navigable gallery displaying a picture and enabling picture navigation in the selection (album, search result) which was used when generating the widget code. Navigation can be done with the mouse or keyboard. You can open the pictures in full screen mode and launch a slide show. On tablets, you can swipe left or right the picture to move around in the current view.
  • A navigable gallery with the same feature as the previous one, but with a thumbnail view of all the selection pictures. You can select the picture to view with clicking on its thumbnail.
  • Only one picture. Can be useful to track which picture from which album sits in which post.
  • A series of picture presented one after the other. You can specify the height of the pictures or ask it to occupy the full width of your page.
  • Thumbnails presented one after the other with or without a frame.
  • Horizontally justified thumbnails in the available space or a specified width. Like for all previous widgets, you can click on each image or thumbnail to view the full album in Photo-Folders.
  • Vertical columns of thumbnails in the available space or a specified width. Like for all previous widgets, you can click on each image or thumbnail to view the full album in Photo-Folders.
  • A slides mode presentation where all pictures fit into a square frame.
  • An horizontal slider bar containing a scrollbar.
  • At last, a list of the last published albums on Photo-Folders, which can have a fixed width or use the available width. You'll usually put this in your theme sidebar template and specify the number of albums to show. You can still put it elsewhere, even in a post. But the content is dynamic and will change over time.

We'll now go through each and every widget type first, with the user viewpoint, then look at how it's generated.

Navigable gallery

The first widget type displays one picture at a time and a buttons menu enabling navigation within the displayed album or search result.

One menu icon can be used to display the current picture in full browser mode. It can also be done with clicking around the picture within its frame. Once in full browser mode, you can use the mouse or keyboard accelerators to move around in the pictures selection (left, right, home, end keys). One ESCAPE key from the full browser mode displays the post back, and the widget will contain the last picture seen in full browser. You don't lose the context of pictures navigation, at least while the page is active.

You can launch a automatic slideshow with the related buttons. In full browser mode, you can start/stop the slideshow with the space bar.

On a tablet, you can use left and right gestures to move around pictures when the widget is shown full screen. A touch down will return the view to the normal post view.

At last, one button is used to ask the download of the presented pictures (asking an email) and another one to access the pictures selection in the Photo-Folder plugin.

Navigable gallery with thumbnails

This second widget has the same features than the previous one plus the display of the selected pictures thumbnails below its menu. You can click on each thumbnail to display its related picture above.

This makes sense for not too large albums or search results. The menu is optional.

Large pictures

Two formats enable a presentation of pictures in large format: one with only one picture and the other with pictures display one on top of the other.

The pictures can be framed or not. They can be presented to occupy the whole available width or with a defined height. They can have picture names and description captions. When clicking on the picture, you can look at the album or search result in the Photo-Folders plugin interface (provided this feature has not been deactivated in the plugin's settings, a way to avoid users looking at the plugin interface). The picture title and description maximum width is that of the picture frame.

Thumbnail widgets

Three thumbnails presentation modes are also available.

The differences sit in the way titles and labels are presented, in thumbnails framing and in the possibility to justify thumbnails in a given width or in the available horizontal space.

In the justified mode, the pictures caption shows up when you move the mouse cursor over the thumbnails.

This widget can be used in a blog sidebar.

This widget is used to navigate horizontaly in a list of picture thumbnails with a scrollbar. The widget width is either fixed or filling out the available horizontal space.

This last widget displays the list of the last published or changed albums in the plugin. The list is presented in descending date order with the most recent album first. The sort date is the most recent creation date for embedded pictures.

Widget display on tablets and smartphones

The gallery widgets have some touch support on tablets.

Once the full screen mode is launched, touch can be used to select the next or previous picture. A downward swipe will exit the full screen view to move back to the regular post view.

On a smartphone, widgets behave nicely so that pictures from galleries occupy the whole screen width. Pistures are displayed in low-resolution to save download bandwidth.

Widget generator

Photo-Folders widgets are embedded in web sites web either with Wordpress SHORTCODE when the site is ont the same Wordpress instance than Photo-Folders or with Javascript or IFRAME calls, for external sites. These last settings are described later in this documentation.

But you can avoid getting into the details of these settings since all these widgets can be created visually thanks to the widget generator. It's launched from the dialog boxes from an album, a search result (simple or multi-criteria) or from a TOP people category.

The widget generator is used through several steps. The first one consists in selecting the type of widget you want to use as well as its sizing settings.

You then chose the display settings which vary from one widget to the other. You can chose to display the photo site logo before the widgets, to display or not the picture names and descriptions, to frame pictures, etc..

The triangular button enables the administrator to save the current widget settings and make it the default widget when launching the widget generator.

Here is an example of using the widget generator: we've selected an album, sorted it by descending date and then launched the widget generator. We selected to display justified thumbs for the last 10 pictures. And here we are with a widget showing the most recent 10 pictures from the album. It could be the same with a search of all picture of somebody with its name.

The last step is about integrating the widget in your web site.

If it's your own Wordpress site and you are logged as its administrator, you can then directly embed the defined widget in a new post having a name automatically generated with the current view name. The post will automatically contain the widget SHORTCODE and you can then edit the post in the Wordpress admin interface with surrounding text.

You can embed the widget in an existing Wordpress site post of page, including those in draft mode. You select it in the provided drop down list, these being sorted by creation date with the most recent being first in the list. This integration is automatic if you want to place the widget at the beginning or the end of the post or page. When you need to place it in a specific place within the post/page, the corresponding insersion button will create a new browser tab showing the Wordpress admin page for editing this post/page.

Once being in the Wordpress editor, you can embed the widget at the current cursor position in the editor with using the Photo-Folders button that sits in the Wordpress editor menu. This button will show a dialog box containing indications on the widget and its SHORTCODE. You then click on the "Insert" button to embed the widget. That simple!

Once the widget in the new post or an existing post, a dialog is shown with the link to directly access the post or its Wordpress admin edit page.

The links between albums and the blog post are shown in the album description text when it's displayed below the album name.

On top of the previous methods, widgets are embedable in web sites with other coding means. The + icon shows the various codes used to embed a widget in a site.

Let's look at each of these methods one by one:

  • In the Wordpress blog hosting Photo-Folders, using a SHORTCODE with [photo-folder (settings) ]. In a SHORTCODE, accented letters are not encoded and show up in clear tet (usually, in ISO8859 codepage). This corresponds to the methode that was automatically handled as seen previously. Here's an example:

[photo-folder group="2013" album="TechDays%20Feb2013" path="Day%201/" photo="Audience%20(5).jpg" format="widget"]

The "path" and "photo" settings are used to define the picture to display. By default, the widget will display the first picture of the pictures selection used.

You can define the height and width of the widget when relevant with: width=nnn and height=nnn (in pixels) as well as the language used for tooltips with lang='FR' or lang='EN'. The default widget width is 540 pixels and the default height is 440 pixels. It's computed to optimize 2/3 ratio pictures in landcape mode. The "format" setting defines the type of widget being used. Like "widget" for a navigable gallery, "one" for one picture, "flow" for thubnail presentation. This last mode looks like many Wordpress photo plugins.

  • In your own Wordpress site, with some PHP code that can be embedded in a template, like in the usual sidebar.php file handling the right sidebar of a Wordpress two columns site. This is particularly useful for the last published albums widget.
  • In an external site, with a JavaScript script. Groups, albums and picture names must be encoded in hexa UTF8. For example, an é will be coded as %C3%A9 and white space as %20.

<script

src='http://www.oezratty.net/wordpress/wp-content/plugins/photo-folders/photo-folders.js?group=2013

&album=Girls%20in%20Tech%20Lady%20Pitch%20Night%20Apr2013

&lang=FR'

type='text/javascript'>

</script>

<div class='photo-folders'>

</div>

  • In an external site, with an IFRAME, usefull for some aggregation sites.
  • In an external site, with an http call, also usefull in some aggregation sites.

The widget works indifferently with a SHORTCODE and JS call with your own blog. It's however more efficient to use a SHORTCODE.

Here's the details of SHORTCODE and JavaScript widget options. You won't need to look at this on a regular basis since the code is entirely generated by the widget generator. You can still need to tweak this code such as when you want to tune the user language or the widget size.

  • The flowlarge option indicates the widget will occupy the whole available width in your blog or web site.
  • The nbrpics option defines the maximum number of pictures to display for the thumbnails based widgets.
  • The nbritems option defines the number of albums to publish for the widget listing the last published albums.
  • The picsortmode option defines the pictures sorting mode: 0 for a sort by picture name and 1 for a sort by date (picture taken).
  • The picsortdir option defines the pictures sort direction: 0 for an ascending sort and 1 for a descending sort.
Widget generator for each widget type

Let's now look at the widget generator options for each widget type.

Here is the navigable gallery, here, with the pictures thumnails picker.

The navigable gallery widget uses the same navigation buttons as in the plugin. You can navigate in the widget in its simulator. In galleries, the visible picture at widget launch will be the one you have selected before generating the widget code. You can even launch an automatic slideshow starting from this picture, when your blog page loads.

The widget size is determined interactively in the widget generator but can be later edited in the generated code. In the widget generator, the size field can be tuned with the small up and down arrows to increase and decrease sizes by steps of 10 pixels for images/thumbnails size and 1 pixel for gutter siee. The size changes are immediately implemented in generated widget just below.

Here is the single picture view can optionnaly contain the picture's title and description. What's the point to use this very simple widget ? You can track the number of tumes the picture was shown and track links with their related albums. You can also enable your users to access the whole album in Photo-Folders. Here, you can change the height of the picture. The width is then computed automatically. The picture can also occupy the whole available width in the page. In that case, the picture height is computed automatically. The image horizontal alignment can also be tuned (left, centered, right).

In the view with pictures one after the other in column, we have a very classical view to value the work of photographers in photo blogs. Like for the single picture widget, you can decide whether to display the pictures titles and description. You can also tune the pictures height or use the available width.

Here is the view with picture thumbnails organized horizontally. It provides a good overview of the picture in an album. The view automatically adapts to the site width. Here, as well, you can tune the thumbnail's height.

Here is the view with thumbnails arranged horizontally and justified. Thumbnails height is finely tuned to make sure they are justified in the available width.

Here is the view with vertical columns of thumbnails automatically laid out, like with Pinterest. It's automatically laid out in your web site and the post text will flow before and after this widget.

Here is the slides widget where you can suppress the slide background if necessary.

The view can be modified to control the widget background, frame around pictures, logo presence, and albums and pictures title and description presence.

Here is the horizontal slide view. You can define its width or use the whole available width, the thumbnails height, and the margin between thumbnails.

At last, here is the last albums widget that can use the whole available width or a fixed width, and have or not album's descriptions. This view is bound to be integrated in one's blog theme through the PHP code provided by the generator. It can be incorporated in the sidebar.php file from your theme if accessible (some themes use their own widgets...). You can also define the width of the album thumbnails and the gutter margin between the thumbnails and the album description text on their right. The total widget width is better configured as "All width" to occupy the whole sidebar width, unless the theme requires a fixed width for this widget (for some non responsive designs).

The admin can also define the albums thumbnail source: the default album thumb or the thumb from the most recent taken picture in the albums.

The last albums view can also be shown in rows of square thumbnails.Their description can be positioned over or below the thumbnails, and when over, it can be shown right away or only when the cursor slides over the thumbs.

Other widgets development

Thanks to Photo-Folders JSON APIs, you can decide to develop your own widget code. These APIs enable a JavaScript widget to poll your site with a list of groups, group's albums and one album's pictures as well as a search's result. With the pictures list, you get access to the pictures and their thumbnails urls to display whenever you want.

These APIs are functional only when JSON is activated in the Photo-Folder plugin settings (in the rendering tab).

Help files SHORTCODE

Photo-Folders contains another SHORTCODE enabling the embedding of the plugin help files content in any blog post or page, when you want to expose this help in a specific manner to the users of your blog using Photo-Folders.

The HTML code to use follows this format :

[photofolderhelp file="features" images="true" lang="EN" ]

Where file= tells the type of help file to show (among: features, display, navig, widget, search, top, keyboard, tablet, admin, dev, upload, stats, faq, making, privacy). Images indicates whether the help pictures will be shown (true) or not (false). Lang tells which language should be used (EN for English and FR for French).

Published on 15 June 2014 and updated on 28 June 2014 Page from | 1495 lectures

PDF Print This Page     

Add one comment

You can use these tags in your comments :<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> , given a preview is available at the bottom of this page after the captcha image.

Captcha
Enter the letters you see above.

1,495 views

Last posts

Downloads


Last comments

“Hi, this is a comment. To delete a comment, just log in and view the post's comments. There you will have the option to edit or delete them....”

Tweets on @photofolders



Email subscriptions

To get emails alerts when a new post is published on this blog:


Catégories