DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:gallery

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
plugin:gallery [2016-02-17 13:06] – [Download] 159.51.236.31plugin:gallery [2024-02-28 20:13] (current) – I tested this plugin with Kaos having template bootstrap3 quite extensively johng
Line 1: Line 1:
 ====== Gallery Plugin ====== ====== Gallery Plugin ======
 +
 ---- plugin ---- ---- plugin ----
-description: This Syntax Plugin allows you to embed an automatically created image gallery into a page.+description: This Syntax Plugin allows you to embed an automatically created image gallery into a page
 author     : Andreas Gohr author     : Andreas Gohr
 email      : andi@splitbrain.org email      : andi@splitbrain.org
 type       : syntax type       : syntax
-lastupdate : 2016-01-24 +lastupdate : 2023-12-08 
-compatible : Adora BelleWeatherwaxponder stibbonsHrunDetritus+compatible : !greebo!hogfather!igorJack JackrumKaos
 depends    :  depends    : 
 conflicts  conflicts 
Line 16: Line 17:
 bugtracker : https://github.com/splitbrain/dokuwiki-plugin-gallery/issues bugtracker : https://github.com/splitbrain/dokuwiki-plugin-gallery/issues
 donationurl: http://donate.dokuwiki.org/Gallery donationurl: http://donate.dokuwiki.org/Gallery
 +
 +screenshot_img: https://i.imgur.com/rj4v2c3.png
 ---- ----
 +
 +This plugin shows a list of image thumbnails linking to larger versions of the image.
 +
  
 ===== Download ===== ===== Download =====
  
-Use the download link given above in the plugin manager or to download the plugin manuallytest+Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually. 
 + 
 +==== Requirements ==== 
 + 
 +Your wiki needs to be able to resize images. Either by having the GD PHP extension installed or by configuring the [[config:im_convert]] option. 
 + 
 +Additionally, to have thumbnail creation work for external images you need to set [[config:fetchsize]] big enough to get the remote images downloaded.
  
 ==== Changes ==== ==== Changes ====
Line 28: Line 40:
 ===== Syntax ===== ===== Syntax =====
  
