Gallery plugin for joomla. JoomGallery - a simple and functional gallery for Joomla


The gallery includes a plugin for output to material and a component. It allows you to automatically display all photos from the folder(s) you select and many settings for displaying both the gallery itself and an enlarged photo.

Screenshots:

Let's start installation
1. Download the component
2. Install it through the "Extension Manager"
3. Go to the "Plugin Manager" and activate the plugin (if it is not already activated) "Content - Simple Image Gallery Pro (by JoomlaWorks)"
Now the gallery component is installed correctly!

Gallery setup
Open the gallery - you will see all the folders in your /images directory. For example, I have folders r1 and r2, which contain photos - they can be displayed in the form of galleries.


Now let's set up the gallery - first click on the button in the form of a list on the left, and then on the button in the form of a gear - the following window will open:


In order for everything to be displayed as in my screenshots (of course, a lot still depends on your CSS site), set the following settings as in the screenshot:


Once finished - click "Save & Close" to save your changes

Gallery output in the material
To display the gallery, open the required material, in it you will see the following button:

Click on it - a window will appear in which click "Insert" for the folder that you want to display as a gallery. The gallery code will immediately appear in the editor:


From the author: very often it is necessary to publish various media content on website pages, namely images or photographs. It is very convenient if the images are grouped into one gallery. Therefore, in this lesson we will look at a very useful extension for CMS Joomla - JoomGallery, with which you can quickly organize an image gallery on the site.

Component installation

The extension that we will look at in this lesson is called JoomGalery - it is a very powerful extension, with a huge number of different settings and many different add-ons.

First of all, let's install this extension; to do this, go to the official Joomla website in the extensions section: http://extensions.joomla.org/. Next, go to the Photos & Images category, and in the Popular section we find the JoomGalery extension. By clicking on the Download button, we are redirected to the website of the developer of this extension.

In the Component section we download the JoomGalery component, in the Languages ​​section we download the required localization of this extension. In the Modules section, download the JoomImages 3.0 gallery image display module, and in the Plugins section, download the plugin for displaying images in content Content-Plugin JoomPlu and Editorbutton JoomBu (image insertion button). Then install the downloaded extensions.

Adding categories

The JoomGalery extension supports splitting images into separate categories. So let's go to the category assistant and create two categories gallery 1 and gallery 2.

Access – access of user groups to this category;

Exclude from toplists – exclude the category of their top lists?;

Exclude from search – exclude a category from the search?

Owner – owner’s choice;

Thumbnail placement – ​​the order in which thumbnails are placed.

basic settings

Let's go to the settings assistant and as you can see there are a lot of settings and they are all grouped into separate tabs.

Basic settings tab. Paths and directories.

On this sub-tab you can specify paths to folders for storing gallery images. The gallery uses three types of images:

Original image – an image that was uploaded by the user with unchanged dimensions.

Image detail view is a small copy of the image that is viewed on the image detail view page. Typically limited to 400px width;

An uploaded image thumbnail is a very small copy of the uploaded image.

Substitutions. Here you can specify the parameters for replacing non-standard characters in the names of downloaded files.

Photo processing— Settings related to the processing of photos when uploading them to the gallery. Parameters of interest:

Resize – whether images need to be resized when uploading;

Maximum photo size – limits the image size for detailed viewing;

Quality – the quality with which images will be processed (100 – without loss of quality);

Thumbnail Width, Thumbnail Height – dimensions for thumbnails.

I would like to note that you should upload the images and then change the thumbnail sizes in the settings. You will have to delete all downloaded images and download them again. Since resizing is performed only when the image is loaded.

Messages— Settings for various system messages and error messages.

Additional functions— Various additional functions.

Adding Images

You can upload images to the gallery in five different ways:

Drag'n'Drop Upload – uploading a large number of images at the same time (it is more correct to add to the queue, since the upload is performed one by one in any case);

I like the Drag’n’Drop Upload method the most, so that’s what I use. Let’s add a few images to the Gallery 1 category.

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

Next, in the settings, we will reduce the size for the thumbnails, and also load additional images into Gallery 2, so the thumbnails of the Gallery 2 category will be smaller than the Gallery 1 category. Now that the images have been added, you can view them by going to the photo assistant.

Displaying the gallery on the screen

To display the gallery on the screen, create a new main menu item. When choosing a menu item type, select JoomGalery:

I use the Categories menu item: standard view, that is, a page displaying data for one specific category. In the parameters you need to select which category data will be displayed. Now let's see what the gallery looks like:

Gallery settings (part 2)

Now let's see what other settings are available to us.

User Rights Tab.

Upload by user via "My Gallery"– JoomGalery supports loading images through the user part of your site and on this sub-tab you can configure the operating parameters of this mechanism.

Download– settings for downloading gallery images.

Ratings– settings for the ability to leave ratings for gallery elements.

Comments– parameters of the JoomGalery comment system.

Reports- settings for sending complaints from users.

User Interface Settings Tab.

