This is a brief tutorial on adding a photo gallery to a K2 item using Simple Image Gallery Pro. This method will add a photo gallery to the bottom of the K2 Item as seen above.
To start out we need to go to our K2 Items: Log into the Joomla Control Panel. Go to Components -> K2 -> Items
Select an existing Item or add a New Item. Below I added a new item I labeled Test Item.
Above the text editor you will see a row of tabs: Content, Image, Image Gallery, Media, Extra Fields, and Attachments.
We are going to select the "Image Gallery" tab as seen below.
There are 3 options for adding photos to the Image Gallery:
For this example we are going to use option 1 and click on the link to create a new image gallery.
Once you click you will get a popup for the Simple Image Gallery.
Click on the green "Add Images" and your screen will look like the image below.
Now you can drag images into the area from a explorer or finder window just like you would from folder to folder, or you can click on the green "Add Files" button.
Select your images.
Tip: If you need to select consecutive images, click on the first, hold shift and click on the last. If you need to select multiple images not next to each other, hold down control while you click on each.
Once selected and choosen, click on "Start Upload"
When the images are finished uploading, close the Add Files window, Save and close the Simple Image Gallery window.
First you'll need to login to your Joomla website control panel,
Click here for information on how to log into your Joomla Administration area
Once you're in Joomla, you'll need to navigate to the Phoca Gallery control panel. Mouse over the menu item "Components" and select "Phoca Gallery" from the drop-down menu.
There are 2 different basic layouts to display your categories, the type of layout is determined by the type of menu item that your gallery is assigned to.
Category List Layout means you have, or are planning to have, more than one category in your gallery. This is helpful if you have multiple "albums" of photos or would like to separate sets of images in some way.
Category Layout means you are using one category for your gallery. This layout is useful if you only have one set of images that you wish to display and separating them is not a concern.
This information will be helpful when uploading photos and creating folders, which we will cover next.
If you require assistance with setting up your menu items, please contact me.
It's helpful to understand how Phoca Gallery works in order to organize and display your photos correctly. Your Gallery can be split into as many Categories as you choose, each category can contain a text description and as many images as you like, each with text descriptions - all of this may be organized in any fashion your choose.
In order for your images to be seen on your website, they must be placed in a category. Depending on the complexity and organization of your gallery, the number will vary, but you'll always be dealing with at least one category.
This method covers the easiest way to upload images and organize them as you go. There are a few steps, but if you follow the instructions correctly, Phoca Gallery will do all the work for you.
The first thing to understand about Phoca Gallery is this: uploading an image and adding an image to your gallery are two separate things. You need to upload the images first, then add them to the gallery by putting them in a Category. This method will show you how to do both in one shot.
There are a few different ways to upload images to your website. For now, we'll just cover uploading single images one at a time through the Phoca Gallery control panel, as it is the easiest method to get started with.
To get there: click the "Images" button in the control panel or in the menu. This will take you to the "Images" page, which contains a list of your images. On the "Images" page - click the "Multiple Add" button near the top right of the screen in the image list.
This takes you to a window that contains the file directory for the images in your gallery. These folders contain the images for each category.
Before you upload, you'll need to select a folder to upload to. This will ensure your images are where you want them from the start. If you're adding new images to an existing category - simply click the name folder you wish to upload into. Any images you upload will be placed in this location.
If you don't have any folders, or wish to create a new folder, look at the very bottom of the window where it says "Folder" - Simply type a name that makes sense and hit "Create Folder". This folder will become a new Category. Select that one if you like by clicking it's name in the list.
Note: Folder names cannot contain spaces or special characters. Use dashes as an alternative to spaces. You can change the Category name later.
If you created a new folder, it will be added to the list and look something like this:
Once you have selected the folder, you are ready to upload images. Near the bottom of the window is where you can do this. Under where it says Upload File, click "Choose File", find the image on your computer and hit "Start Upload".
Repeat this step for all of the images you wish to upload.
Note: If your images are larger than the dimensions listed in red ("Maximum Resolution") and you experience upload errors, you'll need to resize your images to be smaller before you upload.
Once you are done - click the green "up arrow" near the top left of the image list. This takes you back to the original list of folders.
Final Steps: Click the checkbox directly to the left of the any folder(s) you have uploaded new images into. Then click the "Save" button at the top right of the window.
View the gallery to make sure everything got put where you wanted it. Click the "Preview" link near the very top right of the window to open your website and navigate to your gallery page.
Here is what it might look like on your live site
Working with Image and Category Details
To view, edit and organize your existing images and upload more images simply click the "Images" button in the control panel.
This is a list of all the images in your Gallery.
Quick tip: If you have multiple categories, you can sort the list to view only the images in a particular category by using the "Select category" drop down at the top right of the list.
From here, we can edit titles and descriptions for each image individually. Simply click the name of the image to bring up the details.
There are a lot of things you can do here. For this basic tutorial, we'll just cover the Name and Description. To change the name of your image, type what ever you like in the "Name" field at the top of the list.
Quick Tip: You can also change the category the image appears in by selecting the desired category from the "Category" drop down list near the top of the list.
Near the bottom of the page, you can enter a description for the image in the text editor. This description will be displayed above your photos that are inside this category on your website.
Quick Tip: if you wish to add Search Engine Meta Descriptions or Tags to your images, you can do so directly above the Description text editor.
Click the "Save" button at the top right of the window to save and return to the list of images.
Deleting or Removing Images
You may wish to remove images from your gallery. You can either delete them permanently, or "Unpublish" them - which leaves the image in your gallery, but removes it from view on your website. You can "Publish" it later to bring it back.
To Delete images: Click the check box directly to the left of the images you wish to delete. Then simply click the "Delete" button near the top right of the window.
To "Unpublish" an image: In the image list there is a column titled "Published" to the right of the Title. If the image is published, there is a green check mark in this column. Simply click the check mark to unpublish it. The check mark is now a red x. To re-publish, click the x to turn it back into a check mark.
To edit categories details simply press the "Categories" Button in the control panel or menu. This will bring up a list of your categories. Click the title of the category to view and edit its information. This works exactly like the Images Detail described in the previous section.
Adding a description to your Category will display your text directly above the images on that particular category.
When you're done - click the "Save" button near the top right of the screen.
This will take you back to the list of Categories. To return to the Control Panel, use the Phoca Gallery menu - click "Control Panel". Or preview your changes by using the preview button at the top right of the window.
Common Issues and Troubleshooting
Errors when uploading images:
Be sure to take a look at the Maximum Size and Resolution numbers, listed in red directly over the upload box. If you have images that are larger than these, and you get an error - you will need to resize them to be smaller before you upload.
Be sure that your files are JPG, GIF, or PNG. Some other file types are supported, but it's best to go with one of those 3.
You may also need to rename your files before you upload. On the internet, files and folders cannot contain spaces or certain other characters. Dashes are okay.
Images not showing / not in correct location on website
If you added your photos to the wrong category, go to the images list, find the images and set the correct category near the top.
If your images are not in the gallery at all, go back to the "Multiple Add" screen in the "Images" page. Find the images you uploaded in the list / folders. Click the checkbox to the left of the image name(s), the select the correct category from the drop down list above the list of images, then click save.
Image / Category Descriptions not showing or not formatted correctly
The settings for this may not be configured as you wish them to be. These settings are not covered in this tutorial, but can be found in the "Parameters" tab. Contact me for assistance.
This tutorial was taken from the Phoca Gallery Documentation and is just a starting point covering the most basic functions of Phoca Gallery. Full documentation and support forum for this product can be found on the Phoca Gallery website. You can also contact me via email or the contact form below if you have any questions.