EXT: chgallery¶

What does it do?¶

This extensions provides another gallery with the following features:

• Simple usage: Never leave the plugin, no records or list view necessary.
• Gallery view : Display all images from a directory including a configurable page browser (optional with ajax).
• Category view: Display sub-directories as categories.
• Random Mode , Ratings (by extension ratings)
• Template based, everything configurable through TS (Lightbox, watermarks,...)

Please take a look at the demos or the screenshots to get an idea.

|img-1| This extension has been created by CYBERhouse

Demo¶

See the extension and its features on my website.

General website & demo

• German: http://www.rggooglemap.com/dev/chgallery.html
• English: http://www.rggooglemap.com/en/dev/chgallery.html

Random mode

http://www.rggooglemap.com/dev/chgallery/zufallsmodus.html

Ajax based pagination

http://www.rggooglemap.com/dev/chgallery/mit-ajax.html

Show 3 images but link all in Lightbox

http://www.rggooglemap.com/dev/chgallery/lightbox-ueber-alle-bilder- mit-random.html

Category based gallery

http://www.rggooglemap.com/dev/chgallery/kategoriebasierende- galerie.html

Category based gallery featuring rgaccordion

http://www.rggooglemap.com/dev/chgallery/kategoriebasierende-galerie- mit-accordion.html

Support of PicLens / Cooliris

• http://www.rggooglemap.com/dev/chgallery/cooliris-innerhalb-der- galerie.html
• http://www.rggooglemap.com/dev/chgallery/cooliris-innerhalb-der- kategorie.html

Screenshots¶

Image 1: A possible view of the images including the title underneath the image.

Image 2: A simpler view

Image 3: Gallery featuring any lightbox

Image 4: Category view featuring Mootools accordion to toggle the categories.

I mage 5: Single view with some picture information including a download link.

Image 6: Using the ext ratings to rate images.

Image 6: Backend Plugin with setting the path to the directory and all other settings.Use the wizard to add comments to the images.

Sponsors¶

Thanks a lot for all people who supported the development of this extension, especially:

• Dehaan | Media www.dehaanmedia.nl
• Gekus www.gekus.com

If you need another feature, sponsor it! Contact me for further details!

Update to version 2.4.0¶

If you update to the version 2.4.0 please be aware of the following change:

Category titles have now always to be sorted in the order of subdirectory names. As a result, the order of titles will now be independant from category sort order. Please resort your titles if you used descending order in older versions!

I am sorry for the non-backwards-compatibility but this is the best for this extension and won't happen in rare cases!

GALLERY view¶

Use this view to show all images of the selected directory. Follow this steps:

Choose the view “GALLERY view”.

Add the path to the directory.

To be able to add a description you need to save the plugin first. After that you are able to to access the wizard by clicking at the wizard icon. Add the description next to the thumbnails and press “Save”. You can close the wizard afterwards.

You are done. Take a look at the chapter “Flexform fields” for information about the remaining fields.

CATEGORY view¶

Use this view to show all directories which are inside the selected path. Each directory represents a kind of category. Follow this steps:

Choose the view “CATEGORY view”.

Add the path to the directory.

To be able to add a description you need to save the plugin first. After that you are able to to access the wizard by clicking at the wizard icon. Inside the wizard you can enter the description for every image of the subdirectory. Open the area of the subdirectory by clicking at the name of the directory. After clicking the button ”Save” you can close the wizard.

To set a title for every subdirectory (= kind of category) you need to add it in the textarea. Enter one line for every subdirectory. Always enter your titles in the ascending order of the subdirectory names.

To set a description for every subdirectory you need to click at the 2 ^nd wizard icon next to the textarea and add the description to the textarea in the wizard.

You are done. Take a look at the chapter “Flexform fields” for information about the remaining fields.

SINGLE view¶

Use this view to show one single image. You can either use this view standalone or as a single view connected to the category or gallery view. If a user clicks at an image in the category/gallery-view, the image will be shown in big in the single view plugin. Follow this steps:

Create the 1 ^st plugin and set the view to “GALLERY” or “CATEGORY” and add a path to the images. Activate the checkbox “Use Single view”.

Create the 2 ^nd plugin and set the view to “SINGLE view”. Be sure that the settings for the path and the pagebrowser are the same in both plugins!

Flexform fields¶

This is an overview about all fields which are available inside the plugin.

1 :sup:`st` Tab “Settings”

Description of categories & images¶

Descriptions of categories and images are saved in txt-files inside the directory. Out of this reason it also possible to add the description at many different places. For example by using the List module or by doing it on your own computer before uploading the images. Just consider to use the correct syntax!

Categories

The description is saved in the file “info.txt” inside the directory.

Images

The description is saved in the same directory as the image itself with the name imagefilename.txt. For example DSC09155.jpg.txt if the image got the name DSC09155.jpg.

Multilingual support

If you got a multilingual website you need to create a file for every language. You need to know the ID of the language (which is the same you use for the language conditions in your TS) and the files look like info-1.txt or DSC09155.jpg-1.txt .

If you are using the wizard inside the plugin you don't need to care about all this!

Using a lightbox¶

If you want to use a lightbox with chgallery you need to include a lightbox extension like pmkslimbox or perfectlightbox. I tested it with pmkslimbox with this code.

# TS Code
plugin.tx_chgallery_pi1 {
        gallery.image {
                file {
                        maxW = 139
                        maxH = 110
                }

                imageLinkWrap  = 1
                imageLinkWrap {
                        enable = 1
                        typolink {
                                title.field= tx_chgalleryTitle

                                parameter.override.cObject = IMG_RESOURCE
                                parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
                                parameter.override.cObject.file.maxW = 800
                                parameter.override.cObject.file.maxH = 600

                                # used lightbox is pmkslimbox
                                ATagParams = rel="lightbox"
                                ATagParams.override = rel="lightbox[sb{field:uid}]"
                                ATagParams.insertData = 1


                        }
                }
        }
}
plugin.tx_chgallery_pi1.single.image < plugin.tx_chgallery_pi1.gallery.image

The TS code is also saved at ext/chgallery/res/ts/lightbox.ts

Different caption

To get a different information in the caption you can change title.field = tx_chgalleryTitle to tx_chgalleryImage to get the name of the image file or use title.data = TSFE:lastImageInfo|origFile for the whole path.

Watermarks

To get watermarks into the lightbox, use the TS code you can find at ext/chgallery/res/ts/watermark.ts

Random mode¶

Demo of the random mode: http://www.rggooglemap.com/dev/chgallery/zufallsmodus.html

It is possible to use a random mode which got 2 disadvantages:

• The output can't be cached, so it is slower.
• The pagination can't work, so set the images / page to a high enough level or just delete the markers for it from the template. The pagebrowser is therefore hidden by default using the subpart ###PAGEBROWSER###
• It only works in gallery view!

You can enable the random mode either in the plugin (by setting the checkbox) or with TS (random=1) but you still need the following line in the TS:

# TS Code
plugin.tx_chgallery_pi1 = USER_INT

which will disable the caching for the plugin.

Using RealURL¶

If you want to rewrite the parameters using RealURL you need to add something like this to your postVarSets

'galerie' => array(
        array(
                'GETvar' => 'tx_chgallery_pi1[pointer]',
        ),
        array(
                'GETvar' => 'tx_chgallery_pi1[dir]',
        ),
        array(
                'GETvar' => 'tx_chgallery_pi1[single]',
        ),
),

For more information take a look at the manual of RealURL!

Using Ajax¶

Demo of the ajax mode: http://www.rggooglemap.com/dev/chgallery/mit- ajax.html ?

It is possible to enable ajax for chgallery so that the pagebrowser works without reloading the complete page!

To be able to use this feature you need to follow these steps:

Add this TS code

#TS code
plugin.tx_chgallery_pi1 {
        # Load a different template which is needed
        templateFile = EXT:chgallery/res/ajax.html
        # Activate ajax
        ajax = 1
}

