Skip to content

Instantly share code, notes, and snippets.

@hertsch

hertsch/kitcommand_imagetweak_en.md

Last active August 29, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hertsch/014d698a9585f2cd3dff to your computer and use it in GitHub Desktop.
Save hertsch/014d698a9585f2cd3dff to your computer and use it in GitHub Desktop.
Download ZIP
Helpfile for the imageTweak Extension
Raw
kitcommand_imagetweak_en.md

~~ imageTweak ~~

Introduction

For a general help to the kitCommands, the usage and the general available parameters please refer the kitCommand help.

Attention: imageTweak provide a kitCommand and a kitFilter, this is the helpfile for the kitCommand.

General Parameters

FlexSlider Parameters



* [`animation[]`](#param_fs_animation) * [`animation_speed[]`](#param_fs_animation_speed) * [`animation_loop[]`](#param_fs_animation_loop) * [`control_nav[]`](#param_fs_animation) * [`direction[]`](#param_fs_direction) * [`direction_nav[]`](#param_fs_direction_nav) * [`item_width[]`](#param_fs_item_width) * [`init_delay[]`](#param_fs_init_delay) * [`max_items[]`](#param_fs_max_items) * [`min_items[]`](#param_fs_min_items) * [`move[]`](#param_fs_move) * [`randomize[]`](#param_fs_randomize) * [`reverse[]`](#param_fs_reverse) * [`start_at[]`](#param_fs_start_at) * [`slideshow[]`](#param_fs_slideshow) * [`slideshow_speed[]`](#param_fs_slideshow_speed) * [`smooth_height[]`](#param_fs_smooth_height)

###action[]

This is a must parameter. At the moment the only possible value is gallery to switch imageTweak to the Gallery mode.

Example

~~ imagetweak action[gallery] ~~

The gallery to use can be specified with the parameter type[]. At the moment the only supported gallery is FlexSlider, so you can omit the type[] - the FlexSlider will be selected automatically.

###base[]

This parameter is used in combination with the directory[].

The parameter base[] is needed to tell imageTweak which is the base for the specified directory:

  • base[cms_media] - default, the base for the directory is the CMS Media Directory /media
  • base[media] - the base for the directory is the public kitFramework Media Directory /kit2/media/public
  • base[media_protected] - the base for the directory is the protected kitFramework Media Directory /kit2/media/protected
  • base[path] - the directory contains a full server path

Example

~~ imagetweak action[gallery] base[media] directory[example] ~~

Images will be loaded from the public kitFramework directory /kit2/media/public/example

###directory[]

Use this parameter to specify the directory from where to load the images for a gallery.

Example

~~ imagetweak action[gallery] directory[example] ~~

will load images from the CMS Media Directory /media/example.

Use the parameter base[] to specify another base for the directory.

###type[]

The parameter type[] is used to select the Gallery Type.

Example

~~ imagetweak action[gallery] directory[example] type[flexslider] ~~

At the moment the only supported gallery is FlexSlider, so you can omit this parameter.

FlexSlider Parameters##

The following parameters are specific for the usage with the FlexSlider Gallery.

###mode[]

With the mode[] parameter you can simply switch between the elementary modes of the FlexSlider. The kitCommand will set all needed parameters for you:

Example

~~ imagetweak action[gallery] directory[example] mode[carousel] ~~

will load images from /media/example and show the FlexSlider in Carousel mode.

###animation[]

With the parameter animation[] you can select the animation type:

  • animation[fade] - will fade in and out the images
  • animation[slide] - default, will slide in and out the images

Example

~~ imagetweak action[gallery] directory[example] animation[fade] ~~

will load the images from /media/example and fade in and out the images.

###animation_speed[]

With the parameter animation_speed[] you can determine the speed (duration) of an animation[] in milliseconds. By default the animation speed is 600 milliseconds.

Example

~~ imagetweak action[gallery] directory[example] animation[fade] animation_speed[3000] ~~

will load the images from /media/example and fade in and out the images within 3000 milliseconds (very slow and soft).

###animation_loop[]

By default an animation will loop endless. If you set the parameter animation_loop[false], the animation will loop from the first to the last image and then stop.

Example

~~ imagetweak action[gallery] directory[example] animation_loop[false] ~~

will loop once and then stop.

###control_nav[]

By default below the image will be shown a navigation for paging control. You can switch off the paging control using the parameter control_nav[false].

Example

~~ imagetweak action[gallery] directory[example] control_nav[false] ~~

will show the basic slider without paging control.

###direction[]

With the parameter direction[] you can determine the sliding direction:

  • direction[horizontal] - default, the images slide in horizontal direction
  • direction[vertical] - the images slide in vertical direction

Example

~~ imagetweak action[gallery] directory[example] direction[vertical] ~~

will slide the images in vertical direction.

###direction_nav[]

By default FlexSlider will show direction navigation buttons at the left and the right side of the images. You can switch off the direction navigation, using the parameter direction_nav[false].

Example

~~ imagetweak action[gallery] directory[example] direction_nav[false] ~~

will show the basic slider without the direction navigation.

###item_width[]

In Carousel mode the image width is by default identical with the maximum thumbnail width defined in the configuration file config.imagetweak.json. You can determine any other item width in pixel.

Example

~~ imagetweak action[gallery] directory[example] mode[carousel] item_width[200] ~~

will show a carousel with items in a width of 200 pixels.

###init_delay[]

By default FlexSlider will start the animation suddenly after loading the page. With the parameter init_delay[] you can set an initialization delay in milliseconds.

Example

~~ imagetweak action[gallery] directory[example] init_delay[1000] ~~

will wait 1000 milliseconds before starting the animation.

###max_items[]

In Carousel mode you can specify the number of items which will be shown maximum in the carousel slider.

Example

~~ imagetweak action[gallery] directory[example] mode[carousel] max_items[6] ~~

will show at maximum 6 items in the carousel.

###min_items[]

In Carousel mode you can specify the number of items which will be shown minimum in the carousel slider.

Example

~~ imagetweak action[gallery] directory[example] mode[carousel] min_items[3] ~~

will show at minimum 3 items in the carousel.

###move[]

You can specify the number items which should be moved within a Carousel animation. By default FlexSlider will move all visible items.

Example

~~ imagetweak action[gallery] directory[example] mode[carousel] move[2] ~~

will move 2 items at animation.

###randomize[]

By default FlexSlider will show the images ordered by the filenames in ascending order. Use the parameter randomize[true] to show the images in a random order.

Example

~~ imagetweak action[gallery] directory[example] randomize[true] ~~

will show the images in the basic slider in a random order.

###reverse[]

You can reverse the animation direction, by default from left to right or from top to bottom, using the parameter reverse[true].

Example

~~ imagetweak action[gallery] directory[example] reverse[true] ~~

will animate the images in the basic slider from right to the left.

###start_at[]

By default the animation will start with the first image, indicated by zero 0. You can specify the image position to start with using the parameter start_at[].

Example

~~ imagetweak action[gallery] directory[example] start_at[2] ~~

will start the animation with the image at the third position (zero is also counting).

###slideshow[]

By default the slider animation will be started automatically. You can switch of the slideshow, using the parameter slideshow[false].

Example

~~ imagetweak action[gallery] directory[example] slideshow[false] ~~

will show the basic slider but don't start the animation.

###slideshow_speed[]

You can determine the speed of the slideshow in milliseconds. By default the slideshow will step to the next item after 7000 milliseconds, use the parameter slideshow_speed[] to set another value.

Example

~~ imagetweak action[gallery] directory[example] slideshow_speed[2000] ~~

will change the items after 2000 milliseconds.

###smooth_height[]

You can use the parameter smooth_height[true] to allow the height of the slider to animate smoothly in horizontal mode.

Example

~~ imagetweak action[gallery] directory[example] smooth_height[true] ~~

will use smooth height.

###use_css[]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment