EXT: rgsmoothgallery¶

What does it do?¶

This extension implements the really cool gallery called SmoothGallery by JonDesign. Look at it here: http://smoothgallery.jondesign.net/showcase/gallery/

The extensions works as a gallery and as a slideshow which can either show automatically the next image (after a changeable amount of time) or the user can switch to the next and previous image. These two settings can also be combined. Lightbox is included too (as slimbox).

The extensions works in many different ways

• Images out of a directory: So just add the path to a directory in the flexforms and you are done.
• Images from records: Create a record for every image and save the page as starting point.
• Images inside “text with image”: Present the images of a normal content element with rgSmoothGallery.
• Images out of DAM: Select the records and you are done.
• Images out of DAM categories: Select a DAM category to display the images.
• Integration into tt_news: Present the images of the record in LIST/LATEST or SINGLE-View.

More features are

• Images can be cropped
• Limitation of images
• Watermarks
• Timed slideshows to change images after a given time
• Thumbnails in another div

Screenshots¶

Image 1: The extension showing the thumbnails to browse to the other image

Image 2: The extension inside a content element “text with image”, replacing the usual images with the gallery or slideshow. Also a caption is available. Still fully configurable!

Image 3: This is a cropped version of the same original source as in Image 1. Take a look at the section “Advanced configuration” to see how it is done.

Image 4 : An opened image with lightbox and the possibility to switch to the next and previous image

Image 5 : Modified CSS files to get a different output, take a look at the section “Alternative Layout & Design I”

Image 6: Another cool design, take a look at the section “Alternative Layout & Design II”

Image 7: The flexform settings in the backend. It is very easy. Just select the mode and you are nearly done(DAM is just selectable if it is installed).

Live-Demo & Examples¶

See the extension with all the features in action at my website:

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

Visit all the examples which are linked at the bottom right like the extension working together with the element “text with image”:

• in English: http://www.rggooglemap.com/en/dev/rgsmoothgallery /smoothgallery-in-text-with-image.html
• in German: http://www.rggooglemap.com/dev/rgsmoothgallery /smoothgallery-in-text-mit-bild.html

Sponsoring

I would like the following sponsors for supporting me and my work.

Die Apothekergenossenschaft http://www.noweda.de

Images from a directory¶

To show all images from a directory you need to do the following steps:

Follow the steps 1-2 from before

Add the relative path to the directory where the images are and don't forget the / at the end! The path looks like fileadmin/myimages/day1/

Add titles and descriptions to the images if you want. One line = One image. Title & description are separated with the | (“pipe”). So it looks like

Title 1 | Text 1
Title 2 | Text 2

Title 4
Title 5 | Text 5

Important & nice-to-have: If the extension rgfolderselector is installed, you get a very nice wizard to select the folder (No mistyping and checking the path with FTP tools/extensions anymore).

Images from records¶

To show images from records you need to create first of all some records. Select a page or sysfolder and create a record “SmoothGallery Image” and add there a title, description and an image. Then follow these steps:

Follow the steps 1-2 from before

Add the plugin somewhere to the page and select “Images from records” in the dropdown in the flexforms .

Add the page/sysfolder where you saved your records to the starting point.

Images from tt_content¶

This just works with css_styled_content.

To show the SmoothGallery inside a content element, follow these steps:

Follow the steps 1-2 from before.

Create a content element “Text with Image” and fill it with text and images.

Activate the checkbox “Activate SmoothGallery”.

Please take also a look into the chapter Configuration -> Images from tt_content!

Images from DAM¶

The extension handles also records from DAM. To show images from DAM follow these steps:

Follow the steps 1-2 from before.

Add the plugin somewhere to the page and select “Images from DAM” in the dropdown in the flexform.

Select the images you want to display.

Images from DAM Category¶

Using the DAM category selector works as “Images from DAM” - just select “Images from DAM (categories)” instead

Integration into tt_news¶

Follow the first steps 1-2 from before and you are done. The rest of the configuration is done with TS and is described in the section below.

Images from tt_content¶

This section is about the integration of the extension into the content element “Text with image”. To activate the SmoothGallery you need to activate the checkbox “Activate SmoothGallery” inside the content element.

*DAM & tt_content*

It is not possible to get the images inside a tt_content record from DAM. Who has the knowledge to help. Please contact me!

Set the sizes

To change the different sizes follow these steps:

Large image (in the middle) :

Use the width/height field in the content element.

Lightbox:

Use the constant editor or Constants

TS-CODE
plugin.tx_rgsmoothgallery {
        lightboxWidth = 700
        lightboxHeight = 700
}

Thumbnails

Use the constant editor or Constants

TS-CODE
plugin.tx_rgsmoothgallery {
        thumbWidth = 700
        thumbHeight = 700
}

Usage of title & description

To use the title and description you need to fill the fields “Title Text” for the title and the “Caption” for the description. One line per image.

Configuration of the mode, thumbnails,...

To configure the extension inside a content element you need to fill the field “Long Description URL:” with the following code:

timed:true,
delay:2000,
showArrows: true,
showCarousel: false,
embedLinks:true,
lightbox:true

Explanation:

TS-CODE
plugin.tx_rgsmoothgallery {
        settings = timed:false,showArrows: true,showCarousel: false,embedLinks:true,lightbox:true
}

timed:true,delay:2000,showArrows: false,showCarousel: false,embedLinks:false,lightbox:true

Integration into tt_news¶

A working example, used at the demo page http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit-tt- news.html

The output is fully configurable with TS. All you need to do insert the following code:

plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1

Be aware: There should be no <!--###LINK_ITEM###--> wrap around ###NEWS_IMAGE###! Otherwise you break the gallery in Internet Explorer v.6!

Usage of a caption

Use the field “caption” in the following way: Title & description are separated with the | (“pipe”). So it looks like

Title 1 | Text 1
Title 2 | Text 2

Title 4
Title 5 | Text 5

Change behavior

If you want to change the size or the behavior of the gallery, take a look at the the section “Reference”, especially at the last entries. Here are 2 possible settings which are also used at the demo page:

LIST view

In the list view,the thumbnails and the infopane are hidden.

TS-CODE
plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1
plugin.tt_news.rgsmoothgallery {
        big.file.maxH = 180
        width  =240
        height = 180
        hideInfoPane = 1
        showThumbs= 0
}

SINGLE view

Some values of the list view are overwritten to get a little bit bigger images, thumbnails, the infopane and an slideshow with a duration for every image of 3,5 seconds.

You can see it directly here: http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit-tt- news/detailansicht/big-buddha.html

TS-CODE
plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1
plugin.tt_news.rgsmoothgallery {
                big {
                file.maxW = 300
                file.maxH = 345
        }

        height = 230
        width = 330
        showThumbs= 1
        thumbOpacity = 0.8

        arrows = 1
        hideInfoPane = 0
        duration = 3500
}

To show the gallery only e.g. in LIST-view but not in SINGLE-view just override the TS in the SINGLE-view. It is also possible to set a different configuration for each view. Use therefore the following syntax

TS-Code
plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1
plugin.tt_news.rgsmoothgallery.LIST {
        arrows = 0
        duration = 3000
}

TS-Code
plugin.tt_news.rgsmoothgallery {
    imageField = imagefieldname
 imageFieldPrefix = uploads/tx_yourextensionkey/
     captionField = captionfieldname
     imageMarker = GALLERY
}

Plugin settings¶

The plugin settings are simple and pretty self explaining. Here are all available fields:

Reference¶

This is the TS reference but I guess it is much easier to include a slideshow with the cObj RECORDS or CONTENT if you want to it directly

thumb = IMG_RESOURCE
thumb {
  file.maxW = 100
  file.maxH = 75
}

big = IMG_RESOURCE
big {
  file.maxW = 460
  file.maxH = 345
}

lightbox = IMG_RESOURCE
lightbox {
  file.maxW = 1000
  file.maxH = 800
}

External Thumbnails¶

It is very easy to show the thumbnails of rgsmoothgallery in an external place. An example is here: http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit- externen-thumbnails.html (English http://www.rggooglemap.com/en/dev/rgsmoothgallery/smoothgallery-with- external-thumbnails.html )

All you need is to insert in the field “External Thumbs DIV ID“ the id of a div element or to add the id with TS

plugin.tx_rgsmoothgallery_pi1.externalthumbs = ext-thumbnails

and an html-element with this content

<div id=”ext-thumbnails”></div>

To get the output as in the example, you need to include the sample CSS like in this way:

page.includeCSS.file21 = EXT:rgsmoothgallery/res/css/externalThumbs.css

Cropped images¶

Sometimes it is useful to crop images instead of using the proportions of an image. An example is here: http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit- beschnittenen-bildern.html (English: http://www.rggooglemap.com/en/dev/rgsmoothgallery/smoothgallery-with- cropped-images.html )

The configuration for the samples is

SmoothGallery I

Width of image: 330c+30
Height of image: 330c-25
Width of gallery: 330
Height of gallery: 330

SmoothGallery II

Width of image: 420c
Height of image: 160c
Width of gallery: 420
Height of gallery: 160

SmoothGallery III

Width of image: 420c
Height of image: 160c
Width of gallery: 420
Height of gallery: 190

More information about cropping can be found in the TsRef: http://typo3.org/documentation/document- library/references/doc_core_tsref/4.1.0/view/5/2/

Watermarks¶

If you want to use watermarks on your images you need to activate this feature inside the flexforms or with Typoscript. An example is located here: http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery- mit-wasserzeichen.html (English: http://www.rggooglemap.com/en/dev/rgsmoothgallery/smoothgallery-with- watermarks.html )

To configure it, take a look at the static TS (located at ext/rgsmoothgallery/pi1/static/setup.txt):

TS-CODE
plugin.tx_rgsmoothgallery_pi1 {
  big2 = IMG_RESOURCE
  big2 {
    file = GIFBUILDER
    file {
      XY = [10.w],[10.h]
      10=IMAGE
      10 {
        file.maxW=460
        file.maxH=345
      }
      20=TEXT
      20 {
        text.data = date:Y
        text.noTrimWrap = |(c) | by somebody |
        align=right
        offset=0,[10.h]-45
        fontSize=10
        fontColor=#ffffff
        #niceText=1
      }
    }
  }
}

So this code changes the text of the copyright only:

plugin.tx_rgsmoothgallery_pi1.big2.file.20.text.noTrimWrap = |(c) | by Georg Ringer |

To change the lightbox image, you need to do the same thing with lightbox2 instead of lightbox.

Please be aware: Using this features influences the quality of the image in a bad way. You can see the differences on the example page. You can make the output better with changing jpg_quality in the install tool (Section “All configuration) to 100

[GFX][jpg_quality] = 100

Alternative Layout & Design I¶

It is quite boring to see the same layout over and over and it is very easy to change the layout yourself. The following code and link should serve as an example:

• DE: http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit- erweiterten-einstellungen.html
• EN: http://www.rggooglemap.com/en/dev/rgsmoothgallery/smoothgallery- with-advanced-settings.html

You just need to change the path to 2 CSS files which come with the latest version of rgsmoothgallery.

TS-CODE
plugin.tx_rgsmoothgallery_pi1 {
 pathToJdgalleryCSS = EXT:rgsmoothgallery/res/css/jd.galleryColor.css
 pathToSlightboxCSS = EXT:rgsmoothgallery/res/css/slightboxColor.css
}

Alternative Layout & Design II¶

Thanks to Sandro there is another cool design available. You can take a look at it at

• DE: http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit- coolem-design.html
• EN: http://www.rggooglemap.com/en/dev/rgsmoothgallery/smoothgallery- with-a-cool-design.html

All you need to do is:

1.) Load a different stylesheet

# TS Code
plugin.tx_rgsmoothgallery_pi1.pathToJdgalleryCSS = EXT:rgsmoothgallery/res/css/jd.galleryCool.css

2.) Set the configuration in the plugin like this:

Image width: 492cImage height: 305cGallery width: 492Gallery height: 305Opacity Thumbnails: 0.8Opacity SlideInfoZone: 0.6

If you want to use different sizes, take a look at the file /rgsmoothgallery/res/css/img/cooldesign.zip which holds the original psd file to modify the background of the gallery.

Include a gallery with TS only¶

To include the rgSmoothgallery just with TS you need to look up the section “Reference”. 2 simple examples are shown here

1 ^**st** example : A gallery with images out of a directory, changing every 5 seconds, lightbox,arrwos and thums available and limited to 10 images

TS-CODE
lib.randomImage < plugin.tx_rgsmoothgallery_pi1
lib.randomImage {
  mode = DIRECTORY
  duration = 5000
  startingpoint = fileadmin/here_are_my_images/
  lightbox = 1
  showThumbs = 1
  arrows = 1
  limitImagesDisplayed = 10
}

2 ^**nd** example : A gallery displaying images out of records with just arrows to switch to the previous & next image.

TS-CODE
lib.randomImage2 < plugin.tx_rgsmoothgallery_pi1
lib.randomImage2 {
  mode = DIRECTORY
  # 63 = uid of the page where the records are saved
  startingpointrecords = 63
  arrows = 1
}

!! Be aware : If you insert more than one rgsmoothgallery with TS, you need to add an extra command to differ the 2 galleries. It is not important what you insert as id but it need to be unique – it can be a number or just a single character.

TS-CODE
lib.randomImage < plugin.tx_rgsmoothgallery_pi1
lib.randomImage {
  ...
}
lib.randomImage < plugin.tx_rgsmoothgallery_pi1
lib.randomImage {
  ...
  id = something
}

Fun with stdWrap¶

Since the version 1.0.10 every parameter can use the functions of the powerful stdWrap! I just want to present 2 examples which seem very nice.

Example 1: Show every FE-User a different gallery

Every FE user which all have a different path, which is in this testcase fileadmin/upload/<username>/

The code should be self explaining.

plugin.tx_rgsmoothgallery_pi1 {
        startingpoint {
                override.data = TSFE:fe_user|user|username
                override.wrap = fileadmin/upload/|/
        }
}

Example 2: Override a flexform value

The usual approach is that the flexform configuration overrides the TS configuration but it is also possible to override this with TS again. In this example the gallery will change every 4 seconds, no matter what in the flexforms is saved,

plugin.tx_rgsmoothgallery_pi1 {
        duration {
                override.value = 4000
        }

}