JoomImages

Article Index

The module JoomImages shows pictures from the JoomGallery. With its extensive configuration options it can be adapted exactly on the individual needs. In the following you find explanations to the individual parameters and examples.

This documentation refers to the module in the version 1.5.5, so you need a installed JoomGallery 1.5.5 or more actual.

After the installation of the module you can modify the parameters to change the appearance and the picture selection. At the beginning (particularly for new users of the module) the backend seems to be a little confusing. So it is meaningful not to change many parameters at the same time but only few and look the results in frontend. Thus you develop fastest a “feeling” for the meaning of the parameters. The tooltips of the parameters can be a first assistance with their short descriptions.

If you have configured too many settings with the result that the module does not show any pictures and you don't know why: Deinstall and install the module again. Then again the standard parameters are given and you can test again step by step your desired settings.


Common parameters

Here you can set the view of default or slideshow. Furthermore e.g. the selection of images and the sorting.

Common Parameters

Module Class Suffix
Normally the HTML output of the module is surrounded from a <div class="moduletable">. To allow individual styling you can insert here a text e.g. '_jimg'. The output would be a <div class="moduletable_jimg">. Then you can style the module in CSS. At the beginning you can leave this field empty.

Cache
When the cache in Joomla! has been activated setting to 'Yes' will result in caching the module output with a better performance but sometimes it breaks the view with no including f the CSS. So in this case set this option off.

Itemid
Choose here a value for another Itemid if needed

Show Default view or slideshow
In default view pictures are shown in e.g several rows and columns. In 'More parameters for the default view' you can adjust this more in detail. The mootools based slideshow displays one picture at the same time from the collection of pictures you have chosen. More settings in 'more parameters for slideshow'.

Number of pictures
Here you can specify how many pictures are to be determined at maximum from the JoomGallery. It is possible that due to further settings this number can't be reached. In worst case no picture will be displayed.

Sorting
Determine here in which sorting the pictures will be shown

  • Random pictures: By the pictures read from database a randomly selection is made. With every refresh of the site other pictures will be displayed. This will only work when there are e.g. a selection of 20 pictures and a randomly display of 4 pictures. Otherwise you will see every time the same pictures. Only the sequence will change.

  • ID ascending/descending: Each new picture receives a higher ID in database. With “ID descending” the newest pictures, with “ID ascending” the oldest pictures first is thus shown. Choose this setting when you have uploaded more pictures a day and you want to have a more accurate sorting than 'Picture date'

  • Picture title: Sorting by the name of the title picture

  • File name: Sorting by the name of the file saved on the server

  • Picture date: Sorting by the day the picture was uploaded

  • Hits: By number of seeing the picture in detail view

  • Votes: By highest/lowest average rating

  • Number of votes: by highest/lowest number of votes

  • Sorting by the date of nametags ascending or descending
When selecting one of the following sort options, another DB query takes place to look only 
for commented pictures. If the comment function in JoomGallery is deactivated or no pictures
are commented yet the module will display no pictures.
  • Random comments: randomly display of commented pictures

  • Comment date: Sorting by pictures with newest/oldest comment first

  • Number of comments: by number of comments


Categories/Include subcategories/
Ignore or show categories
Here you can input the id's of categories from which pictures in the module are to be shown. Or insert here the id's to mark the excluded categories from which no pictures are to be shown in the module.
You can find the id's of the categories in the category manager of the JoomGallery. Separate several id's with a ','.

Example: The module should only display picture from categories with id's '3' and '4'.
Categories: 3,4
Ignore or show categories: Show

Setted 'Include subcategories' to 'Yes' you can decide if the dependent subcategories are always part of showing/hiding.

Adapt to categories
If the module and the JoomGallery are shown at the same time here you can determine whether the module shows only pictures from the category shown or not.


In default view several pictures from the JoomGallery are shown at the same time. Apart from the 'general parameters' already explained here you can make further settings. As already mentioned: Test the settings gradually and not several at one time. This means particularly the parameters for resizing the pictures and the text outputs.

Parameters for Default View 1

Parameters default view (1)

Number of columns
Here you can set in how many columns the pictures are shown. So you indirectly set the number of rows. For example the output of 10 pictures in 4 columns will result in 3 rows. According to the number of columns and the width of the pictures it can happen that the paddings between the pictures disappear and in worst case the pictures can overlap.

Example (3 columns):

Example for Default View

In this case you can experiment with the settings of the resize settings to get back the padding. Or decrease the number of columns.

Pagination
Outputting several images (e.g. if placing the module in an article or at a module position of JoomGallery) it could be helpful to show them in a paginated view.

Example:
Number of images: 9
Number of columns: 3
Images in pagination: 3
Pagination position: Above



Please keep in mind that all images are loaded in background. After that with javascript/CSS the first paginated site will be shown. When clicking at another site link in pagination the previous images are dimmed out and the next will be shown. A refresh in browser will result in a jump to first paginated site.

Link

  • No: no link
  • JoomGallery Default: according to the settings in JoomGallery link to detail view or animated view directly in e.g. slimbox
  • Kategorie: show category view
  • New Window: open the image in a new broser window
  • Javascript window:
  • DHTML/Thickbox/Slimbox: please read the explanation at configuration manager of JoomGallery -> detail view
  • Plugin: if there are plugins for JoomGallery e.g. Shadowbox or Highslide JS installed and enabled you can activate their views with this option.

Message if there are no pictures
When the module cannot find pictures due to your settings it can output an information about it.

Orientation of pictures

Set here the output of the picture in orientation to the text elements.
Note: When setted to 'left' or 'right' from the text and there is not enough space left in width the text will be display below the pictures.

Dynamic cropping/Width/Height
If activated, an additional script will calculate a part of the image. Therefore an output of images with equal dimensions can be approchaed e.g. squared thumbnails.
Have a look at the footer of this site to see an example:

Number of images: 10
Number of columns: 5
Dynamic cropping: Yes
Width: 60
Height: 60

In viewing many and big source images like the originals from JoomGallery the script can
have a certain payload to processor ressources. So it could last a time before the images
are calculated and shown. All other sizing parameters below are ignored.

CSS size definitions and CSS max. size
Sometimes the outputted thumbnails have not the same format (portrait/landscape or proportions 2:3/3:4) and does not fit in every case for showing them in the module. You can resize the pictures with this settings without losing the proportions.

Example: you have thumbnails with a max. edge (width/height) of 133px and you want to output them in resizing them ti 100px in max. edge. Set 'CSS max. size' to '100' and 'CSS Size definitions' to 'Yes'.
This will result in an individual CSS setting for each picture.

You can choose bigger values than the real picture dimensions. But it will result in blurry 
and pixelized pictures. With activated 'CSS size definitions' the settings in 'Width of pictures' and 'Height of pictures' are ignored.


Width of pictures
and Height of pictures
While the 'CSS size defintions' allows an indivudal styling of the picture you can set here size definition of all pictures.

Examples:

  • Width of all pictures -> 100px
    Width of pictures: 100
    height of pictures: <no entry>

  • Height of all pictures -> 100px
    Width of pictures: <no entry>
    Height of pictures: 100

  • Width and height of all pictures -> 100px (square thumbnails)
    Width of pictures: 100
    Height of pictures: 100
With activated 'CSS size definitions' or 'Dynamic cropping' the settings here are ignored

In the second part of the configuration for the defaultview we have a look at the parameters for output of the text elements, the scrolling and the common alignment.

Parameters for Default View 2

Parameters default view (2)

Show text
When set to 'No' the following parameters for showing the text elements are ignored. So only the picture will be displayed.

Picture title
Displays the title of the picture

Word wrap title
At which number of chars should a line break be inserted? If setted to '0' the title (one long word without spaces) will be shown in one line.

Picture description
Displays the description of the picture

Max. description length
Max. number of chars after the description should be shortened

Word wrap text
At which number of words should a line break be inserted?

User to Number of Comments
Display of the text element

With activated comment elements (date/text/count) pictures with no comments are not displayed.

max. comment length and Linebreak comment
see 'max. description length' and 'word wrap text'

Link to all comments
Outputs a link to the comments in detail view

Picture scroll
With this setting you can realize a little slideshow with help from the <marquee> HTML-Tag.

This HTML Tag is part of the upcoming CSS3 Standard. At the moment this tag introduced by 
Microsoft is meant as proprietary. So there can be some issues in certain browsers.
Please make a test with all actual browsers, especially Opera (our experience).

Scroll direction
Choose the direction the picture are moving

Height/Width of scrollfield
Dimensions of the 'box' in which the pictures are scrolling in/out.

Scrollamount and Scrolldelay
These settings determine the fluid movement of the scroll animation. Scrollamaount means the number of pixel between two scroll states. Scrolldelay describes the amount of milliseconds for pausing between two scroll states.

scrollmouse
Stope the show when moving the mouse pointer overit.

Horizontal direction and Vertical direction
The alignment of image- and text elements.

Sectiontableentry
If activated the rows gets alternating the css class 'sectiontableentry1' and 'sectiontableentry2'. So you can set in your template css different background colors.

Show Border to Padding of border to image
In the last parameters of default view you can define a border for the image. Please insert a valid code in 'Color of border' like '#000000' not '00000'. Or the short one '#000' if possible.
'Width of border' and 'Padding of border to image' need an entry like '2px' or '0.2em', not '2'.


Te mootools based slideshow shows in opposite to the default view always one picture. To say it exactly: In the HTML there are always 2 pictures, one invisible and the javascript changes between them with e.g. a fadig effect. The javascript is nearly the same as in RokSlideshow but modified for the module to work e.g. with multiple instances.

The idea and coding integrating the slideshow in the module was sent to us from a developer. Thank you very much Helene!

Play with the settings to get the best results for your needs. It's impossible to describe the best settings

Parameters for Slideshow

Parameters Slideshow

Width/Height
Dimensions of slideshow in px. Please enter only a number.

Type of images
The source of displayed pictures

Loading progress bar
Before showing the slideshow all pictures have to be reloaded. Set it to 'yes' to avoid a blank space during this time especialy when preloading detail/original pictures.

Show Text/Title captions
Show a a box with the title/description at the bottom of the picture.

Caption height to Description color
Height in px and color of the textbox

Dynamic Image Resizing
Resizes the image

Image Duration
Time span im milliseconds showing the image. Enter only a number.

Transition Duration
Time span im milliseconds showing the transition. Enter only a number.

Transition type

  • Fading

  • Zooming
    Zoom out of the image, consider the parameter 'Zoom percent'

  • Panning
    Move horizontal inside the image, consider the parameter 'Pan percent'

  • Combo - Ken Burns Effect - Combination of zooming and panning.
    consider the parameters 'Zoom percent' and 'Pan percent'

  • Pushing and Wiping - effects which moves the images
    Pushing will move the first image with the second image, wiping overlays the second image to the first.
    consider the parameter 'Transition for Push/Wipe' and experiment with the options.


Pan percent
only effective with the effects 'panning' and 'combo ken burns'
The area in percent of the image area to pan

Zoom percent
only effective with the effects 'zoom' and 'combo ken burns'
The area in percent of the image area from starting the zooming out.

Transition for Push/Wipe
mootools based effects to alter in addition the main effects 'pushing' and 'wiping'. Try it out..


According to the settings the module generates individual CSS styles outputted in the HEAD of the shown HTML Site. The module id is used to allow separate settings for several module instances. You can find the module id at the module manager in Joomla! Backend.

Examples:

Dynamic CSS 1 Dynamic CSS 2

CSS classes (xx= ID of module):

  • joomimgxx_imgct: defining the image and the text elements
  • joomimgxx_img: defining only the image
  • joomimgxx_txt:defining only the text elements

You can define settings for all module instances in modifying the entries in file '/modules/mod_joomimg/assets/mod_joomimg.css' vornehmen. But, in case of an update these willl be overwritten.


That's the end of this little documentation. Please post in our forum if there are any questions or problems with the module or this article.

Have fun.
JoomGallery Team

Joomla!®

Joom::Gallery is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.