Update Your RokGallery Gallery

Click the below links for easy to follow instructions on how to:

If you are new to Joomla, we strongly recommend that you check out our beginners guide here: How To Update Your Joomla 2.5 Website Content

Important Things To Remember

Image file name: must be normal letters and numbers.  Hypens (-) are allowed, but no spaces.  Also no special characters allowed (i.e. no ” / ‘ ( ) * & ^ % $ £ @ ! , etc)

Gallery name: must be normal letters.  Spaces and numbers are allowed.  No special characters allowed (i.e. no ” / ‘ ( ) * & ^ % $ £ @ ! , etc).  If you use special characters in your gallery name, your gallery will not display correctly on your website (previous and next Lightbox arrows can disappear, etc).

Gallery Tag: use only lower case letters, numbers and “-” to separate words.  No other characters allowed.  If you use uppercase letters, you may start seeing an “Image not found” error for some, or all of your images.

Image file format must be .jpg. Not .JPG, .jpeg, .JPEG, .png, .gif or any other format

Hold cmd (Mac), CTRL (PC) and click when selecting gallery images to tag/delete/publish, etc. Do not drag a box around to multi select, as it is possible to accidentally select additional images that you are not aware of.

No duplicate filenames allowed.  If you want to replace a file with a better version, you must delete the existing file before uploading the new one.  Uploading two files with the same name can cause errors that are often tricky to fix.

When uploading, the total size of all the files must not exceed 4MB.  If you exceed this size limit, just remove some of the files and upload them in a second batch.

When tagging images, make sure that the number shown in the tag box is the same as the number you are expecting.  If not, cancel and try again. If you don’t check and accidently tag additional images, this could corrupt your gallery and start displaying errors.  If you have dragged a box around images to multi select (to be avoided) then there may be unwanted additional images here, and the count may be higher than expected.

“Image not found”:  If you see this error on the front end of your website, ensure that all the above rules have been followed, and double check to make sure that your Gallery Tag does not contain upper case letters.

If you are still not seeing the results you expect, then you may be viewing a cached page.  This is where your browser shows you a saved copy of the page (rather than downloading the page each time) in order to provide a quicker user experience.  To force-refresh the page, push CTRL + F5 (for PC’s), or fn + F5 (for Mac’s).  If this still does not work, view the page in a different browser (Chrome/Safari/FireFox/Internet Explorer, etc), or clear your browser cache (via settings) to get a non-cached page.

If you start seeing errors, the first thing you must do is ensure you are strictly following the above rules.

Back to top

How to Create a Gallery

Go to Components -> RokGallery 

On the right hand there’s the main control buttons:

Click the Galleries button and then hover over “Select a Gallery” and click “Create New”

Name: use upper and lower case letters.  Spaces are allowed.  Numbers are allowed.  Do not use special characters.  No apostrophes, no commas, no colons, no semi-colons, etc.  If you use special characters your gallery will not display correctly in your website (previous and next Lightbox arrows can disappear, etc).

Tag: use only lower case letters, numbers and “-” to separate words.  No other characters allowed.  If you use uppercase letters, you may start seeing an “Image not found” error for some, or all of your images.

Make sure the below are both ticked before you click Save:

• Automatically publish slices when added to a gallery
• Automatically delete slices when removed from gallery

You have now created your first gallery.  Read on for how to upload photos to your gallery.

Back to top

How to Add Images to Your Gallery

Before uploading your images you will need to prepare them.  You may be starting off with very large images which will need to be resized to the appropriate size before you upload them to your website.

Please remind yourself of the Important things to remember

Your images should be a maximum of 800 pixels wide and 600 pixels tall, and may be much smaller depending on the display method you choose for your gallery (this is covered in Gallery display options).  Any larger than this and you may find that users/customers with lower resolution monitors cannot see the image in one go as it will be too big for their screen (especially true with smartphones).

You can easily resize your images using image software such as Photoshop or a good free alternative such as GIMP from www.gimp.org. There is a simple guide on how to scale (reduce the size of) an image using GIMP here.

Unprepared images can be bad for your website for numerous reasons including:

• Poor user experience.  Large images take a long time to load, and your user/customer will have to wait for the large image to load.
• Slow website.  One large image on a page can slow the whole page loading time, which can be very irritating for users.
• Excessive bandwidth consumption.  Every time a user loads your large image, it takes up bandwidth, which is often a limited monthly supply.  When your bandwidth runs out, your website goes offline.
• SEO impact.  Slow page load times hurt your website’s SEO.

Once your images are prepared, click the Upload button

You can either drag and drop your images, or click browse (preferred method).

Check that the total file size has not exceeded 4 MB (the screenshot below shows 1.73 MB, which is fine).

If you have exceeded the 4 MB limit, you can either push the “Clear All” link at the bottom of the window, or hover over any of the individual images and click the red “x” to remove and reduce the total file size.

When you are ready to go, click the Upload button, and you can watch your files being uploaded.

When your files have all successfully uploaded, you should see a screen similar to below:

Click the Close button.

You will now need to do two things: publish your images, and then add your images to your chosen gallery.

To publish your images, hold cmd (Mac), CTRL (PC) and click when selecting gallery images to tag/delete/publish, etc.  When you this a blue box will appear around the selected images.  You can click the image again to unselect if desired.  Do not drag a box around to multi select, as it is possible to accidentally select additional images that you are not aware of.

When you have selected all the images you wish to publish, push the publish button.  You will see the top right corner triangle of each selected image go from red to green.

Now to add your image(s) to a gallery.  This is called “tagging”.

Select your chosen images: hold cmd (Mac), CTRL (PC) and click when selecting gallery images to tag/delete/publish, etc.  When you this a blue box will appear around the selected images.  You can click the image again to unselect if desired.  Do not drag a box around to multi select, as it is possible to accidentally select additional images that you are not aware of.

Push the Tag button, and then select your chosen gallery.

It is very important to make sure that the number of files selected is the same number as you are expecting.  If it is not, then push Close, click anywhere in the white space of the images to unselect all images, and then try selecting your chosen images again.

If the number shown in the window above is the same as you are expecting, then make sure the “add” option is selected and push Apply.

You should see that all your selected images should now show a number 1 in the tag section in the bottom right hand corner of the image.  You may have to refresh the page to see this update for all images.

To remove a tag for an image, just click on the edit button (second from the left).

Here you can edit the title, description and remove tags from the image by clicking the “x” on the undesired tag.  You can also unpublish and delete the image if you wish.

If you are adding images to an existing gallery, your new images should now appear on your website.

If you are adding images to a gallery you have just created, then you will have to add this new gallery to your website pages in order to see it on your website.  Please read on for instructions on how to do this.

Back to top

How to Display a New Gallery on your Website

Go to Extensions -> Module Manager

Please note – you may not be able to see this area if you do not have the appropriate permissions.

Either:

• Click New
• Select an existing gallery module which you would like to copy (if applicable), and then click Duplicate.  If you are using a duplicate, then amend your new duplicate gallery module, and save accordingly.

If you clicked New, then select RokGallery Module.

Fill out all the relevant areas, and tick which menu items you would like your gallery to appear on.  If you want to create a new menu item, you will possibly need to create a new page first, and then create a new menu item.  You will then need to tick this new menu item in the Menu Assignment area for your RokGallery Module (shown below).  You can also change the order of your menu items using the Menu Manager (follow the link for the instructions).

“Position” will depend on your website template, as each website is different.  Either follow an existing gallery module, or play around with the positions to find something you like.

Click the Select button and choose your gallery.

If you chose to “Sort By: Title”, please be aware that this is a character by character sort, and will sort the below files in the following order:

1. • 1
   • 10
   • 2
   • 20
   • 201
   • 3
   • 31
   • 311
   • 4, etc

A better naming method would be:

• •  a1, a2….a9, b1, b2, b3….b9, c1, c2, etc

Important Note: due to errors sometimes occurring, we recommend using the “Link to RokBox Slice Image” option instead of the Full Image option.

Change the image order using the Ordering button – this will only have an impact if you choose Sort By: Order in your RokGallery Module settings.   Drag and drop the images with your mouse to change the image display order.

There are several different ways to display your gallery, and this is covered in Gallery display options

Back to top

Gallery Display Options

When editing your Gallery Module, there are several different ways you can display your images.

A couple of examples are below with the relevant settings next to them:

Grid:

Slideshow (all images must be the same size):

Back to top

Multiple Galleries on One Page

It is absolutely fine to have more than one gallery showing on a single page.

To do this, just select the Menu item of your choice in the Menu Assignment area when setting up your gallery modules.

Changing the Order in Which Your Galleries Are Shown On a Single Page

To change the order that your galleries are shown in, you have to change the order of your gallery modules.

Go to Extensions -> Module Manager

Please note – you may not be able to see this area if you do not have the appropriate permissions.

To only see your gallery modules, select RokGallery Module from the Select Type dropdown box.

If your Ordering column looks like this, then click the word Ordering to unlock, and enable you to sort your modules:

If your Ordering column looks like this, then you are good to proceed:

If you have a small change to make, just push the blue and white up/down arrows to move your menu items up/down the menu order.
If you have large changes to make, you can change the numbers in the boxes to reflect your new order.  1 is first, 2 comes second, etc.
Click the “Save” icon at the top of the Ordering column to save your changes.
Push CTRL+F5 in your website to see your changes.

Back to top

Troubleshooting

Carefully read through the Important things to remember section.

Back to top