# Essential lines !!!
export_chgallery.10.renderObj  {
      10 < plugin.tx_chgallery_pi1
      10.userFunc = tx_chgallery_pi1->xmlFunc
}

Add t3mootools

Install the extension t3mootools and create a new ajax library. Take a look at its manual. In short:

Install the extension and go to the new BE module T3Mootools

Switch in the dropdown to “Process & analyze t3mootools.txt in extensions”

Click “Select all” & then “Check”

Click “Merge & use”

Important

• The ajax feature just works with Mootools and no other ajax library!
• The ajax feature just works if the gallery is only 1 time on a page

Using the accordion with the LIST view¶

It is very easy to combine the list view with a javascript effect like the accordion which can be seen here: http://www.rggooglemap.com/dev/chgallery/kategoriebasierende-galerie- mit-accordion.html

To get this working you need to follow this steps:

Install the extension t3mootools and let it analyze the extension(s).

Change the template of chgallery with this TS code: plugin.tx_chgallery_pi1.templateFile = EXT:chgallery/res/accordion/template.html

Include the Mootools library if you haven't done that already by using for example page.includeJS.file812 = /typo3conf/ext/t3mootools/res/mootoolsv1.11.js

The javascript is for Mootools and won't work if prototype or any other JS-library is installed!

Using ratings¶

It is possible to rate images by using the great extension ratings from Dmitry Dulepov . To get the extension working use the following TS:

# TS Code
plugin.tx_chgallery_pi1 {
        ratings = 1
        # optional ratings configuration
        ratings {
                ...
        }
}

Be aware that ext ratings conflicts with the ajax pagebrowser. So switch either pagebrowser to prototype or ratings to Mootools.

Using watermarks¶

Brand your images with text or an image by using watermarks. A demo is online at: http://www.rggooglemap.com/dev/chgallery/wasserzeichen.html

To use watermark you need to extend your TS. It is possible to set watermarks for any images. To get the watermarks in the lightbox view of the images of the gallery view use the TS inside res/ts/lightbox.ts. To get watermarks also for the small images please use the TS inside res/ts/watermark-gallery+lightbox.ts.

Using PicLens / Cooliris¶

Cooliris is a new way to look at images (and videos). A demo is online at: http://www.rggooglemap.com/dev/chgallery/cooliris-innerhalb-der- kategorie.html Best view is possible by installing the addon cooliris for your browser because it gives you the feature of the 3dwall.

To use cooliris with chgallery all you need to do is: Enable it by using the following TS

# TS Code
plugin.tx_chgallery_pi1.cooliris = 1

Configuration is very simple. Please look at the reference for all possible features.

Additional configuration¶

Include chgallery with TS only

To include the gallery with TS only you need at least this code

# TS Code
lib.gallery < plugin.tx_chgallery_pi1
lib.gallery {
        path = fileadmin/fotos/
        mode = CATEGORY

}

General¶

General settings which are needed for any view.

CATEGORY view¶

This part of the reference is for the LIST view. Use plugin.tx_chgallery_pi1.category.XXX

GALLERY view¶

This part of the reference is for the GALLERY view. This part is also used if no categories are used. Use plugin.tx_chgallery_pi1.gallery.XXX

renderAllLinks = 1
renderAllLinks {
       title.field= tx_chgalleryTitle

       parameter.override.cObject = IMG_RESOURCE
       parameter.override.cObject {
               file.import.field = tx_chgalleryImageLong
               file.maxW = 800
               file.maxH = 600
       }

       ATagParams = rel="lightbox"
       ATagParams.override = rel="lightbox[presentlb{field:uid}]"
       ATagParams.insertData = 1
}

SINGLE view¶

This part of the reference is for the SINGLE view. Use plugin.tx_chgallery_pi1.single.XXX

Available markers¶

If you want to know which markers are available take a look at the default template template.html. All markers are listed in the top of the document!