Here are the settings for the main gallery view. Again, there are quite a lot of settings, but I would focus on the Upper and Lower Sections sub-tab. As you probably noticed when viewing the gallery, it consists of three blocks. The top block (header), the central block where images are displayed and the bottom block. So, the Top and Bottom sections sub-tab allows you to customize the display of the gallery header and its footer. On this sub-tab I turn off the display of all elements. In this case, on the viewing page of our gallery we will see the following:

In my opinion it looks prettier this way.

Gallery Browse Tab– contains only one sub-tab, and allows you to customize the appearance of the main gallery page. This is a page that corresponds to the menu type Home Page: Standard View. This page displays all categories added to the image gallery.

Category Show Tab– this tab contains the settings of the page that we have already created for viewing the gallery on our website, that is, this is a page for viewing images of a specific category. Here we will make the following settings:

Show feed icon – disable the display of the RSS news icon;

The location of mini-sketches/Details is in the center;

Show number of Downloads – whether to show the number of downloads – no;

Displaying the number of comments – no;

Show owner - no;

Displaying the number of ratings - no.

Now let's save the changes and see what we got.

Detail View tab– this tab contains settings for the detailed image viewing page. We can get to this page if we click on the gallery image thumbnail. Here is the page:

TOP lists settings tab– top list settings. Top lists are a row of links at the top and bottom of the gallery:

TOP 12: Best ratings - Newest - Latest comments - Most popular

I suggest disabling them as well, for this we use the setting Showing TOP lists and its meaning Do not show.

Search tab– gallery search display settings. Since we have quite a few images in the gallery, I also disable the search using the parameter Show search.

Save the changes and see what happens:

JoomGalery modules and plugins

Quite a lot of different modules and plugins have been written for the JoomGalery extension. For example, we have already downloaded and installed a module and two plugins. The module displays gallery images of both a specific category and all JoomGalery categories.

Installed plugins need to be activated, and the plugins work in pairs, since JoomPlu displays images in the page content, and JoomBU displays a button to add an image to the material.

So, actually, I created a test material “Gallery Test”, which displays images from the JoomGalery.

This concludes this lesson. All the best to you and happy coding!!!

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

The plugin - Simple Image Gallery can be used as a photo gallery; it can display images from a folder on the site. Its advantage is that you can create a gallery on the site in a matter of minutes and place it on the site on any page, this could be K2 materials or any other articles.

The plugin is very easy to use, does not create a load on the server and has simple settings that even a novice webmaster can understand.

The plugin is ideal for news portals where you need to show several images, for example, inside news.

Installing the plugin

The plugin is installed like a regular Joomla extension. After you download the installation package (one for all versions of Joomla 1.5/2.5/3.x), go to:

Extensions -> Extension Manager and install the zip file.

Then, go to Extensions -> Plugin Manager and enable the plugin (button, publish). To change plugin parameters, simply click on its name " Simple Image Gallery (by JoomlaWorks)".

Requirements

In order for the Image Gallery plugin to function properly, make sure that the PHP GD image library is installed on your server (this library is present on any normal hosting).

You should also make sure that the /cache folder is writable, in other words, make sure that the permissions for this folder are 755 or 777, otherwise the plugin will throw an error.

How to use the plugin?

It's simple, if you want to add a gallery inside an article, then you need to add a special tag with the name of the folder (Image Galleries). By default there is The root folder- this is the folder " images" (you can change it in the plugin settings). Create a new folder inside the root folder, for example, the folder demo and upload your images there in JPG or PNG format. Then open the article where you want to place the gallery and simply insert this tag:

Example of embedding a tag

(gallery)demo(/gallery)

Where demo- this is the name of your folder, so in place of this tag will appear Image gallery. It can be placed anywhere in the article, and you can also display several different or identical galleries on one page.

If you need to create a gallery from subfolders, then add their paths like this:

Example of embedding a tag

(gallery)demo/subfolder(/gallery)

In other words, write the path to the target folder with images without any slashes at the beginning or end of your path (there is no need to specify the root folder of images).

The image gallery uses the jQuery library based on the "fancyBox", known as the "Lightbox" effect. If your site doesn't use jQuery, the plugin can plug it into your site (and you can choose which version of jQuery to use in the plugin settings). The plugin will not load the jQuery library in Joomla 3.x, where it is already loaded by default by Joomla itself.

Download files:

Simple Image Gallery Version: v 3.01 Rus

Russified version, one installation package for all versions of Joomla.

07/06/2014 Russian Joomla 1.5-1.7-2.5-3.0 109.63 KB 7183

A photo gallery on a website is an everyday phenomenon, and photo galleries are created not only by people professionally associated with images to place their portfolio or create a collection site, but also by owners of company resources to demonstrate the company’s work, and simply by webmasters who want to display graphic information Beautiful.

By default, Joomla does not have the function of creating a photo gallery, but in the extensions catalog there is a whole section dedicated only to add-ons that perform it - Photos & Images -> Galleries.

The most popular addition in this category is Phoca Gallery. I’ll tell you about him.

Phoca Gallery

This extension can be downloaded as a component, as a module and as a plugin. We have already discussed the differences between each type of add-on from each other here; with Phoca Gallery the situation is exactly the same. The component will allow you to create galleries in the main part of the pages, replacing content, the module will display images in specially designated places, the plugin will add them inside articles using special code.

The possibilities of Phoca Gallery, especially given the free distribution, are truly extensive. The extension allows you to create photo sections with subcategories containing descriptions, display images in full screen mode in various ways, automatically add a watermark to them from a PNG file created in advance, link images to Google Maps coordinates, give users the opportunity to comment, rate images, view their statistics, and even beautifully display YouTube videos instead of pictures.

But it’s better than hearing it a hundred times, go to the demo site of the add-on and see the gallery in action once, and make sure by clicking on the menu items on the left side of the page that it really can do a lot.

You can find Phoca Gallery either in the Joomla catalog, or on the developer’s website, or in the admin panel (JED). You already know how to install add-ons.

After installation, the Components menu will be replenished with another item, by going to which you can manage the gallery.

By default, the English version of the gallery is installed, but a Russifier is available for it, download it. Attention: you need to download the second archive with one file inside: the first one is outdated, and it will not be possible to Russify it.

Unpack the downloaded archive and copy the only extracted file ru-RU.com_phocagallery.ini into two directories:

  • To the view folder http://site_address/language(on my local server this is the path Z:\home\test1.ru\www\language).
  • To the catalog of the form http://site_address/administrator/language(by default on localhost - Z:\home\test1.ru\www\administrator\language).

The Phoca Gallery interface will immediately become Russian-language.

Before using the component, it is highly advisable to configure it correctly. To go to the options, open Components -> Phoca Gallery and in the upper right corner of the page that appears, click the Settings button. There are a lot of parameters, for convenience they are grouped into tabs.

Categories View. The default tab. Here you can configure the appearance of the list of categories: by what criterion they will be sorted, the size and order of category images, etc. Here you can also show/hide subcategories, empty and inaccessible categories, as well as hide those that you think are useful some groups of visitors should not be seen.

Here you can configure the display of photos within categories, that is, display at a time when a group of pictures is already open, but the user has not yet clicked on any of them. Sorting, displaying icons and names, the ability to directly download pictures, displaying lists and Categories and Back buttons, as well as statistics parameters and much more. However, there is no particular point in describing the elements, since a tooltip is available for almost everyone: move the mouse pointer to the name of the item and after a while the tooltip will tell you what it is for.

Detailed view. The way in which the image will open on the full screen is configured here. Full screen window views can be customized. Here you can also set the parameters of the slide show (by the way, Phoca Gallery allows you to flip through photos in this mode not only using buttons on the screen, but also using keys).

Main settings. Despite the symbolic name of the tab, not all administrators change its settings. But in vain, because here you can set meta data, configure RSS and geolocation.

Users. The nature of the settings is a social tab. Here you can set the access level and configure a custom control panel, allow site visitors to add pictures to your gallery, enable ratings and comments.

Sketches. Contains options for creating thumbnails and adding a watermark, adjusting image sizes and even a couple of security options.

Here is one of the most important settings - image sizes. The fact is that after loading a picture, the component creates three copies of it: large (it opens in full screen), medium (thumbnail, visible in categories so that the user opens exactly the picture he wants to see) and small (displayed in the admin panel , to make it easier for you to work with the collection).

In the Adjust image sizes and detail window area, you can adjust the width and height of each copy, and it’s better to do this before the gallery is full of images, because to resize the copies later you will have to re-create them.

Rights. This tab is useful if there are several groups of users working on the site and you want to establish what can be done by whom and what cannot be done by whom.

Once the photo gallery is set up, you can move on to creating categories.

Click Categories in the Phoca Gallery control panel and click the New button in the upper left corner of the page that appears. Set up a category (at least enter its name), go through the tabs - the parameters are quite varied. I will not focus on them, since after getting acquainted with Joomla, their purpose should be quite clear, and in extreme cases, tooltips will help.

While in the Phoca Gallery control panel, click Images, on the next page click Add multiple, at the bottom of the next page click the Multi upload button if you want to upload several images at once, then click Add files, select the images and click Start Upload.

You can display a gallery on a website using a proven method - create a corresponding menu item (read about how this is done here).

Hello, dear readers of the blog site. Today we will talk about one of the best free extensions, which allows you to implement a full-fledged photo gallery on Joomla. For these purposes, we will use Phoca products - the Phoca Gallery component and the plugin of the same name.

You can also link photos to a position on a Google geographic map - “Gallery Categories Map”.

In addition, your visitors will have the opportunity to rate photos, leave comments on them, view statistics and see their geographic location. At the same time, users themselves will have the opportunity to upload photos if you allow them to do so in the settings.

In addition to various options for organizing photo galleries in Joomla, you can also choose how to view full-size photos when you click on their thumbnails. You can see and try all these options in action by clicking on the demo site menu items in the “Category View” area.

Personally, I like the “Highslide (Image only)” method the most, but, as they say, there are no comrades for taste and color.

It turns out that quite a lot of time has passed since I last installed it, or is it the developers who are so quickly adding new ways to view photos. In any case, I haven’t noticed “Coolirs 3D Wall” and “JAK Lightbox” from them before. Well done developers, needless to say, they are developing the free project so intensively. Respect and respect to them, as they say.

In general, play around with all sorts of display methods on the Phoca demo site so that you can consciously choose one option or another in the component settings. Oh, I found another interesting way - “Youtube”. Amazingly, the photo gallery allows you to add and display videos from Youtube using Lightbox.

Yes, they also have the ability to automatically add a Watermark to all or only individual photos from the gallery you create. A very useful feature for those who post unique photos and do not want to allow them to be taken away uncontrollably.

An example of a watermark can be seen on the “Watermark” page. Moreover, it does not necessarily have to be located in the middle of the photo, as shown in the example. The position of the watermark can be set in the settings of the Phoca Gallery component.

You will really need to create a file with its graphic image in PNG format (and which one is best to use) and upload it to the hosting. In general, you can apply a watermark first on your computer - in batch mode in .

If we consider it functionally, it is worth saying that this component automatically creates several versions of images of different sizes from uploaded photos. Some of them are used as thumbnails when viewing photo gallery categories, others are large versions of photos that are shown when you click on the thumbnail.

In its settings you can set both the size of the created thumbnails and the size of full-size photos. It is precisely at the moment of converting the downloaded images that the watermark will be mixed into the resulting image.

It seems that Phoca Gallery can even work with photos that are located on Google’s server, or at least that’s what “” says. I cannot say this for sure, because I did not take advantage of this opportunity.

If you also want to Russify them, then you need to additionally download Russification packages for them from here and here.

To install Foka Gallery on Joomla, you need to select “Extensions” - “Install/Uninstall” from the top menu in the admin panel. In the window that opens, in the “Download package file” area, click on the “Browse” button, find the just downloaded archive with the component on your computer, and then click on the “Download file&Install” button:

Joomla will report to you that the installation was successful, but you will still need to choose what exactly you have done at the moment - installed the component for the first time (you will need to click on the “Install” button) or updated the previously installed one to a newer version (click on the “ Upgrade").

After this, you will be redirected to the main admin panel of Phoca Gallery. Many inscriptions will be in English, so for its Russification you need to unpack the archive with the Russian language pack ru-RU.com_phocagallery.zip, which you downloaded earlier. Inside the archive there will be two files that will need to be uploaded to the hosting server in a folder with localizations of various Joomla extensions.

First you will need to connect to your site. Then find the directory among the files and folders of your site (in FileZilla, the remote server directories are located in the right window):

Open this folder and copy two Russification files into it from the left FileZilla window (objects located on your computer are available there) - ru-RU.com_phocagallery.ini and ru-RU.com_phocagallery.menu.ini. Now, when you go to the admin panel of the component (“Components” - “Phoca Gallery”), you will see that all the inscriptions are displayed in Russian.

True, if for some reason the admin panel of Joomla itself is not Russified, then you will still have everything in English. Those. in this case, you will have to first Russify the Joomla admin panel and select Russian for it - the default language. First, you will need to download the Russian language pack.

Then unpack it and copy all the files contained in it to the server in the folder:

/administrator/language/ru-RU

If you don’t find the “ru-RU” folder in “/administrator/language/”, then you will need to create it by right-clicking in FileZilla and selecting “Create Directory” from the context menu. Check the permissions for this directory and change them to 755() if necessary.

After this, in the Joomla admin you need to select “Extensions” - “Language Manager” in the top menu, go to the “Administrative Panel” tab on the page that opens, check the box next to the Russian language and click on the “Default” button located at the top of the page on the right:

Phoca Gallery settings (watermarks, sizes and effects)

Before we begin to create categories for future photo galleries and, as well as start uploading photos, let’s first look at the settings of this component. The fact is that when you upload images from your computer to the hosting server, three copies of them of different sizes are automatically created from them.

The smallest copy is used in the Phoca Gallery admin area so that when viewing a list of photos you can understand what the images are. Slightly larger copies are used on gallery pages as thumbnails (mini-images), by clicking on which you can see the largest copies obtained from the main images uploaded to the server.

So, if you upload all the photos you need to the server, and then decide that, for example, the large image obtained from them is not large enough, then you will have to do extra work: in the component settings, select the desired size for the large and small ones created copies, and then delete and recreate thumbnails for all images already uploaded to Joomla.

That's why I first advise experiment with the settings, uploading only a few photos to the server. Next, you need to look at the result and make adjustments to the settings. And only after making all the necessary adjustments can you begin to fully upload all the photos to all the necessary gallery categories.

So, select “Components” - “Phoca Gallery” from the top menu of the admin panel. In the upper right corner you will need to click on the “Options” button. As a result, a list of settings for this component will open in a pop-up window.

There are quite a lot of them and if we talk about them all, it would take more than one article. I will only focus on those that I think are significant. You can try everything else yourself, since the free photo gallery is completely Russified.

At the beginning of the list are settings that specify the display of thumbnails and other elements in gallery categories. Here I left almost everything unchanged, except that I removed the detailed view, download and folder icon buttons from under the previews (mini-images) (selected the “Hide” option for these fields from the drop-down list):

In the next area, “Category View Settings,” you can configure the appearance of thumbnails in their list. Will a random image from this category be displayed instead of a folder, will a button to return to the list be shown inside, how many columns will they be located in the list, and much more:

To view more detailed information about the purpose of this setting item, move and hold the mouse cursor slightly over the name of the item you are interested in. As a result, a tooltip will appear with a more detailed description:

Choose between the Highslide and Lightbox effects in the settings

The next important area is the Detail View Settings. Here, in the Details Window area, you can choose how to display a large copy of the image after a visitor to your site clicks on its thumbnail in the gallery or slideshow:

You can see how all the proposed options will look on your experimental photo gallery, consisting of several photos. Basically, you will have to choose between two main display methods - Highslide and Lightbox. Who likes what. Lightbox is more popular, and Highslide is more impressive.

To do this, you will need to select one of the options for displaying a detailed image (Highslide or Lightbox) in the “Details Window” field and click on the “Save” button located at the very top.

After looking at the selected option in action, you can either stop at it or continue the selection by returning to the Phoca Gallery settings and selecting another method from the list.

Personally, I am most impressed by the “Highslide JS (images only)” option, although Lightbox is also quite good. In this case, all open photos on the page can be dragged across the screen with the mouse for comparative viewing. Close open photos by clicking on them with the mouse. Cool.

In addition, in this gallery you can view and move between photos (including using a slideshow) not only using the buttons displayed at the top of the viewing window, but also using the buttons on the keyboard (Enter opens and collapses the photo, the arrows allow move back or forth across them, and the space bar on the keyboard launches the slideshow).

The next important area in my opinion is the "Slideshow", where you can set the delay time between showing photos and a number of other parameters for the slideshow in Joomla:

Adding Watermarks to images in the gallery

At the beginning of this publication, I already mentioned the possibility of automatically adding watermarks to all uploaded images in this photo gallery. Now let's take a closer look at how this can be configured.

First, you will need to find the “Watermark Settings” area and in the “Create Watermark” field, select the “Yes” option. And in the fields “X-position of the watermark” and “Y-position of the watermark” - select its position in the image:

To apply these settings, scroll to the top of the window and click on the “Save” button. But with this we only activated the function of automatically adding a Watermark to all images uploaded to the server, and we have not configured what will be used as it.

But, in fact, you don’t need to configure anything else; you just need to create two graphic watermark files in PNG format, for example, in Photoshop or .

They should be named WATERMARK-LARGE.PNG (to be added to large copy) and WATERMARK-MEDIUM.PNG (to be added to thumbnails). If you don't want to add watermarks to your thumbnails, just don't create this file. Now they will need to be copied to the server in the folder where the uploaded photos will be stored. Usually this:

/images/phocagallery/

But this will only be true if you plan to upload all the images into one folder. And if you upload photos for different gallery categories to different folders (creating them in the /images/phocagallery/ directory), then you will be able to automatically add different watermarks to images from different categories.

In this case, you need to create the required number of pairs of files WATERMARK-LARGE.PNG and WATERMARK-MEDIUM.PNG, and upload them via FTP to folders of different categories:

/images/phocagallery/name

The images from these watermark files will be superimposed on the thumbnail (if you want) and on a larger copy in the position that you previously selected in the settings. The Watermark will be applied when images are uploaded to the server from Joomla, therefore, this mark will not be added to photos that have already been uploaded.

You will have to re-create thumbnails for all these photos from the Phoca Gallery admin panel or even delete them from the server and then upload them again. But it’s best, as I said above, to first make all the necessary settings for the photo gallery, and only then start uploading pictures to the server.

Adjusting the size of images in photo galleries and slideshows

The next important area of ​​settings is “Image and Window Size Settings.” Here you can set the size of copies of photos uploaded to the server. If you remember, at the beginning of the article I mentioned that when filling, three copies are automatically created from each image (you can forget about the preliminary one on the computer):

  • a very small sketch that will be used in the admin panel
  • the middle thumbnail that will be displayed on the photo gallery pages
  • large detailed image that will be shown when you click on the thumbnail

So, in the “Image and Window Size Settings” area, you can set the width and height in pixels for all three copies:

It makes sense to resize them immediately after you start working with Phoca Gallery and before you start bulk uploading images to a photo gallery or slideshow. Otherwise you will have to repeat the filling again.

Create categories and upload photos to Phoca Gallery

Now we will need to think through the category structure for the future gallery, just like in Joomla itself.

But unlike Joomla, which uses a two-level nesting scheme for materials (sections and headings), in Phoca Gallery we will have the opportunity to create gallery categories with an arbitrarily high level of nesting. But first things first.

First, we need to select “Components” - “Phoca Gallery” - “Categories” from the top menu of the admin panel. In the window that opens, you will see a list of all the categories you have already created:

To create a new one, you need to click on the “Create” button located at the top of the page. As a result, a window will open where you can set the settings for the new category of our future gallery:

In the “Title” field, you need to enter a title that will be visible to visitors on the site when viewing all categories of the photo gallery. In the “Nickname” field, you can enter the same name in Latin, separating words with dashes (it’s better not to use the underscore “_”, because there is an opinion that search engines do not perceive it very well).

Why do you need to fill in the “Nickname” field? - you ask. This is only necessary if you use the capabilities provided in Joomla to create human-readable URLs (CNC or SEF optimized addresses of web pages of your Joomla site). If you don’t quite understand what CNC is and how to activate it, then I advise you to read it using standard tools.

In the “Parent” field, you can optionally select the parent into which the category you are creating will be nested. The level of nesting is not limited and it all depends on your needs. In the “Access” field you can select who will be able to view it.

By default, the “Everyone” option is selected, but if you wish, you can make it so that only registered users can see it (the “Registered” option), or only administrators in general (the “Special” option).

These were the standard access settings. But then there will be fields that will allow you to set specific rights to view, add and delete images from this photo gallery category for Joomla.

The fact is that this component has very large functionality and allows you to manage photos in various categories not only for administrators, but also for ordinary registered users.

The fields “User Access Rights,” “User Rights to Upload and Add,” and “User Rights to Delete and Publish” allow you to select who:

  1. will be allowed to view photos
  2. will be allowed to upload and add images
  3. You will be allowed to publish photos uploaded by other users or even remove them from this category. In fact, in the “User rights to delete and publish” field, you can select from the list of all those registered on your Joomla site those who will be the full administrator of the photo gallery

I would like to draw your attention to the fact that by default, all visitors to your site will be allowed to view images, and no one will be allowed to add or administer photos (except you, of course). Personally, I have not tried to organize a gallery into which ordinary visitors could add pictures, but I think that there should be no problems with this.

Further on the settings page there are fields that allow you to link the downloaded images to a specific location on the Google map. But to do this, you will need to first obtain a Google Maps API key in order to be able to use its map on your website.

Personally, I haven’t linked photos to the map, but I still have experience working with Google Maps, because... I attached a similar card to the contact page. The principle of obtaining a key remains the same. First, you can read about, and then register your project in this system and receive a key that will only work on the resource whose domain name you specify during registration.

You can register to receive a key, and you will need to enter the resulting Google Maps API in the settings of the photo gallery component in the “Geotagging settings” area in the “Google Maps API key” field.

You can set the remaining settings at your discretion. In addition, you can set a description for this category.

To display a description, you will need to find the “View Settings” settings area and in the “Display Style” item select the “Categories, images and detailed information” option:

Likewise, you will need to create the required number of categories in Phoca Gallery and then start adding images to them.

At the second stage, we must select the category where we will fill, after which their automatic reworking will begin using the Phoca Gallery component. For each photo you upload, three copies of different sizes will be created and placed in the /images/phocagallery/thumbs folder.

The sizes of the created copies are configured in the component parameters, and I already wrote about this a little higher. The smallest copy will be used to view previews in the Phoca Gallery admin area.

The medium-sized copy will appear on the photo gallery pages as a preview, and the largest copy will be shown to visitors when they click on the preview. But first things first.

Uploading one image to a gallery for Joomla

So, first we need to upload graphic files to the server. There are several ways to do this. Firstly, if you need to add only one image, then you can use the built-in wizard - “Components” - “Phoca Gallery” - “Images”.

In the window that opens, you will see a list of all previously uploaded photos and all you have to do is click on the “Create” button to add a new one. As a result, a wizard window will open:

Fill out the “Name” field, the contents of which will subsequently be placed in . The title should include keywords if you like.

In the “Published” field, you determine whether the uploaded photo will be shown in the category that you select just below from the drop-down list. You can fill out the remaining fields as desired, and to upload you will need to click on the “Image” button located opposite the “File name” field. Then you will see the files contained in the /images/phocagallery folder.

Basically, you could connect to your site via FTP in advance and upload a graphic file with the photo you need to the /images/phocagallery folder. In this case, you will only need to find this image in the window that opens and click on it. As a result, the file name will be automatically copied into the “Name” field.

If you have not uploaded a file with a photo via FTP and do not intend to, then you can use the built-in uploader, the form of which is located at the bottom of the window for adding an image to the photo gallery:

Well, after filling out all the other fields that you consider necessary, to complete the process you will need to click on the “Save” button located at the top.

But we will talk in more detail about creating various menu items for displaying photo gallery content on website pages in the next article in this series about the plugin of the same name.

Adding multiple photos at once

We've just learned how to add one image to a gallery, now let's look at batch uploading photos. In principle, everything is very similar. We will need to again select from the top menu “Components” - “Phoca Gallery” - “Images”.

On the page that opens you will see a list of image files that are currently located in the /images/phocagallery folder. If there are no photos here that you would like to add to one of the categories, then you will have to upload them to this folder.

Personally, I use the simplest method, from my point of view - uploading via FTP. I connect to the site through the Filezilla program and in its right window I open the /images/phocagallery folder, and in the left window I open the folder on my computer’s hard drive with the graphic files I need. I select the ones I need and select “Upload to server” from the right-click context menu.

But you can also use the loaders built into the JAVA or FLASH component. You will find them by scrolling the window all the way down.

For them to work, you will need to install either a JAVA machine or a Flash player in the operating system, if you did not have them before. If you use a JAVA downloader, you will need to select the necessary image files on your computer’s hard drive, and then click on the “Download” button:

I usually upload everything to the /images/phocagallery folder via FTP, and then tick the photos I need, then select from the drop-down list of the “Category” field the one in which they should go, put a tick in the “Yes” position in the “Published” field " and click on the "Save" button located at the top:

Actually, that's all.

To ensure that newly added images to Phoca Gallery appear at the top of the list, click on the header of the last “ID” column so that the photos with the highest ID (the last ones added) appear at the top of the list:

Displaying photo gallery contents using menu items

Now it’s time to start displaying the contents of the photo gallery on the website pages. There are three ways to do this. First, you can create the appropriate items for Phoca Gallery, and then everything will be displayed in the template area intended for content display (where articles are usually displayed).

Secondly, you can use the gallery modules Menu Module and Tree Module, which will allow you to insert a gallery menu in tree and regular form into the desired positions of your template.

An example of such a module can be seen on the developers’ website in the right column - Tree Menu. In addition, you can display any images from it using the PImage Module.

Thirdly, gallery content can also be displayed inside articles using the plugin. To do this, you do not need to create additional menu items - you just need to insert the code for calling Phoca Gallery Plugin into the text of the article, specifying a number of parameters that determine the appearance of the displayed photo gallery or slideshow.

Now we go to the admin panel, move the mouse cursor to the “All menu” item located at the top, and select from the drop-down list the one to which we want to add an item (or several items) to display the contents of our component.

As a result, a window will open with a list of all items in this menu. To create a new one, click on the “Create” button located in the upper right corner of the window. In the tree that opens, expand the “Phoca Gallery” branch by clicking on it.

The “Phoca Gallery User Control Panel Location” item may be needed if you want to allow visitors to add images to the gallery. This menu item will allow them to access a form for uploading photos and creating categories.

If you allow only users from a certain group () to add photos, then in the settings of this menu item it would be appropriate to allow only visitors starting from this group to view it. Others simply won't see him.

The “Cooliris 3D wall plan” option allows you to display photos from any particular category in the form of a very colorful Flash wall, which can be rotated by simply moving the mouse. You can see what it will look like in real life.

The top two menu items that this component allows you to create in Joomla are the main and most frequently used ones.

"List of all categories" serves to create a link (item) in the menu, by clicking on which the visitor can see a list of all categories. The form in which they will be presented there is specified in the settings of this component, which we already discussed a little higher.

“View” allows you to create a link in the menu, following which the visitor will see a photo of any category. Personally, I used the first option to create a parent menu item, and used this one for nested ones. The result is a “Photo” item with a multi-level drop-down list of photo gallery categories:

In the settings of the first option for this, I specified the “top” option in the “Parent element” field:

But for the second option, select the menu item nested in the first item as the parent:

By the way, the remaining settings “List of all categories” and “View” are practically no different from the standard ones, which we discussed in detail in earlier articles in this section -.

Unless when creating the “Category View” item you will need to indicate the one from which photos will be displayed:

Now it’s time to move on to considering the capabilities of the Phoca Gallery Plugin, which will allow us to create photo galleries directly in articles. Let's install it. If you haven’t downloaded it yet, you can do so and get the Russification from here.

From the top menu of the Joomla admin panel, select “Extensions” - “Install/Remove”, find the archive with the plugin on your computer and complete the installation by clicking on the “Upload file & Install” button.

In order to get into its settings (or simply activate it), you will need to select “Extensions” - “Plugin Manager” from the top menu of the Joomla admin panel. In the window that opens, find the line with ours and click on its name:

If you just need to activate it, then you don’t have to go into its settings (especially since it actually doesn’t have any settings), but simply click on the red cross located in the line with the name. The plugin manager page in Joomla will be updated and you will see a green check mark next to our hero instead of a red cross - active.

If desired, Phoca Gallery Plugin can be Russified. True, there is no particular meaning in this, since only a few phrases are translated, but nevertheless. To do this, you need to unpack the archive with the crack and copy the only file from there to your hosting server in the folder:

Language/ru-RU

You will still need to download and install gallery modules:

  1. Menu Module - a module for displaying your gallery menu in Joomla
  2. PTree Module - a module for displaying a gallery tree menu in Joomla
  3. Image Module - a module for displaying arbitrary images from a gallery in Joomla

After installing the modules, you need to select “Extensions” - “Modules” from the top menu, find ours in the list and go to their settings. There you will need to activate the module, select the position required for it in the template, look at and, if necessary, adjust the settings in the right area. The easiest way to understand which ones is to try them in practice.

Phoca Gallery Plugin for inserting photos into articles

We will assume that you have already installed the plugin, and also created a category in the settings of the Phoca Gallery component, into which you uploaded photos from your computer. To prevent the category you created from being displayed on the site when viewing their list, unpublish it.

To do this, in the admin panel, select “Components” - “Gallery” - “Categories” and uncheck the “Published” column next to the one that should not be displayed in their list:

Although, you can use the plugin to insert into the text of the article those photos that are in already published categories - this does not matter. Now we will need to figure out the Phoca Gallery Plugin code that we will insert into the articles.

Basically, everything you need is written, and there is also a complete list of parameters that you can use. True, everything there is in English, which for me personally is a significant problem, but...

Nevertheless, I will explain with an example how the photo gallery plugin works in Joomla and what parameters should be specified in the code for calling it.

If you go to the content manager in the Joomla admin panel and open any article for editing, then in the place where the photo gallery is displayed on the site, we will see the code for calling the plugin:

(phocagallery view=category|categoryid=57| limitstart=0|limitcount=28|detail=5|displayname=0| displaydetail=0|displaydownload=0|imageshadow=shadow1|displaybuttons=0)

At first glance it looks scary, but if you look at it, there is nothing complicated here. The main thing is to understand why each parameter is needed and choose the appropriate gallery display option.

In the future, you can simply copy the code that is already ready and customized to your taste and replace in it only the ID of the category from which the images will be taken, as well as indicate the range of ID photos that will be included in the slideshow.

Let's look at the example code. Firstly, it’s worth saying that it can be inserted without going into HTML mode. However, it must be enclosed in curly opening and closing braces, and the various parameters must be written without spaces, but separated from each other by the “|” character.

The first parameter “phocagallery” means that the Phoca Gallery Plugin is being accessed. Next, in the “view” parameter, you indicate what exactly you want to display on the page with the article - all categories, some photos from one of them, or switchimage (I don’t know what that is). In our example, the second option “view=category” is selected

With the next parameter “categoryid” we set the ID of the category from which the pictures will be taken. You can find out the ID by going from the admin panel along the path “Components” - “Gallery” - “Categories” and looking in the last column “ID”, opposite the one you need.

In the next parameter “limitstart” we set the initial ID of the photo in the previously selected category. You can find out this ID by going from the admin panel along the path “Components” - “Phoca” - “Images”.

In the window that opens, you will see a list of all images loaded into the component. Select the name of the category you need from the drop-down filter located above the list and in the window that opens, look in the last column “ID”, opposite the photo with which you want to start showing the slideshow or photo gallery.

In the “limitcount” parameter, set the number of photos following the image previously selected in “limitstart”. They will be taken in ascending order of their ID until the number becomes equal to the number specified in this parameter.

In the “detail=5” parameter you specify how full-size images are displayed when viewing a photo gallery. There are eight options in total:

0 - Modal Box | 1 - Standard Popup Window | 2 - Modal Box (only image) | 3 - Shadowbox | 4 - Highslide JS | 5 - Highslide JS (only image) | 6 - JAK lightbox | 7 - No Popup

Having put the number 5, I chose my favorite display method - Highslide JS.

All remaining plugin parameters:

Displayname=0| displaydetail=0|displaydownload=0|imageshadow=shadow1|displaybuttons=0

mean that I don't want the image title, image details, upload button and other buttons to be displayed. True, I agree with showing the shadow from the photo. That's all I can say about the given example of using Phoca Gallery Plugin in Joomla.

In fact, there are a lot of options for displaying a photo gallery in an article using this wonderful plugin, but it would be impossible to describe them all. I advise you to simply carefully read the instructions included with it and try everything in practice.

Good luck to you! See you soon on the pages of the blog site

You might be interested

Photo Gallery for Joomla - Part 3 - Creating galleries in Joomla 1.5 using the Phoca Gallery component - adding categories and uploading images to the photo gallery
Extensions for Joomla - what they are and where to download components, modules and plugins for Joomla, how to install and remove them
K2 component for creating blogs, catalogs and portals on Joomla - features, installation and Russification
JComments - free comment component with captcha for Joomla, its installation and configuration
Modules in Joomla - viewing position, setting and output, as well as assigning class suffixes
Joomla plugins - TinyMCE, Load Module, Legacy and others installed by default







2024 gtavrl.ru.