-basic gallery can be added by selecting a [[:namespaces|namespace]] like this:+Images can be selected via three different sources and accept various [[#alignment|alignments]] and [[#options]]. 
 + 
 + 
 +==== Source: Namespace/Image ==== 
 + 
 +A gallery can be added by selecting a [[:namespaces|namespace]] like this:
  
   {{gallery>:namespace}}   {{gallery>:namespace}}
Line 34: Line 51:
 All image files in the selected namespace will be added to the image gallery. Don't forget the ":" in front of the namespace. All image files in the selected namespace will be added to the image gallery. Don't forget the ":" in front of the namespace.
  
-Instead of using a whole namespace of images, you can also specify a single image -- this makes more sense when combined with the lightbox mode (see below).+Instead of using a whole namespace of images, you can also specify a single image.
  
   {{gallery>:namespace:someimage.jpg}}   {{gallery>:namespace:someimage.jpg}}
  
-The created gallery can be aligned by using white space (defaults to centered):+[[#Options]] (see beloware added after the namespace/image, separate by a question mark ''?''.
  
-  {{gallery> namespace}} (right aligned) +  {{gallery>:namespace:someimage.jpg?options go here}} 
-  {{gallery>namespace }} (left aligned) + 
-  {{gallery> namespace }} (centered)+==== Source: Media Feed ====
  
 Instead of a namespace, you can also give an HTTP(s) URL to any [[wp>Media RSS]] or ATOM feed with enclosures (as produced by most photo sharing sites like Flickr). The images will then be pulled from that feed instead: Instead of a namespace, you can also give an HTTP(s) URL to any [[wp>Media RSS]] or ATOM feed with enclosures (as produced by most photo sharing sites like Flickr). The images will then be pulled from that feed instead:
  
-  {{gallery>http://www.23hq.com/rss/schabloni}}+  {{gallery>https://www.23hq.com/rss/schabloni}}
  
-Note: since the question mark is used to separate the parameters (see next section) the URL can not contain any question mark. To use such a feed URL with the gallery plugin, just use one of the many short URL services like [[http://bit.ly]].+Note: since the question mark is used to separate the [[#options]] (see below)the URL can not contain any question mark. To use such a feed URL with the gallery plugin, just use one of the many short URL services like [[https://bit.ly]].
  
-E.g. instead of ''%%http://api.flickr.com/services/feeds/photos_public.gne?id=22019303@N00&lang=en-us&format=rss_200%%'' use a shortened URL like ''%%http://bit.ly/HurZM%%''.+Again, options are added after a question mark ''?''.
  
-Additionally, to have thumbnail creation correctly working you need to set [[config:fetchsize]] big enough to get the remote images downloaded.+  {{gallery>https://www.23hq.com/rss/schabloni?options go here}}
  
-==== Parameters ====+==== Source: Image List ====
  
-number of parameters can be set by appending them with ''?'' character to the namespace or image. Each parameter needs to be separated with a ''&'' characterDefaults for all parameters can be set in the config manager. If a parameter is enabled by default it can be disabled in the syntax by prefixing it with the syllable ''no''E.g. the parameter ''cache'' is usually enabled and can be disabled using the keyword ''nocache''. Below is a list of all recognized parameters+different syntax allows you to manually specify a list of images, with one line per image. Images can be local and external[[#options]] go into the opening tag in this case.
  
-^ Parameter                      ^ Default         ^ Description    +<code> 
-| ''//<number>//x//<number>//''  | ''%%120x120%%'' | Sets the size for thumbnails. Unless the crop option is set, this is a boundary box into which the thumbnail will be fitted, maintaining the correct aspect ratio. | +<gallery options go here> 
-| ''//<number>//X//<number>//''  | ''%%800X600%%'' | Sets the size for the linked images in ''direct'' mode. This is a boundary box into which the image will be fitted, maintaining the correct aspect ratio. Note the uppercase ''X''.| +:somenamespace:image.jpg 
-| ''//<number>//''               | ''5''           | The number images per row in the gallery table. If you specify a 0 no table is used instead all thumbnails are added in a sequence. | +https://example.com/anotherimage.jpg 
-| ''=//<number>//''              | ''=0''          | Limits the output to the given number of images. ''0'' means all. | +</gallery> 
-| ''+//<number>//''              | ''+0''          | Skip the first number of images. Useful with the option above. | +</code> 
-| ''~//<number>//''              | ''~0''          | Add a pagination for the thumbnails displaying the number of given thumbnails per page. ''0'' disables pagination. Pagination is added through JavaScript - when no JavaScript is available all thumbnails are displayed | + 
-| ''cache''                      | enabled         | Usually the output of the created gallery is cached. When the images in your selected namespace change, you have to manually force an update of the gallery page's [[:caching|cache]]. To disable the cache for the page showing the gallery, set ''nocache'' as option. | +This mode allows you to optionally manually set the title and caption of images. The title is separated by a space from the image name, the caption is separated by a pipe ''|'' from the title. 
-| ''crop''                       disabled        | Make thumbnails the exact given thumbnail size big, cropping when needed. | + 
-| ''direct''                     | disabled        | Link thumbnails with the bigger sized images not with their detail page | +<code> 
-| ''lightbox''                   disabled        | Show images in a fancy JavaScript modal browsing window, see below for details. Setting this option automatically implies the ''direct'' mode +<gallery options go here> 
-| ''reverse''                    | disabled        | Reverse the order of the displayed images | +:somenamespace:image.jpg My Horse | Look at my horse, it's amazing! 
-| ''recursive''                  | enabled         | Find images in the given namespace and all sub namespaces | +https://example.com/anotherimage.jpg Just a Title 
-| ''random''                     | disabled        | Sort images randomly. You might want to use ''nocache'' as well | +</gallery> 
-| ''modsort''                    | disabled        | Sort images by file modification date | +</code> 
-| ''datesort''                   | disabled        | Sort images by EXIF date | + 
-| ''titlesort''                  | disabled        | Sort images by EXIF title | + 
-| ''showname''                   | disabled        | Show filename below thumbnails | +==== Alignment ==== 
-| ''showtitle''                  | disabled        | Show the EXIF tag ''Headline'' as title below thumbnails | + 
-| anything containing a ''*''    jpg,gif,png images | This can be used to filter the list of files found in the given namespace. ''*'' work as simple wildcard symbol. |+The gallery can be aligned in 4 different ways: 
 + 
 +  * ''full'' -- This is a fully responsive layout and uses the full width of the page. The gallery will automatically be adjusted to fit. This is the default and recommended. 
 +  * ''center'' -- This centers the gallery on the page, using only as much space as needed. You probably want to manually set the number of columns. 
 +  * ''left'' -- Left aligns the gallery, floating follow-up content to the right. You probably want to manually set the number of columns. 
 +  * ''right'' -- Right aligns the gallery, floating follow-up content to the left. You probably want to manually set the number of columns. 
 + 
 +The alignment can be set either by the above keyword in the [[#options]] or by white space (except for list mode): 
 + 
 + 
 +  {{gallery> namespace?options}} (right aligned) 
 +  {{gallery>namespace?options }} (left aligned) 
 +  {{gallery> namespace?options }} (centered) 
 + 
 + 
 +==== Options ==== 
 + 
 +A number of parameters can be set by listing them as mentioned in the source sections above. 
 + 
 +Each parameter can be separated with a ''&'' or space character. Defaults for all parameters can be set in the config manager. If a parameter is enabled by default it can be disabled in the syntax by prefixing it with the syllable ''no''. E.g. the parameter ''cache'' is usually enabled and can be disabled using the keyword ''nocache''. Below is a list of all recognized parameters 
 + 
 +^ Parameter                               ^ Default            ^ Description                                                                                                                                                                                                                                                                                 
 +| ''//<number>//x//<number>//''           | ''%%150x150%%''    | Sets the size for thumbnails. Unless the crop option is set, this is a boundary box into which the thumbnail will be fitted, maintaining the correct aspect ratio.                                                                                                                          
 +| ''//<number>//X//<number>//''           | ''%%1600X1200%%''  | Sets the maximum size for the images when shown in a lightbox. This is a boundary box into which the image will be fitted, maintaining the correct aspect ratio. Note the uppercase ''X''This is a maximum, the lightbox will automatically scale down the image to fit the screen size.  
 +| ''//<number>//''                        | ''0''              | The number images per row in the gallery table. If you specify a 0, images are fit automatically                                                                                                                                                                                          
 +| ''=//<number>//''                       | ''=0''             | Limits the output to the given number of images. ''0'' means all.                                                                                                                                                                                                                           
 +| ''+//<number>//''                       | ''+0''             | Skip the first number of images. Useful with the option above.                                                                                                                                                                                                                              
 +| ''~//<number>//''                       | ''~0''             | Add a pagination for the thumbnails displaying the number of given thumbnails per page. ''0'' disables pagination. Pagination is added through JavaScript - when no JavaScript is available all thumbnails are displayed                                                                    
 +| ''cache''                               | enabled            | Usually the output of the created gallery is cached. When the images in your selected namespace change, you have to manually force an update of the gallery page's [[:caching|cache]]. To disable the cache for the page showing the gallery, set ''nocache'' as option.                    
 +| ''crop''                                enabled            | Make thumbnails the exact given thumbnail size big, cropping when needed.                                                                                                                                                                                                                   
 +| ''direct''                              | disabled           | Link thumbnails with their original instead of the detail page                                                                                                                                                                                                                              
 +| ''lightbox''                            enabled            | Show images in a fancy JavaScript modal browsing window, see below for details.                                                                                                                                                                                                             
 +| ''reverse''                             | disabled           | Reverse the order of the displayed images                                                                                                                                                                                                                                                   
 +| ''recursive''                           | enabled            | Find images in the given namespace and all sub namespaces                                                                                                                                                                                                                                   
 +| ''random''                              | disabled           | Sort images randomly. You might want to use ''nocache'' as well                                                                                                                                                                                                                             
 +| ''modsort''                             | disabled           | Sort images by file modification date                                                                                                                                                                                                                                                       
 +| ''datesort''                            | disabled           | Sort images by EXIF creation date                                                                                                                                                                                                                                                           
 +| ''titlesort''                           | disabled           | Sort images by EXIF title                                                                                                                                                                                                                                                                   
 +| ''showname''                            | disabled           | Show filename below thumbnails                                                                                                                                                                                                                                                              
 +| ''showtitle''                           | disabled           | Show the EXIF tag ''Headline'' as title below thumbnails                                                                                                                                                                                                                                    | 
 +| ''showcaption''                         | disabled           | Show the EXIF tag ''Caption'' as caption below thumbnails                                                                                                                                                                                                                                   
 +| anything containing a ''*'' (asterisk)                     | This can be used to filter the list of files found in the given namespace. ''*'' works as simple wildcard symbol.                                                                                                                                                                           | 
 +| ''full'',''left'',''center'',''right''  | ''full''           | [[Alignment]] as described above                                                                                                                                                                                                                                                            |
  
 === Example === === Example ===
  
-  {{gallery>images:vacation?image_*.jpg&80x80&crop&lightbox}}+  {{gallery>images:vacation?image_*.jpg&80x80&nocrop&showtitle}}
  
-This displays all images beginning with ''image_'' and ending in ''.jpg'' from the namespace ''images:vacation''. Thumbnails are cropped to 80x80 pixels and images will be opened in lightbox mode.+This displays all images beginning with ''image_'' and ending in ''.jpg'' from the namespace ''images:vacation''. Thumbnails are not cropped but fit into a 80x80 pixel bounding box. Image titles will be shown in the gallery.
  
 === Example === === Example ===
Line 95: Line 154:
 This mode will open the clicked picture inside the current browser window without leaving the current page. This mode will open the clicked picture inside the current browser window without leaving the current page.
  
-You can close the picture view by clicking the X button in the upper right corner. You can move to the next or previous image by using the arrow buttons in the lower bar. You can also use the keyboard shortcuts listed below for navigation and closing. Mobile users can swipe to navigate and use the back button to close the gallery.+You can close the picture view by clicking the X button in the upper right corner. You can move to the next or previous image by using the arrow buttons in the lower bar. You can also use the keyboard shortcuts listed below for navigation and closing. 
 + 
 +Mobile users can swipe to navigate and use the back button to close the gallery
 + 
 +Shown images can be zoomed using the mousewheel or a pinch gesture on mobile phones.
  
 The following keys can be used to navigate: The following keys can be used to navigate:
Line 104: Line 167:
 | ''ESC'' | close the image view | | ''ESC'' | close the image view |
  
-===== Manipulate EXIF Tags ===== +===== On Titles and Captions =====
-If you want to show a title below the image using the parameter ''showtitle'' it may appear that the title shown is not as you expected (e.g. ''einstein.jpg'' instead of ''Albert Einstein'').+
  
-If you want to adapt the image's subtitle shown in the galleryyou have to manipulate the EXIF Tag called ''Headline'' This can be done with the [[:fullscreen mediamanager|fullscreen media manager]].  Alternatives include [[http://owl.phy.queensu.ca/~phil/exiftool/|ExifTool]] for which even a [[http://u88.n24.queensu.ca/~bogdan/|Windows GUI]] exists to adapt the EXIF data to your needs. On //Windows//, the small picture viewer [[http://www.irfanview.com/|IrfanView]] can also be used to change only IPTC values.+For internal imagestitles and captions are read from the EXIF/IPTC tags. This is meta data within the image files. In DokuWiki this metadata is only available for JPEG images. You can edit the metadata in the [[:fullscreen mediamanager|fullscreen media manager]]. 
 + 
 +The [[#SourceImage List]] allows you to manually set the title and caption for each listed image.
  
-Note that the EXIF-tags used for display can be changed. See [[:exif|EXIF and IPTC metadata]] for details. By default, the following tags are used: 
-  * ''IPTC:Headline'' for the title 
-  * ''IPTC:Caption-Abstract'' for the description below the picture in lightbox-mode 
-  * ''IPTC:By-line'' for the photographer name 
-  * ''IPTC:CopyrightNotice'' for the copyright 
-  * ''IPTC:Keywords'' for keyword list 
  
 ===== Known Limitations and Caveats ===== ===== Known Limitations and Caveats =====
Line 125: Line 183:
   * Use the [[plugin:archiveupload]] plugin to upload multiple images in a Zip file   * Use the [[plugin:archiveupload]] plugin to upload multiple images in a Zip file
   * Upload the files manually via FTP to the ''data/media'' directory. Keep in mind that image names need to be valid [[:pagenames]], all lowercase, no spaces or special chars!   * Upload the files manually via FTP to the ''data/media'' directory. Keep in mind that image names need to be valid [[:pagenames]], all lowercase, no spaces or special chars!
 +
  
 ==== Caching ==== ==== Caching ====
  
-The gallery output is cached by default. When you add pictures later, they may not show up in the gallery: add ''&purge=true'' to the end of the URL to clear the cache. See [[:caching]] for details.+The gallery output is cached by default. When you add pictures later, they may not show up immediately in the gallery. Either wait until the [[config:cachetime]] has been reached or add the ''purge=true'' parameter to the end of the URL to clear the cache. See [[:caching]] for details.
  
-Optionally use the ''nocache'' parameter of the plugin (not recommended).+Optionally use the ''nocache'' parameter of the plugin (usually not recommended).
  
 ==== EXIF Data Problems ==== ==== EXIF Data Problems ====
Line 136: Line 195:
 Problems with accessing [[:exif|EXIF or IPTC]] data in the images, should be reported as DokuWiki bugs and not for this plugin. All EXIF handling is in DokuWiki core. Currently EXIF Data is expected in UTF-8 encoding.  Problems with accessing [[:exif|EXIF or IPTC]] data in the images, should be reported as DokuWiki bugs and not for this plugin. All EXIF handling is in DokuWiki core. Currently EXIF Data is expected in UTF-8 encoding. 
  
 +Note that the EXIF parser requires XML support in your PHP for some parsing. If you get ''undefined function xml_parser_create'' errors, be sure to install and enable the XML extension.
 ==== Lightbox Problems ==== ==== Lightbox Problems ====
  
Line 155: Line 215:
 As written above, you need to increase the [[config:fetchsize]] config option. Also make sure LibGD or ImageMagick are installed. As written above, you need to increase the [[config:fetchsize]] config option. Also make sure LibGD or ImageMagick are installed.
  
-===== Demo Installations ===== 
- 
-Here are a few user provided examples of the gallery plugin in use: 
- 
-  * http://www.wikipeixes.com.br/  FIXME 
-  * http://eolienne.f4jr.org/medias/start 
-  * http://www.splitbrain.org/blog/2008-01/04-new_york_impressions 
-  * http://www.hemmerling.com/doku.php/en/repository.html 
-  * http://urbangirlblue.org/ecscc/doku.php  FIXME 
  
 ===== Discussion ===== ===== Discussion =====
  
-Be sure to read the [[#Known Limitations and Caveats]] section first. Questions should be asked in the [[http://forum.dokuwiki.org|forum]]. Bugs and feature wishes should be reported in the [[https://github.com/splitbrain/dokuwiki-plugin-gallery/issues|issue tracker]]. Any comments/discussions on this page will be removed.+Be sure to read the [[#Known Limitations and Caveats]] section first. Questions should be asked in the [[https://forum.dokuwiki.org|forum]]. Bugs and feature wishes should be reported in the [[https://github.com/splitbrain/dokuwiki-plugin-gallery/issues|issue tracker]]. Any comments/discussions on this page will be removed.
  
plugin/gallery.1455710809.txt.gz · Last modified: 2016-02-17 13:06 by 159.51.236.31

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki