1. opis w języku polskim
  2. description in English language

 


 

opis w języku polskim

yasig logo kolor

YASIG to angielski skrót wyrażenia 'Yet Another Slimbox Image Gallery', czyli w dowolnym tłumaczeniu 'jeszcze jedna galeria zdjęć slimbox'. Zdecydowałem, że do kodu slimbox wprowadzono już na tyle dużo zmian i modyfikacji, że czas nadać tak powstałym mutacjom nową nazwę, a kod powinien zacząć żyć własnym życiem.

Pierwsze rozszerzenie YASIG (dodatek) miało premierę w maju 2010. Od tego czasu projekt znacznie się rozrósł. Dzisiaj zespół rozszerzeń o nazwie YASIG jest dostępny dla środowiska Joomla! 2.5.x. Pliki projektu mogą zostać pobrane np. spod następującego adresu: http://extensions.joomla.org/.

Jeżeli chcesz podejrzeć, jak wygląda tworzenie projektu od kuchni, zajrzyj na stronę http://joomlacode.org/gf/project/yasig/

Poniżej znajdziesz szczegółowy opis rozszerzenia oraz demo galerii. Artykuły zostały przetłumaczone także na j. angielski.

 


description in English language

yasig logo kolor

YASIG is English abbreviation of the following sentence 'Yet Another Slimbox Image Gallery'. I've decided that over time so many alterations were made that result of all these varations should have its own name and the code should exist as a separate product.

 

The first YASIG extension (precisely: plugin) was issued in May 2010. Since that time project was significantly developed. Today we call as YASIG the whole set of extensions available for Joomla! 2.5.x environment. Project files might be downloaded e.g. from the following address: http://extensions.joomla.org/.

If you would like to see how open source project looks like, please have a look here: http://joomlacode.org/gf/project/yasig/.

Below you can find detailed description of the gallery as well as gallery demo. For your convenience both articles were translaned into English.

@ Joomla! 1.5

Table of content

Introduction

Extensions

Functionality

Installation

Check if installation was made correctly

How does it work

Deinstallation

Configuration of YASIG plugin

YASIG gallery syntax

Configuration of yasiguncle plugin

FAQ (Frequently Asked Questions)

Support, bug reports

Automatic processing of pictures, client oriented

Team

Appeal

 


Introduction

As it is with every kind of content, also photo gallery is used for information exchange between:

  • Author - maker of a web page and
  • User - person willing to see a content created by the Author (viewer).

Specific role of Author is to choose set of pictures which will be presented on Internet to a User. This set of pictures is called gallery. Actions related to preparation of pictures are carried on by Author at so called backstage of web page, so after log on to backstage. Thanks to YASIG preparation of gallery is to some degree automated, what speeds up the process.

From User point of view pictures are presented as pictures reduced in size, so called miniatures. After One clicks in any of miniatures, the picture in original size is shown. With aid of keyboard or mouse it's possible to move over the rest of pictures from within gallery set.

To sum up, YASIG is photo gallery solution which with aid of few Jooomla! lets you for:

  • processing of photos, that will create Author's gallery,
  • photo presentation to persons willing to see them, to Users viewers of our web page.

Processing of pictures (e.g. reducing of size, adding of a frame around pictures etc.) is done at server side, so at first photos have to be send to server. Such way of processing might be convenient to socially oriented web portals. All Author of gallery is required to do is just transfer of chosen files to specified directory at server.

Set of YASIG extensions is compatible with Joomla! ver. 2.5.x. It makes use of Javascript JQuery library in quite intelligent way.

Correctly processed graphical files consists of .JPG and.PNG pictures.

To display pictures in fancy way it's used well known Lightbox effect, but truly it's slimed down 'brother', Slimbox.

For purpose of picture processing (shrinking, adding border etc.) GD PHP library is used.

Return to Table of Content

 


Extensions

Extensions which are parts of YASIG solution are described in the following table:

No. Type of extension
Extension name
Extension cathegory
Function
1. plugin plg_yasig content Display of photo gallery.
2. component com_yasiguncle content Engine used for picture processing.
3. plugin plg_yasiguncle editors-xtd Extension of content editor.
4. package pkg_yasiguncle - Installer / deinstaller of remaining extensions.

 

Extension plg_yasig may be used standalone. One may by oneself process picture files (more about this in chapter Automatic processing of pictures) and by oneself prepare gallery call (more about this in chapter YASIG gallery syntax).

Extensions com_yasiguncle and plg_yasiguncle always should be installed together with extension plg_yasig. Standalone installation of these extensions is pointless because by doing so one will not gain any functionality.

Extension pkg_yasiguncle lets for quick and easy automatic installation of all extensions.

Return to Table of Content

 


Functionality

Functionality depends on one's point of view:

  • Author or
  • User.

 

From an Author point of view:

Function Description
Textual form of gallery code.

Simple syntax of gallery code. Code of the gallery contains only some text. As a consequence, future changes to a gallery are very straightforward and quick. All is required to do some changes is just text editor. Internet browser doesn't have to receive each gallery picture one by one, only gallery text. It speeds up the process of content adjustment.

Placing gallery with pictures is just placing of certain set of characters with specified order and meaning (syntax), limited with braces: {...}. Engine which processes www site (Joomla!) will take care to interpret such a text string in a way that for User it will be visible as picture gallery.

Optional text description to each gallery picture.

Optionally any text description could be added to any picture. A comment is displayed to User if one will move mouse cursor over a miniature or, after click in any photo miniature, at the bottom of the photo. Comments aren't placed in separate file or in file header. They are present in body of article content. Thanks to that it's possible to edit them easily with ordinary text editor.

Google search engine indexes picture file names as well as picture comments.

Either picture file names, either text strings (comments) are indexed by Google search engine. It means that after gallery is ready, file names and comments might be searched with use of Google.

Full control of the Author over size and order of the photos in gallery.

Author of gallery has full control over size and order of photos. Size of the photos depends only on Author preferences. Change of the photo order in the gallery is as simple as text edition. It could be done as copy paste combination in text editor.

Quickness

Many photo galleries works as follows: in code there are storied only information about photo location, and its original size. Just on time when User starts to browse photos, the gallery engine alters size of photos, keeping resized versions temporarily in cache memory of server. When user stops browsing the temporary copies are removed. Operation of photo resizing takes time and a lot of server resources like memory and processor time. From User point of view a time needed to resize photos is added to a time required to get photos from its origin. Everything is fine if Author's web page is visited by small number of Users and each User browse another gallery. Lets consider situation when there significant amount of Users. Then it might be a case that server won't be able to quickly and efficiently process all the photos and what's more User will have to wait much longer for the final effect: resized photo.

YASIG just reads photos already prepared to be viewed. There is no overhead due to photo processing. What's more server is able to serve many Users concurrently. So it could be said that YASIG pays off at its best in case of big, popular galleries...

Saved disk volume

YASIG just displays previously prepared photos. Resized, shrinked photos of the time are much smaller then original photos. As a consequence Author can save some server side disk volume. For example typical photo in size of 2816 x 2112 pixels takes about 2.4 MB in volume. The same photo resized down to 640 x 480 pixels takes only 81.6 kB and resized down to 200 x 150 pixels takes only 18.5 kB. So it could be clearly seen we are able to spare about 2.3 MB of disk volume per each photo.

 

From a User point of view:

Function Description
Quickness

Many photo galleries works as follows: in code there are storied only information about photo location, and its original size. Just on time when User starts to browse photos, the gallery engine alters size of photos, keeping resized versions temporarily in cache memory of server. When user stops browsing the temporary copies are removed. Operation of photo resizing takes time and a lot of server resources like memory and processor time. From User point of view a time needed to resize photos is added to a time required to get photos from its origin. Everything is fine if Author's web page is visited by small number of Users and each User browse another gallery. Lets consider situation when there significant amount of Users. Then it might be a case that server won't be able to quickly and efficiently process all the photos and what's more User will have to wait much longer for the final effect: resized photo.

YASIG just reads photos already prepared to be viewed. There is no overhead due to photo processing. What's more server is able to serve many Users concurrently. So it could be said that YASIG pays off at its best in case of big, popular galleries...

Photo browsing with use of mouse

To browse sequentially gallery photos one can simply use a mouse by clicking. All what has to be done is click to the left or right half of a photo of currently displayed photo. Then additional buttons are temporarly overlayed for a time being when mouse cursor is placed over a photo area:

  • next photo button is displayed if right half of a photo is clicked,
  • previous photo button is displayed if left half of a photo is clicked.
Photo browsing with use of keyboard (shortcuts)

To browse sequentially gallery photos one can simply use a keyboard (shortcuts):

  • next photo is displayed if 'right cursor' (->) is pressed down,
  • previous photo is displayed if 'left cursor' (<-) is pressed down,
  • to exit gallery just press 'Esc' key.

 Return to Table of Content

 


Installation

Installation is possible in two ways:

  1. Use of installation package. This is default, recommended method of installation. Installation package consists of scripts which are run during the time of installation. The scripts take care to put all the required files of all extensions in the proper folders.
  2. Manual installation of each particular extension.

Typically to perform installation task it's required to have privileges of www site administrator.

 

Installation of YASIG with use of installation package

Below it's described in details the default method of installation.

  1. Download installation package:

Installation package is a file where it's name consists of section "pkg" and it's extension is equal to .zip, e.g. "pkg_yasiguncle_j.2.5.zip". Please keep in mind location where the file was saved.

 

  1. Log in to background of your web site

In address field of your web browser put address of your web site finished with "administrator" section, for example:
http://www_address_of_your_web_site.extension/administrator

After a while your screen should look like neighbouring picture.

Eng LogowanieZaplecze

 

  1. Installation of package file
Open the extension manager: menu -> Extensions -> Extension manager. Eng WyborExtensionManager
Choose Install tab. Eng InstallTab
Push the button "Browse" and navigate to location where you've saved installation package (e.g. "pkg_yasiguncle_j.2.5.zip"). Eng WskazPaczke
Push the button "Upload & Install". Eng Instaluj
After a while there will be displayed message with confirmation of correct installation ("Installing package was successful"). Eng Zainstalowano

Scripts which are run automatically during installation turn on all plugins.

Short film showing how to install all extensions and check if extensions are installed properly:

 

Return to Table of Content

 


Check if installation was made correctly

In order to check if plugin is installed correctly open Extension manager: menu -> Extensions -> Extension Manager. Eng WyborExtensionManager
Open "Manage" tab. Eng Zarzadzanie

In the field "Filter" put the string "yasig" and push the "Search" button.

After a while one should see a table similar to the one presented at neighbouring picture with 4 installed extensions:

  • com_yasiguncle,
  • pkg_yasiguncle,
  • plg_yasig,
  • plg_yasiguncle.

These are all extensions belonging to yasig solution.

Eng FiltrujYasig

Return to Table of Content

 


How does it work

What actions should be taken by Author to prepare a gallery:

  1. selection of photo set, which will be presented to users in form of a gallery,
  2. upload of photo set to Joomla! server, in an input folder,
  3. make output directory, if necessary,
  4. open article, where gallery will be located.

All the rest, as follows:

  1. processing of photos: preparation of normal size photos and thumb photos according to set of rules,
  2. preparation of YASIG gallery calls,
  3. insertion of YASIG gallery calls into content of article

will be made automatically by yasiguncle extensions (component and editor-xtd). If necessary some short description for pictures may be entered in article body by Author. By default, automatically, as picture comment n a picture file name is entered.

At the beginning it looks for example as follows:

  1. Set of extensions is correctly installed,
  2. in the input folder (e.g. images/stories/yasig_input) Author have uploaded e.g. 2 pictures, as desribed in the table:
File name
Approximate file size
Picture size [px] x [px]
IMG_7952_KaluznicaCzarnozielona.JPG 1.6 MiB 1704 x 2272
IMG_7954_KaluznicaCzarnozielona.JPG 1.5 MiB 1704 x 2272

 

Author has chosen an article, where YASIG photo gallery will be placed, opened this article, put the cursor in article text content in the place where YASIG gallery call will be placed.

Eng Artykul

Just under the editor window there is visible 'yasiguncle' button. If the button is clicked, the wizard will come out. With assistance of the wizard all next tasks are made.

Eng EditArticle
Mentioned button. PrzyciskYasig

When 'yasiguncle' button is clicked, screen will be covered with neighbouring window. This is mentioned wizard. Author of a gallery should now configure it by changing at least some of the options. First of all one should indicate input folder, so the folder where pictures were uploaded. Later the output folder should be specified, so the folder where processed files will be placed. (Author may change also all other options, which are explained in details in the following section of this guide, Configuration of yasigunucle plugin).

Eng Step2 1

Author may change options 'Input folder' and 'Output folder' in two ways. The first way is clicking in second text row below the text 'Input folder' and 'Output folder'. In consequence small window with list of server folders will be opened. In this way, with use of mouse, one can specify existing folders. The second way is placing input and output folders manually. For this purpose the first text input fields are prepared, just below the text 'Input folder' and 'Output folder'.

At neighbouring screen gallery Author already changed required options. If the visible link Show options is clicked, one may change all other options.

When all the options follow requirements of gallery Author, one should click button 'Go to next step!' to proceed.

Eng Step2 2

On the screen small turning circle will be displayed. It shows time of picture processing. In a moment syntax of YASIG gallery will be displayed together with button 'Insert yasig-output into article'. Click this button with mouse.

Eng Step3 1

When the mentioned button is clicked, in article content correct YASIG gallery body will be placed. All one have to do now is saving the article.

Eng Step3 2

In the following table there are presented files processed by yasiguncle.

Files processed by yasiguncle
Approximate ffile size
Picture size [px] x [px]
200_IMG_7952_KaluznicaCzarnozielona.JPG 10,8 KiB 150 x 200
640_IMG_7952_KaluznicaCzarnozielona.JPG 95,1 KiB 480 x 640
200_IMG_7954_KaluznicaCzarnozielona.JPG 11,2 KiB 150 x 200
640_IMG_7954_KaluznicaCzarnozielona.JPG 87,9 KiB 480 x 640

That's it! The effects of so prepared gallery may be observed in Demo article.

Short film showing how graphical file processing looks like in practise:

Short film showing how gallery looks like from User point of view:

 

Return to Table of Content

 


Deinstallation

In order to check if plugin is installed correctly open Extension manager: menu -> Extensions -> Extension Manager. Eng WyborExtensionManager
Open "Manage" tab. Eng Zarzadzanie

In the field "Filter" put the string "yasig" and push the "Search" button.

After a while one should see a table similar to the one presented at neighbouring picture with 4 installed extensions:

  • com_yasiguncle,
  • pkg_yasiguncle,
  • plg_yasig,
  • plg_yasiguncle.

These are all extensions belonging to yasig solution.

Eng FiltrujYasig

Mark a square to the right from "pkg_yasiguncle" string with a tick.

Eng ZaznaczPackage

Push the button "Uninstall" (top-right corner of the screen). After a while one should see the following messages:"Unistalling package was successful" and "There are no extensions installed matching your query". (The latter message is caused by string "yasig" still present inside of "Filter" field.

Eng Odinstalowano

Return to Table of Content

 


Configuration of YASIG plugin

Extension (plugin) YASIG displays pictures in form of gallery. Configuration panel of this extension is available from background of web page.

In order to adjust configuration of YASIG plugin open Extension manager: menu -> Extensions -> Plug-in Manager. Eng PluginManager

After a while one will see list of all installed plugins.

Eng Plugins

In the field "Filter" put the string "yasig" and click the neighbouring to the right button "Search". After a while  one will see on the screen all installed plugins which fit to criteria of filtering.

Click in the name string "plg_yasig".

Eng Plugins1

Next screen displays all configuration options available for this plugin. Screen is divided into several areas:

  • Basic Options
  • Details

 

Eng YasigCalosc
"Details" area presents among others syntax of gallery. Because understanding of syntax is no longer crucial issue, it's not explained in details in this section. Details are explained below in separate, dedicated to that subject section YASIG gallery syntax. Eng YasigDetails
The section "Basic Options". Each option is explained in details in the following table. Options are also illustrated below with some pictures. Eng YasigBasicOptions

Option description will be visible if mouse cursor is placed over option name label.

Option name
Option description
Default value
Comment
Loop photos Allow to navigate between the last and the first picture or vice versa NO

When YES option is set, when last photo in the gallery is displayed and pressing 'Next' button, there will be displayed the first photo of the gallery.

Overload of opacity How much the background will be opaque during viewing a picture (0 - no opacity, 1 - completely) 0.8

When User clicks on whatever miniature in a gallery, background of the web site is obscured (opaqued) and in the front photo is displayed in so called normal size. The parameter 'overload of opacity' determines a level of background opacity.

Background color Background color during viewing a picture #000000 (black)

Color of picture background. The available options from the drop-down list: black, red, pink, yellow, green, cyaneous, blue, white.

Top margin Top margin 0

When miniatures are displayed at a web page, it's a size (in pixels) of a margin between top edge of a miniature and a content above.

Right margin Right margin 10

When miniatures are displayed at a web page, it's a size (in pixels) of a margin between right edge of a miniature and a content along side.

Bottom margin Bottom margin 10

When miniatures are displayed at a web page, it's a size (in pixels) of a margin between bottom edge of a miniature and a following content.

Left margin Left margin 0

When miniatures are displayed at a web page, it's a size (in pixels) of a margin between right edge of a miniature and a content along side.

'Next' label The inscription on the right side of image describes the link to next picture Next

Text string displayed in the area of a button used to display the next picture in a gallery.

'Prev' label The inscription on the left side of image describes the link to previous picture Prev

Text string displayed in the area of a button used to display the previous picture in a gallery.

'Close' label The inscription on the left-bottom side of image describes the link to close gallery Close

Text string displayed in the area of a button used to close a gallery.

'Picture' label The part of the inscription on the righ-bottom side of image Picture

Text string displayed in the area just under the picture in normal size.

'From' label The second part of the inscription on the right-bottom side of image from

Text string displayed in the area just under the picture in normal size.

Load JQuery Load JQuery with YASIG plugin YES

Enables to switch off JQuery library. This option is handful if web site already uses some extension which is based on JQuery. Thanks to this option one might avoid of multiple loading into memory of different versions of JQuery library, what pays off with shorter time of web processing and less amount of errors.

Additional information Additional information under picture

Under each photo from within gallery there might be displayed additional text string. It might be for example short info about shortcuts handful for navigation between pictures of gallery.

The meaning of the options from above table will be more clear if one will see the following pictures. In general gallery enables to User two separate views of pictures:

  1. miniature view - visible directly in the content of web page, the default view,
  2. normal size view - visible after User click on any miniature.

 

Miniature view

Below one can see gallery of three separate pictures in miniature view. The distances between these miniatures are set thanks to options 'Top margin', 'Right margin', 'Bottom margin' and 'Left margin'. Thanks to 'margin' parameters it's possible to change a distance between miniatures. Miniatures look better, especially if gallery contains more photos. YASIG doesn't allow for exact order of miniatures. It just tries to fit miniatures in the available area of a page. Its behaviour is determined by web template (CSS files) which control particular area of a web page. It can happen than in one row there are displayed 3 pictures in a row and in the next just 2. For example it is worth to pay some attention to place in one gallery all miniatures vertically oriented separately from next gallery with horizonally oriented miniatures.

If there exists a comment then just after placing of mouse cursor over miniature of such a picture, after a short while User will see this comment in 'word balloon'.

640_YASIG_English_02_zm

 

Normal size view

When User click in any miniature there will start well known and beloved Lightbox script. Currently viewed page will be obscured with semitransparent background and in the front there will be displayed picture in normal size.

Eng WidokNormalny1

If then User will move mouse cursor over normal size picture there are displayed additional control buttons. For example if User move cursor over the right part of a picture there will be displayed string 'Next' suggesting that if User clicks then next gallery picture will be displayed.

Another set of gallery attributes are marked in red: just below main picture body there is displayed example comment; at top right a control button used to display next gallery photo.

640_YASIG_English_04_popr

There are marked in red: at bottom left an informational string saying about number of currently displayed picture in gallery sequence, at bottom right the control button used to close gallery normal size view, at top right another control button used to display previous gallery picture.

640_YASIG_English_03_popr

Option 'Additional information' lets to display any additional string which will be repeated for all pictures within gallery. It can be for example a sentence explaining how to navigate within gallery pictures.

Eng WidokNormalny

Return to Table of Content

 


YASIG gallery syntax

YASIG gallery is no more just a string of text characters between encompassing brackets: {...}. After opening bracket there must be present word "yasig". The simpliest text string equal to YASIG gallery, which actually will not display anything useful looks like this:
{yasig }

To display even just a one photo one should specify up to three arguments: (x1, x2, x3) separated by vertical bar character: "|":

{yasig
x1|
x2|
x3||
}

The meaning of arguments:
x1 - acces path to a picture file in so called normal size,
x2 - acces path to a picture file in so called miniature size,
x3 - description or comment displayed below each picture.

One is obliged to use the first two arguments: x1 and x2. If you don't have preapraed picture in miniature version (argument x2), as the second argument might repeated the first argument. The third argument (x3) might be omitted. If ones gallery consists of several pictures, the x1, x2, x3 arguments have to be specified separately for each gallery picture. The set of arguments x1, x2, x3 specific for one gallery picture is called section.

Example gallery looks like this:

{yasig Beginning of YASIG gallery call


AccessPathToNormalSizePhotoFile/picture1_normal.jpg |
AccessPathToMiniatureSizePhotoFile/picture1_miniature.jpg |
Example comment dedicated to picture1 ||

Section of the first picture in the gallery


AccessPathToNormalSizePhotoFile/picture2_normal.jpg |
AccessPathToMiniatureSizePhotoFile/picture2_miniature.jpg |
Example comment dedicated to picture2 ||

Section of the second picture in the gallery


...


...


AccessPathToNormalSizePhotoFile/picturen_normal.jpg |
AccessPathToMiniatureSizePhotoFile/picturen_miniature.jpg |
Example comment dedicated to picturen ||

Section of the n-th picture in the gallery


}

End of YASIG gallery call

 

Notes:

- The access path to pictures might not start with the first slash puncture ("/") and might not consist of any quotes (correct: images/fik.jpg; incorrect: "/images/fik.jpg").

- Parameter x3 - picture description text string might not consist of special character |. All other characters are allowed.

- If Author doesn't want to attach description to some pictures, just leave out the third agument - x3, but then it's required to keep in mind that picture parameters sequence have to be finished with double vertical bar: ||. All picture sections have to be separated with character sequence "||". Example:

{yasig
img/stories/NewPhotoGallery/picture1_normal.jpg |
img/stories/NewPhotoGallery/picture1_miniature.jpg ||

img/stories/NewPhotoGallery/picture2_normal.jpg |
img/stories/NewPhotoGallery/picture2_miniature.jpg ||

img/stories/NewPhotoGallery/picture3_normal.jpg |
img/stories/NewPhotoGallery/picture3_miniature.jpg ||

img/stories/NewPhotoGallery/picture4_normal.jpg |
img/stories/NewPhotoGallery/picture4_miniature.jpg ||

img/stories/NewPhotoGallery/picture5_normal.jpg |
img/stories/NewPhotoGallery/picture5_miniature.jpg ||
}

- To make use of YASIG just copy above example directly into any article content.

- In one article there could be as many YASIG galleries, as one likes.

- Author can use YASIG just for the purpose of single picture gallery.

- At frontpage there might be displayed all miniatures or just the first one. If you'd like to display just the first one, add the word "single" written with small letters, just after the "{yasig" sequence. Example:

{yasig single

img/stories/NewPhotoGallery/picture1_normal.jpg |
img/stories/NewPhotoGallery/picture1_miniature.jpg |
Comment to picture no. 1 ||

img/stories/NewPhotoGallery/picture2_normal.jpg |
img/stories/NewPhotoGallery/picture2_miniature.jpg |
Comment to picture no. 2 ||

img/stories/NewPhotoGallery/picture3_normal.jpg |
img/stories/NewPhotoGallery/picture3_miniature.jpg |
Comment to picture no. 3 ||

img/stories/NewPhotoGallery/picture4_normal.jpg |
img/stories/NewPhotoGallery/picture4_miniature.jpg |
Comment to picture no. 4 ||

img/stories/NewPhotoGallery/picture5_normal.jpg |
img/stories/NewPhotoGallery/picture5_miniature.jpg |
Comment to picture no. 5 ||

}

Return to Table of Content

 


Configuration of yasiguncle plugin

Remark. yasiguncle component doesn't require any configuration. After installation it isn't visible in component menu.

In order to adjust configuration of YASIG plugin open Extension manager: menu -> Extensions -> Plug-in Manager. Eng PluginManager

After a while one will see list of all installed plugins.

Eng Plugins

In the field "Filter" put the string "yasig" and click the neighbouring to the right button "Search". After a while  one will see on the screen all installed plugins which fit to criteria of filtering.

Click in the name string "plg_yasiguncle".

Eng Plugins1

Next screen displays all configuration options available for this plugin. Screen is divided into several areas:

  • Details
  • Basic Options
Eng Yasiguncle EkranOgolny
In "Details" subwindow one can find some basic information about plg_yasiguncle plugin. Eng Yasiguncle Szczegoly
The section "Basic Options". Each option is explained in details in the following table. Eng Yasiguncle OpcjePodstawowe

Option description will be visible if mouse cursor is placed over option name label.

Options presented in the following table might be used for future use of yasiguncle wizard, what theoretically might shorten time necessary to prepare next galleries. Independently from saved option values after each call of yasiguncle wizard it is possible to alter any of the options manually.

Option name
Option description
Default value
Comment
Input folder path Access path to a folder containing your photos to be resized tmp/inputimages One input path folder - one call to yasiguncle.
Output folder path Access path to a folder whre resized photos will be stored tmp/outputimages Output folder may be the same as input folder, but this approach is not recommended.
Root path for file lookup root directory when you'll be able to select folders to process with yasiguncle; empty = root path of Joomla! If Author frequently uses yasiguncle it's worth to specify root path. It should speed up specifying of input and output folders.
Thumb width Width of a thumb image in [px] 200 Size of a thumb should be significantly smaller than size of a normal size picture.
Thumb height Height of a thumb image in [px] 150 Size of a thumb should be significantly smaller than size of a normal size picture.
Normal image width Width of a normal image in [px] 640 Width of a normal size picture which will be shown after User clicks a thumb picture.
Normal image height Height of a normal image in [px] 480 Height of a normal size picture which will be shown after User clicks a thumb picture.
Border width of a normal image Width of a normal image border in [px] 0 Border is  part of an image.
Border width of a thumb image Width of a thumb image border in [px] 2 Border is  part of an image.
Image signature string Image text string signature placed in the left bottom corner of a normal size picture created by YasigUncle!
Use SINGLE mode (only one image visible in article) Use SINGLE mode (only one image visible in article) no Gallery in single mode displays only one thumb (miniature) for the very first image of gallery picture set. Please see Demo or YASIG gallery syntax.
Cut thumb image Cuts image if proportional size-down would disturb thumb size yes This option is useful in case of numerous pictures in gallery set, where some pictures are oriented in different way than others. Thanks to this option Author can uniquely distribute all thumbs at web site area. The disadvantage of this option is that some thumbs will be cut in the way that will disturb subject of a photo.
Keep files in input folder Keep files in input folder after resizing no This option may be useful if Author of a gallery would like to experiment with different settings of yasiguncle.
Separate gallery code Separate gallery code to independent galleries no Let's assume that input gallery folder consists of 5 pictures. If this option is set to 'yes', in article content will be inserted 5 separate YASIG galleries, one for each photo from input folder.
In table Separate gallery code to independent galleries in tables. Warning! It works only if option 'Separate gallery code' is turned on. no

Let's assume that input gallery folder consists of 5 pictures. If this option is set to 'yes' in article content will be inserted 5 separate YASIG galleries, one for each photo from input folder. Each photo will be inserted into table, (1 row, 2 columns in size), into left column. Width of a left columnt will be adjusted to size of a thumb image.

This option is helpful if Author is willing to prepare a guide, where aside of a picture is placed explanation text.

Return to Table of Content

 


FAQ (Frequently Asked Questions)

  1. What are the requirements for YASIG gallery plugin?
  2. Is it possible to make text flow around miniatures of photos?
  3. Sometimes YASIG gallery doesn't work. Instead of well known and beautiful 'slimbox' effect there open up just one photo in new browser tab. Why is it so?
  4. Sometimes beside main photo displayed with use of 'slimbox' effect there are additionally displayed pieces of background. Why is it so?

 

1. What are the requirements for YASIG gallery plugin?

The requirements for YASIG gallery plugin are the same as for J! environment, which are: PHP 5.2+ and MySQL 5.0.4+

 

2. Is it possible to make text flow around miniatures of photos?

No, directly it's not possible. Effects like surrounding miniatures with text in body of an article depends on J! environment editor features. The YASIG gallery call is just as simple as put in the following syntax in article body:

{yasig
...
}

Editor doesn't treat the above text like a photo, but just like another few lines of text. However there is quite simple and elegant bypass of this issue. All you have to do is just:

  1. Put into your article body simple table 1 column wide and 2 rows, in total of 100% width.
  2. In left column of the new created table put YASIG gallery call.
  3. Set width of left column equal to width of miniature picture.
  4. In right column put 'surrounding text'.

Please follow example. For better clarity table borders are visible and coloured (black). The surrounding text is italic.

 

Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text.

{yasig
...
}

Surrounding text.Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text.

Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text.

 

What will look like this:

 

Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text.

200_img_8077_RusalkaOsetnik_VanessaCardui

Surrounding text.Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text.

Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text. Surrounding text.

 

3. Sometimes YASIG gallery doesn't work. Instead of well known and beautiful 'slimbox' effect there open up just one photo in new browser tab. Why is it so?

 

20110305_YASIG_BrakSlimboxa_zm

The cause of this behaviour is wrong operation of JQuery 'slimbox' library. Possibly it isn't installed at all, wasn't correctly downloaded by gallery plugin or there is conflict between YASIG extension and any other J! extension which makes use of 'slimbox' library. What one can do if this problem occures?

 

640_20110601_YASIG_JQuery_en_zm

a. Check if toggle of the parameter 'Load JQuery' helps (configuration of YASIG extension: administration panel menu: Extensions -> Plug-in Manager -> plg_yasig).

 

b. Check which of installed J! extensions uses concurrently JQuery library. Next one can check if other extensions which makes use of JavaScript libraries let user to switch off JQuery download. The other option is to switch off, even for a short moment another extensions and check if it solves the problem.

 

640_20110603_KolejnoscRozszerzenEnZm

c. The third option depends on change of an order of plugin loading. With use of administrative configuration panel it is possible to change order of loading a code of plugins. On the left side of the screen one cand see example print screen where was changed the order of 'slimbox' and 'YASIG' plugins.

After each attempt to impove display of JQuery based gallery one should check if it's successful. Basically speaking it's important to save configuration and reload a page where YASIG gallery plugin is used to see any improvements.

 

4. Sometimes beside main photo displayed with use of 'slimbox' effect there are additionally displayed pieces of background. Why is it so?

 

20110305_YASIG_ProblemWidacReklame_zm

 

The cause of this behaviour is wrong operation of JQueryJa 'slimbox' library. Possibly it isn't installed at all, wasn't correctly downloaded by gallery plugin or there is conflict between YASIG extension and any other J! extension which makes use of 'slimbox' library. What one can do if this problem occures?

 

640_20110601_YASIG_JQuery_en_zm

a. Check if toggle of the parameter 'Load JQuery' helps (configuration of YASIG extension: administration panel menu: Extensions -> Plug-in Manager -> plg_yasig).

 

b. Check which of installed J! extensions uses concurrently JQuery library. Next one can check if other extensions which makes use of JavaScript libraries let user to switch off JQuery download. The other option is to switch off, even for a short moment another extensions and check if it solves the problem.

 

640_20110603_KolejnoscRozszerzenEnZm

c. The third option depends on change of an order of plugin loading. With use of administrative configuration panel it is possible to change order of loading a code of plugins. On the left side of the screen one cand see example print screen where was changed the order of 'slimbox' and 'YASIG' plugins.

 

After each attempt to impove display of JQuery based gallery one should check if it's successful. Basically speaking it's important to save configuration and reload a page where YASIG gallery plugin is used to see any improvements.

Return to Table of Content

 


Support, bug reports

Dear Reader, if you've noticed any abnormity, bug or a problem related to yasiguncle extensions, please share with us. You could do it basically leaving a comment just below this article. We'll appreciate your time and effort, THE TEAM.

If you like, you can announce the problem using alternatively the project's page and use Tracker tool for this purpose.

 

In case of a problem please specify together with problem description the following list of helpful information, which make easier seeking of the proper solution:

  • version of J! environment,
  • version of PHP server,
  • name of a browser application,
  • version of a browser application.

The more precise description of a problem then better. In process of problem solving at first we try to reproduce it. The above set of information makes this task much easier and quicker.

There is also available support forum available in English. Feel free also to post there!

Return to Table of Content

 


Automatic processing of pictures, client oriented

Since ever I dreamed about a toll which would let me process all pictures intended for web page. Such application should automatciall resize photos to the specified sizes:

  1. 640x (...)
  2. 200x (...)

So I'd like to process each original photo in a way to get as the output two more photos: the first with bigger size equal to 640 pixels and the second with bigger size equal to 200 pixels.

Is one can easily guess the first output photo corresponds to 'normal size', and the second corresponds to 'miniature size'. Additionally I'd like to have some additional text string to be visible but somehow transparent in one of a picture corners.

To complete this task I've made use of great library ImageMagic (GNU licensed). With help of this library I was able to quickly prepare dedicated 'bash' script, which in future might be altered e.g. into .php script. For my personal purpose up to now it's enough.

Before usage script should be copied into the same catalogue where are photos which should be processed. Now all you have to do is to run a script, e.g.:

~$ sh napis_w_zdjeciu

When script finished it's work, in the same catalog where output pictures where created it's worth to run the following instruction:

:~$ ls -1 --sort=time --reverse 640*.* 200*.*

what means:

-1 <- set one file name per each line,
--sort=time <- sort upon time of creation,
--reverse <- reverse sorting order,
640* 200* <- process only files which names start from 640 and 200.

The above instruction will list one after another file names which names start from strings '640' or '200' in this sequence, so it will be easy to copy output from the screen directly into Joomla! article. All you have to do is just to mark text string and copy it, encompass this section with brackets {}, put inside "yasig" string and put access path to each file (probably it will be the same path for each file). The rest will be done automatically...

Ready to be downloaded mentioned script, GNU licensed.

Return to Table of Content

 


Team

The team which develops YASIG solution has 5-7 members. We have all in common one goal: to design and develope easy to use, fast and usefull to all photo gallery ready for Joomla! environment.

 

Contact to the team:

e-mail: Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.
GG: 3321025
skype: maciej_slojewski

 

If you'd like to help and:

  1. you're software developer, you can join dev group with use of the project web page,
  2. you're user, you can join test group with use of the project web page,
  3. you want to translate our applications, then please contact us with use of any above specified ways of contact,
  4. you're sponsor, please donate us.

 

Team members:

640 img 1544 Damian popr

Damian Damaszke

Nickname: woroo

Poject role: software developer.

 

Main code developer, author of 'yasig' plugin and .php script used for processing of pictures.

 

26 years old. Education background: master engineer in informatics. On everyday life works as software developer, speciality in web applications and user interfaces, mainly .NET. His main professional achievement is, among others, designing of graphical user interface for SID system (informatics system for train irregularities detection devices).

 

Pastime: adoration of beautiful women, puzzles in any form.

 

640 img 1547 Krowik popr

Maciej Szczepański

Nickname: kroovechkaja

Poject role: software developer.

 

Creator (or more truly 'converter' ) of the YASIG uncle code (editor-xtd button and component). Age group 83, education background master engineer in informatics. On everyday life works as software developer specialized in .NET and C++. His main professional achievements are projects related to railways:  diagnostics of rolling stock irregularities, exclusively commercial.

 

Pastime: ASG (Air Soft Gun), breeding of exotic reptiles.

 

640 Slawek mslonik

Sławomir Rapeła

Poject role: tester.

 

He joined YASIG project spontaneously and works as software anti-bug squad Puszcza oczko.

 

30 years old. Education background: master engineer in informatics of management. On everyday life manages his own business. His main professional achievements, among others, contribution in project eUrząd (Polish: eOffice), System Elektronicznego Monitorowania Pracy (Polish: System of Electronically Aided Work Survaillance), project manager for ITD (Polish: Inspectorate of Road Transport), System Wspierający Centralną Ewidencję Naruszeń (Polish: Supporting System For Central Records of Infringements).

 

Pastime: books, travels.

 

640 IMG 2411 KarasWokularach

Karol Lewoniewski

Nickname: karas

Poject role: software developer.

 

Age group 1985. Master of science degree, informatics and applied physics, speciality: applied informatics. On every day life he works for one of the biggest Tricity informatics oriented companies supporting banks. One of his main achievements till now is participation in project of software aided ship design for CTO in Gdańsk city.

 

Pastime: journeys.

 

640 img 1744 Maciej mslonik popr

Maciej Słojewski

Nickname: mslonik

Project role: project manager.

 

Originator of the YASIG project.


Age group 1976. More about my professional background here.


More about my private inspirations here.

 

640 IMG 7894 Sylwia

Sylwia Ławrów

Poject role: software developer.

 

She joined the project in February 2012. Student of Informatics at Fauctly of Electronics, Telecommunication and Informatics. After hours worsk as freelancer designer of web pages.

 

Pastime: cinema, bicycle riding.

 

640 img 1546 Karol popr

Karol Domagała

Nickname: kazuar

Poject role: software developer.

 

He has modified .js script useful for display of pictures when user clicks at any (part of YASIG plugin) and developed ajax code showing progress of pictures processed when pictures are shrinked.

 

Pastime: overhauling of old cars, participation in open source projects.

Return to Table of Content

 


Appeal

Please support our work! If in your opinion this extension is worth of your time, is nice, helpful, helped you to do some work, or just simply saying did its work, we ask you to assess it by publishing your comment at Joomla! extensions web page, here.

Return to Table of Content

embed video plugin powered by Union Development

Spis treści:

Wstęp

Rozszerzenia

Funkcjonalność

Instalacja

Sprawdzenie poprawności instalacji

Jak to działa

Deinstalacja

Konfiguracja dodatku YASIG

Składnia galerii YASIG

Konfiguracja dodatku yasiguncle

FAQ (Często zadawane pytania)

Wsparcie, pomoc

Automatyczne przerabianie zdjęć po stronie klienta

Zespół

Apel

 


Wstęp

Jak każdy inny rodzaj treści, także galeria zdjęć służy do wymiany informacji pomiędzy:

  • Autorem - twórcą strony internetowej, a
  • Użytkownikiem - osobom odwiedzającą stronę Autora.

Rolą Autora jest wybór zestawu zdjęć, które zamierza zaprezentować w Internecie Użytkownikom. Ten zestaw, albo inaczej zbiór zdjęć nazwany został galerią. Działania związane z przygotowaniem galerii zdjęć Autor prowadzi na tzw. zapleczu strony, czyli po zalogowaniu się do zaplecza. Przygotowanie zdjęć jest w znacznym stopniu zautomatyzowane, co pozwala na przyspieszenie publikacji.

Z puntku widzenia Użytkownika zdjęcia prezentowane są najczęściej w postaci pomniejszonych wersji zdjęć, czyli tzw. miniatur. Po kliknięciu na którąś z miniatur wyświetlane jest zdjęcie w pełnym rozmiarze. Za pomocą klawiatury lub myszy możliwe jest obejrzenie innych zdjęć tworzących galerię.

Podsumowując, YASIG to rozwiązanie, które przy pomocy kilku rozszerzeń pozwala na:

  • przygotowanie zdjęć, z których autor tworzy galerię,
  • prezentację zdjęć osobom odwiedzającym naszą witrynę.

Przetwarzanie zdjęć (np. zmiana rozmiaru, dodanie ramki wokół zdjęć itp.) następuje po stronie serwera, czyli po przesłaniu zdjęć na serwer. Takie rozwiązanie może być wygodne dla osób prowadzących np. portale społecznościowe. Wszystko, czego wymaga się od użytkowników, to przesłanie zdjęć do konkretnego katalogu umieszczonego na serwerze.

Zespół rozszerzeń YASIG został przygotowany z myślą o środowisku Joomla! w wersji 2.5.x. Do działania inteligentnie wykorzystuje bibliotekę Javacript JQuery.

Obsługiwane typy plików graficznych: .JPG oraz .PNG

Do wyświetlania efektów graficznych wykorzystywany jest efekt Lightbox, a w zasadzie jego 'odchudzony brat', czyli Slimbox.

Do przetwarzania zdjęć (zmniejszenie, dodanie obramowania itp.) wykorzystano bibliotekę GD.

Powrót do Spisu treści.

 


Rozszerzenia

Rozszerzenia, które składają się na YASIG zostały przedstawione w poniższej tabeli:

Lp. Typ rozszerzenia Nazwa rozszerzenia Kategoria rozszerzenia Funkcja
1. dodatek (ang. plugin) plg_yasig treść (ang. content) Galeria zdjęć.
2. komponent (ang. component) com_yasiguncle treść (ang. content) Silnik przetwarzający zdjęcia.
3. dodatek (ang. plugin) plg_yasiguncle rozszerzenie edytora (ang. editors-xtd) Rozszerzenie edytora.
4. paczka (ang. package) pkg_yasiguncle - Instalator / deinstalator pozostałych rozszerzeń.

 

Rozszerzenie plg_yasig może być wykorzystywane samodzielnie. Użytkownik może samodzielnie przetwarzać pliki graficzne (więcej na ten temat w rozdziale Automatyczne przerabianie zdjęć po stronie klienta) i samodzielnie przygotowywać wywołania galerii (więcej na ten temat w rozdziale (Składnia galerii YASIG).

Rozszerzenia com_yasiguncle i plg_yasiguncle zawsze powinny być instalowane wspólnie z rozszerzeniem plg_yasig. Instalacja tych rozszerzeń pojedynczo nie ma sensu, bo użytkownik nie uzyska w ten sposób żadnej dodatkowej funkcjonalności.

Rozszerzenie pkg_yasiguncle pozwala na łatwą i szybką instalację wszystkich potrzebnych rozszerzeń.

Powrót do Spisu treści.

 


Funkcjonalność

Funkcjonalność zależy od przyjętego punktu widzenia:

  • Autora lub
  • Użytkownika.

Z punktu widzenia Autora:

Funkcja Opis
Galeria jest tekstem w treści artykułu.

Wstawienie galerii ze zdjęciami polega na wstawieniu do treści wybranego artykułu pewnego ciągu znaków o ustalonym porządku ograniczonego znakami nawiasu klamrowego: {...}. Silnik obsługujący stronę www (Joomla!) zadba o interpretację tego ciągu w taki sposób, by Użytkownik ujrzał galerię zdjęć.

Ponieważ miejsce w artykule, w którym znajdzie się galeria składa się wyłącznie z tekstu, to praca nad edycją galerii jest prosta i szybka. Wszystkie działania polegają na edycji tekstu, a więc do obsługi tak przygotowanej galerii wystarczy jakikolwiek edytor. Podczas edycji galerii nie są ściągane zdjęcia składowe, tworzące galerię, a edycji podlega wyłącznie tekst. Znacznie przyspiesza to pracę nad edycją galerii.

Możliwość dołączenia do zdjęć komentarza. Użytkownik zobaczy komentarz po krótkiej chwili po najechaniu kursorem na miniaturę zdjęcia oraz bezpośrednio pod zdjęciem w rozmiarze normalnym. Komentarze nie muszą być umieszczone w osobnym pliku ani nie są umieszczane w nagłówku pliku. Dzięki temu ich zmiana sprowadza się do prostej edycji tekstu.
Indeksowanie przez Google tak zdjęć jak i komentarzy pod zdjęciami. Zarówno nazwy plików zdjęć, jak i teksty komentarzy pod zdjęciami są indeksowane przez wyszukiwarkę Google. Oznacza to, że po przygotowaniu galerii będzie możliwe wyszukanie tych łańcuchów tekstowych za pomocą wyszukiwarki Google.
Pełna kontrola nad wielkością i kolejnością zdjęć. Mamy pełną kontrolę nad wielkością i kolejnością zdjęć. Wielkość zdjęć można wybrać na etapie przygotowania galerii. Zmiana kolejności zdjęć polega na zmianie kolejności odpowiednich sekcji tekstu, do czego wystarczy edytor.
Duża szybkość działania

Wiele galerii zdjęć działa w ten sposób, że pobierają informacje o tym, gdzie położone są zdjęcia w oryginalnym rozmiarze i dopiero w chwili, gdy użytkownik zaczyna przeglądać przygotowaną przez nas galerię, zmieniają rozmiary zdjęć, przechowując zmniejszone kopie tymczasowo w pamięci serwera. Gdy użytkownik kończy przeglądać galerię te tymczasowe kopie są usuwane. Operacje zmniejszania rozmiaru zdjęć wymagają czasu i sporych zasobów tak pamięci jak i procesora serwera. Z punktu widzenia użytkownika czas potrzebny na zmniejszenie aktualnie oglądanych zdjęć dodaje się do czasu potrzebnego do ściągnięcia zdjęć z naszej strony. Wszystko fajnie, jeżeli naszą stronę odwiedza kilku użytkowników, a każdy z nich ogląda inną galerię. Jeżeli jednak mamy więcej odwiedzin, to może się zdarzyć, że po pierwsze, serer nie da rady szybko i sprawnie przerobić większej liczby zdjęć, a po drugie znacznie wydłuży się czas oczekiwania użytkownika na efekt tych działań.

YASIG wczytuje już przygotowane zdjęcia, czekające na serwerze. Odpada czas potrzebny na przerabianie zdjęć. Ponadto serwer jest w stanie obsłużyć wielu użytkowników jednocześnie. Można więc powiedzieć, że YASIG dobrze sprawdza się w przypadku dużych, popularnych galerii...

Oszczędność miejsce na serwerze

YASIG wyświetla przygotowane przez nas wcześniej zdjęcia. Pliki zdjęć po przygotowaniu galerii często zajmują o wiele mniej miejsca od plików, które zostały wybrane przez Użytkownika i przesłane na serwer. Przykładowo zdjęcie w rozmiarze 2816 x 2112 (punktów) zajmuje około 2,4 MB. To samo zdjęcie w rozmiarze 640 x 480 (punktów) zajmuje około 81,6 kB, a w rozmiarze 200 x 150 (punktów) zajmuje około 18,5 kB. W ten prosty sposób na jednym zdjęciu "oszczędzamy" około 2,3 MB.

 

Z punktu widzenia Użytkownika:

Funkcja Opis
Duża szybkość działania

Wiele galerii zdjęć działa w ten sposób, że pobierają informacje o tym, gdzie położone są zdjęcia w oryginalnym rozmiarze i dopiero w chwili, gdy użytkownik zaczyna przeglądać przygotowaną przez nas galerię, zmieniają rozmiary zdjęć, przechowując zmniejszone kopie tymczasowo w pamięci serwera. Gdy użytkownik kończy przeglądać galerię te tymczasowe kopie są usuwane. Operacje zmniejszania rozmiaru zdjęć wymagają czasu i sporych zasobów tak pamięci jak i procesora serwera. Z punktu widzenia użytkownika czas potrzebny na zmniejszenie aktualnie oglądanych zdjęć dodaje się do czasu potrzebnego do ściągnięcia zdjęć z naszej strony. Wszystko fajnie, jeżeli naszą stronę odwiedza kilku użytkowników, a każdy z nich ogląda inną galerię. Jeżeli jednak mamy więcej odwiedzin, to może się zdarzyć, że po pierwsze, serer nie da rady szybko i sprawnie przerobić większej liczby zdjęć, a po drugie znacznie wydłuży się czas oczekiwania użytkownika na efekt tych działań.

YASIG wczytuje już przygotowane zdjęcia, czekające na serwerze. Odpada czas potrzebny na przerabianie zdjęć. Ponadto serwer jest w stanie obsłużyć wielu użytkowników jednocześnie. Można więc powiedzieć, że YASIG dobrze sprawdza się w przypadku dużych, popularnych galerii...

Możliwość przewijania zdjęć za pomocą myszy

Przechodzenie pomiędzy zdjęciami składającymi się na galerię jest możliwa poprzez klikanie myszą. Wystarczy kursorem najechać na prawą lub lewą połowę aktualnie powiększonego zdjęcia. Wyświetlą się dodatkowe wskazówki ułatwiające przechodzenie pomiędzy zdjęciami tworzącymi galerię:

  • przejście do kolejnego zdjęcia w galerii nastąpi poprzez najechanie kursorem myszy na prawą część aktualnie powiększonego zdjęcia i kliknięcie lewym przyciskiem myszy,
  • przejście do poprzedniego zdjęcia w galerii nastąpi poprzez najechanie kursorem myszy na lewą część aktualnie powiększonego zdjęcia i kliknięcie lewym przyciskiem.
Możliwość przewijania za pomocą klawiatury (skrótów klawiszowych)

Przechodzenie pomiędzy zdjęciami składającymi się na galerię jest możliwe poprzez naciskanie klawiszy klawiatury:

  • przejście do kolejnego zdjęcia w galerii nastąpi po naciśnięciu klawisza 'prawy kursor' (->) lub klawisza podkreślonej litery widocznej w napisie obrazka, który pojawi się po najechaniu kursorem myszy na prawą połowę zdjęcia,
  • przejście do poprzedniego zdjęcia w galerii nastąpi po naciśnięciu klawisza 'lewy kursor' (<-) lub klawisza podkreślonej litery widocznej w napisie obrazka, który pojawi się po najechaniu kursorem myszy na lewą połowę zdjęcia,
  • opuszczenie galerii nastąpi po naciśnięciu klawisza 'Esc'.

Powrót do Spisu treści.

 


Instalacja

Instalacja jest możliwa na dwa następujące sposoby:

  1. Wykorzystanie paczki instalacyjnej. Jest to zalecana, domyślna metoda instalacji. Skrypty wykonywane w trakcie instalacji paczki zadbają o prawidłową instalację wszystkich rozszerzeń składających się na rozwiązanie YASIG.
  2. Ręczna instalacja poszczególnych rozszerzeń.

Typowo wszystkie czynności związane z instalacją rozszerzeń wykonuje administrator witryny.

 

Wykorzystanie paczki instalacyjnej

Poniżej przedstawiono domyślną procedurę instalacji.

  1. Pobierz paczkę instalacyjną:

Paczka instalacyjna ma postać pliku, który w nazwie zawiera człon "pkg" oraz ma rozszerzenie .zip, np. "pkg_yasiguncle_j.2.5.zip". Zapamiętaj położenie paczki na dysku.

 

  1. Zaloguj się na zapleczu witryny

W pasku adresu przeglądarki wpisz adres swojej witryny zakończony członem "administrator", przykładowo:
http://adres_naszej_witryny.rozszerzenie/administrator

Po chwili ekran powinie przybrać postać jak na sąsiednim obrazku.

LogowanieZaplecze

 

  1. Instalacja pliku paczki
Przejdź do menedżera rozszerzeń: menu -> Rozszerzenia -> Instalacje.

ZapleczeInstalacje

Z menu wybierz zakładkę Instalator.

PrzyciskPrzegladaj01

Naciśnij przycisk "Przeglądaj" i wskaż położenie pliku paczki (np. "pkg_yasiguncle_j.2.5.zip").

PrzyciskPrzegladaj02

Wciskamy przycisk Instaluj.

PrzyciskPrzegladaj03

Po chwili wyświetlony zostanie komunikat informujący o prawidłowym przebiegu procesu instalacji ("Pakiet zainstalowano poprawnie"). ZainstalowanoPaczke

Skrypty wykonywane podczas instalacji paczki automatycznie włączają zainstalowa dodatki.

Film pokazujący instalację oraz sprawdzenie poprawności instalacji:

 

Powrót do Spisu treści.

 


Sprawdzenie poprawności instalacji

W celu sprawdzenia, czy instalacja przebiegła prawidłowo, przejdź do Menedżera rozszerzeń: menu -> Rozszerzenia -> Instalacje.

ZapleczeInstalacje

Wybierz zakładkę "Zarządzanie". ZarzadzanieRozszerzeniami

W okienku "Filtr" wpisz ciąg "yasig" i wciśnij znajdujący się na prawo przycisk "Znajdź".

Po chwili powinieneś zobaczyć tabelę. Każdy z wierszy tej tabeli odpowiada jednemu z 4 właśnie zainstalowanych rozszerzeń:

  • com_yasiguncle
  • pkg_yasiguncle
  • plg_yasig
  • plg_yasiguncle

Są to rozszerzenia tworzące rozwiązanie yasig.

RozszerzeniaYasig

Powrót do Spisu treści.

 


Jak to działa

Przygotowanie galerii wymaga od Autora:

  1. wyboru zdjęć, z których chce stworzyć galerię,
  2. wgrania zdjęć na serwer Joomla! do wybranego przez Autora katalogu - katalogu wejściowego,
  3. ewentualnie stworzenie katalogu, w którym znajdą się zdjęcia po przetworzeniu, czyli katalogu wyjściowego,
  4. wybrania artykułu, w którym ma zostać umieszczona galeria.

Pozostałe czynności, czyli:

  1. przetworzenie zdjęć: przygotowanie ze zdjęć wybranych przez Autora zdjęć w rozmiarze normalnym oraz miniatur.
  2. przygotowanie treści wywołań galerii YASIG.
  3. wstawienie treści wywołań galerii YASIG do wybranego artykułu

zostaną wykonane automatycznie przez rozszerzenia yasiguncle (komponent oraz rozszerzenie edytora). Autor galerii będzie mógł jeszcze ręcznie uzupełnić opisy (komentarze) poszczególnych zdjęć. Domyślnie jako opis (komentarz) zdjęć wstawiana jest nazwa pliku graficznego.

 

Sytuacja początkowa wygląda więc mniej więcej tak:

  1. Autor poprawnie zainstalował rozwiązanie YASIG (wszystkie rozszerzenia),
  2. w wybranym katalogu na serwerze (np. images/stories/yasig_input) Autor galerii umieszcza np. 2 zdjęcia, jak w opisie w poniższej tabeli,
Nazwa pliku Orientacyjna wielkość pliku Rozmiar zdjęcia [px] x [px]
IMG_7952_KaluznicaCzarnozielona.JPG 1.6 MiB 1704 x 2272
IMG_7954_KaluznicaCzarnozielona.JPG 1.5 MiB 1704 x 2272

 

Autor wybrał artykuł, w którym zamierza umieścić galerię, otworzył ten artykuł, wybrał miejsce w treści, w którym ma znaleźć się galeria RedagowanieArtykulu
Pod okienkiem edytora znajduje się przycisk 'yasiguncle'. Wciśnięcie tego przycisku uruchomi kreatora, który zrealizuje wymienione powyżej czynności. RedagowanieArtykulu2
Wspomniany przycisk. PrzyciskYasig
Po naciśnięciu przycisku ekran zostanie przysłonięty widocznym obok okienkiem. Jest to tzw. kreator. Autor galerii powinien skonfigurować przynajmniej niektóre opcje. Przede wszystkim powiniem wskazać katalog wejściowy, czyli ten, w którym umieścił zdjęcia oraz katalog wyjściowy, czyli ten, w którym powinny znaleźć się zdjęcia powstałwe w wyniku ich przetwarzania. (Autor ma możliwość zmiany wartości opcji wyświetlanych po uruchomieniu kreatora, patrz rozdział Konfiguracja dodatku yasiguncle). Krok2 1

Autor ma możliwość zmiany opcji 'Katalog wejściowy' oraz 'Katalog wyjściowy' na dwa sposoby. Metodą zalecaną jest kliknięcie w drugi wiersz pod tekstem "Katalog wejściowy" oraz "Katalog wyjściowy", co spowoduje rozwinięcie okienka z listą katalogów znajdujących się na serwerze. W ten sposób, za pomocą myszy, można wybrać odpowiednie katalogi. Drugą metodą jest wpisanie ścieżki dostępu do odpowiednich katalogów w pierwszym wierszu pod tekstem "Katalog wejściowy" oraz "Katalog wyjściowy'.

Na sąsiednim ekranie Autor zmienił wybrane opcje. Poprzez kliknięcie odnośnika Pokaż panel konfiguracyjny można uzyskać dostęp do większej liczby ustawień.

Po upewnieniu się, że wszystkie opcje zostały ustawione zgodnie z wolą Autora powinien on kliknąć na przycisk 'Przejdź do kolejnego kroku'.

Krok2 2
Na ekranie pojawi się niewielkie kółeczko symbolizujące przetwarzanie kolejnych zdjęć. Po chwili na ekranie pojawi się składnia galerii YASIG oraz przycisk 'Wstaw wywołanie galerii YASIG do treści artykułu'. Należy wcisnąć ten przycisk. Krok3 1
Po wciśnięciu przycisku w treści artykułu znajdzie się poprawne wywołanie galerii YASIG. Krok3 2

W poniższej tabeli umieszczono efekty przetwarzania przykładowych plików graficznych.

Pliki stworzone przez yasiguncle Orientacyjna wielkość pliku Rozmiar zdjęcia [px] x [px]
200_IMG_7952_KaluznicaCzarnozielona.JPG 10,8 KiB 150 x 200
640_IMG_7952_KaluznicaCzarnozielona.JPG 95,1 KiB 480 x 640
200_IMG_7954_KaluznicaCzarnozielona.JPG 11,2 KiB 150 x 200
640_IMG_7954_KaluznicaCzarnozielona.JPG 87,9 KiB 480 x 640

Gotowe! Efekty działania galerii możesz obejrzeć w Demo.

Krótki film pokazujący, jak wygląda w praktyce przygotowanie galerii zdjęć:

Krótki film pokazujący, jak działa galeria z punktu widzenia Użytkownika:

 

Powrót do Spisu treści.

 


Deinstalacja

Przejdź do Menedżera rozszerzeń: menu -> Rozszerzenia -> Instalacje.

ZapleczeInstalacje

Wybierz zakładkę "Zarządzanie". ZarzadzanieRozszerzeniami

W okienku "Filtr" wpisz ciąg "yasig" i wciśnij znajdujący się na prawo przycisk "Znajdź".

Po chwili powinieneś zobaczyć tabelę. Każdy z wierszy tej tabeli odpowiada jednemu z 4 właśnie zainstalowanych rozszerzeń:

  • com_yasiguncle
  • pkg_yasiguncle
  • plg_yasig
  • plg_yasiguncle

Są to rozszerzenia tworzące rozwiązanie yasig.

RozszerzeniaYasig

Zaznacz kwadracik po prawej stronie od rozszerzenia "pkg_yasiguncle".

Zaznacz pkg yasiguncle

Wciśnij przycisk "Odinstaluj". Po chwili na ekranie powinny pojawić się komunikaty: "Pakiet odinstalowano" oraz "Brak zainstalowanych rozszerzeń pasujących do Twojego pytania". (Ten drugi komunikat jest rezultatem wciąż widniejącego na ekranie wpisu w polu "Filtr").

Odinstaluj pkg yasiguncle

Powrót do Spisu treści.

 


Konfiguracja dodatku YASIG

Rozszerzenie (dodatek) YASIG odpowiada za sposób wyświetlania zdjęć Użytkownikowi. Panel konfiguracyjny dodatku YASIG jest dostępny po zalogowaniu na zaplecze witryny.

Wybierz z menu: Rozszerzenia -> Dodatki. MenuRozszerzeniaDodatki
Po chwili zostanie wyświetlona lista wszystkich zainstalowanych dodatków. MenuRozszerzeniaDodatkiLista

W polu "Filtr" wpisz "yasig", a następnie wciśnij znajdujący się na prawo od pola "Filtr" przycisk "Znajdź". Po chwili na ekranie zostaną wyświetlone zainstalowane rozszerzenia pasujące do kryterium filtru.

Kliknij na dodatku "plg_yasig".

MenuRozszerzeniaDodatkiYasig

Zostanie wyświetlony ekran konfiguracyjny rozszerzenia. Składa się on z kilku obszarów:

  • Szczegóły
  • Opcje podstawowe

Dalej omówiony zostanie znajdujący się po prawej stronie obszar "Opcje podstawowe".

plg yasig ogolny

Szczegóły przedstawiają przede wszystkim składnię galerii. Ponieważ wykorzystanie składni galerii nie jest konieczne do korzystania z niej, nie zostanie tutaj dokładniej omówione. Szczegółowe wyjaśnienie składni galerii znalazło się poniżej w sekcji Składnia galerii YASIG.

YasigSzczegoly

Obszar "Opcje podstawowe".

plg yasig OpcjePodstawowe

Opis opcji staje się widoczny po najechaniu kursorem na etykietę opcji.

Nazwa opcji Opis opcji Wartość domyślna Komentarz
Zapętl zdjęcia Pozwala przechodzić pomiędzy ostatnim i pierwszym zdjęciem oraz na odwrót NIE

Wybór możliwości TAK spowoduje, że po przewinięciu zawartości galerii do ostatniego zdjęcia po naciśnięciu przycisku 'Nast.' wyświetli się ponownie pierwsze zdjęcie galerii.

Stopień przyciemnienia Jak bardzo przyciemnione ma być tło podczas wyświetlania obrazka (0 - w ogóle, 1 - całkowicie). 0.8

Po kliknięciu na dowolną miniaturę tło strony zostaje przysłonięte (przyciemnione), a na pierwszym planie zostaje wyświetlony obrazek w tzw. pełnym rozmiarze. Parametr 'stopień przyciemnienia' decyduje o przezroczystości przysłonięcia (przyciemnienia).

Kolor tła Kolor tła obrazka #000000 (czarny)

Kolor tła obrazka. Do wyboru są kolory dostępne z rozwijalnej listy: czarny, czerwony, różowy, żółty, zielony, jasnoniebieski, niebieski, biały.

Górny margines Górny margines 0

Dla widoku miniatur, możliwość wyboru (w punktach / pikselach) wielkości marginesu pomiędzy górną krawędzią miniatury, a treścią poprzedzającą.

Prawy margines Prawy margines 10

Dla widoku miniatur, możliwość wyboru (w punktach / pikselach) wielkości marginesu pomiędzy prawą krawędzią miniatury, a treścią poprzedzającą.

Dolny margines Dolny margines 10

Dla widoku miniatur, możliwość wyboru (w punktach / pikselach) wielkości marginesu pomiędzy dolną krawędzią miniatury, a treścią poprzedzającą.

Lewy margines Lewy margines 0

Dla widoku miniatur, możliwość wyboru (w punktach / pikselach) wielkości marginesu pomiędzy lewą krawędzią miniatury, a treścią poprzedzającą.

Napis 'Nast' Opis z prawej strony obrazka jako link do następnego zdjęcia 'Nast.'

Tekst wyświetlany w obszarze przycisku służącego do wyświetlenia kolejnego zdjęcia galerii.

Napis 'Poprz' Opis z lewej strony obrazka jako link do poprzedniego zdjęcia 'Poprz.'

Tekst wyświetlany w obszarze przycisku służącego do wyświetlenia poprzedniego zdjęcia galerii.

Napis 'Zamknij' Opis z prawej-dolnej strony obrazka jako link zamykający galerię 'Zamknij'

Tekst wyświetlany w obszarze przycisku powodującego zakończenie wyświetlania zdjęć w rozmiarze normalnym.

Napis 'Obrazek' Część napisu z lewej-dolnej strony obrazka. 'Obrazek'

Tekst wyświetlany w obszarze bezpośrednio pod zdjęciem w rozmiarze normalnym.

Napis 'Z' Druga część napisu z lewej-dolnej strony obrazka. 'Z'

Tekst wyświetlany w obszarze bezpośrednio pod zdjęciem w rozmiarze normalnym.

Załaduj JQuery Załaduj JQuery razem z dodatkiem TAK

Pozwala na wyłączenie biblioteki JQuery. Opcja jest przydatna w sytuacji, gdy witryna korzysta z innych rozszerzeń bazujących na JQuery. Pozwala na uniknięcie wielokrotnego ładowania do pamięci różnych bibliotek JQuery, co pozwala na zaoszczędzenie czasu wyświetlania strony oraz zmniejszenie błędów.

Instrukcja obsługi Informacja dodatkowa wyświetlana pod obrazkiem --

Pod każdym zdjęciem wyświetlanym w ramach galerii może znajdować się dodatkowy tekst. Może nim być np. instrukcja obsługi galerii.

Sens przynajmniej części opcji wymienionych w powyższej tabeli będzie bardziej jasny po obejrzeniu sąsiednich obrazków. Galeria służy do wyświetlania zdjęć:

  • jako miniatur - w ten sposób wyświetlane są zdjęcia bezpośrednio na stronie www,
  • jako zdjęć w rozmiarze normalnym - dostępnym po kliknięciu przez Użytkownika na jednej z miniatur.

 

Widok miniatur

Poniżej widoczna jest galeria składająca się z trzech identycznych obrazków w widoku miniatur. O odległościach pomiędzy poszczególnymi miniaturami decydują wartości opcji 'Górny margines', 'Prawy margines', 'Dolny margines' oraz 'Lewy margines'. Dzięki opcjom ustawiającym marginesy pojawiła się możliwość zmiany odległości między miniaturami. Miniatury wyglądają lepiej, szczególnie w przypadku większych galerii, po zmianie wielkości marginesów. YASIG nie pozwala na dowolne umieszczenie obrazków miniatur. Po prostu stara się wpasować obrazki w dostępną przestrzeń. Sporo zależy od szablonu (plików CSS), które zarządzają danym fragmentem strony. Może się zdarzyć, że w jednym wierszu zmieszczą się koło siebie 3 obrazki, a w kolejnym tylko 2. Warto zadbać o to, by w pojedynczej galerii były wyświetlane obrazki o orientacji poziomej, a w osobnej te o orientacji pionowej.

Jeżeli w sekcji dla któregoś obrazka został napisany komentarz, to po najechaniu kursorem na taką miniaturę po krótkiej chwili zostanie on wyświetlony 'w dymku'.

yasig_napis

 

Widok zdjęć w rozmiarze normalnym

Gdy użytkownik kliknie na jednej z miniatur, spowoduje to uruchomienie znanego i lubianego skryptu Lightbox: aktualnie przeglądana strona zostanie przysłonięta przez półprzezroczyste tło, a na pierwszym planie zostanie wyświetlone zdjęcie w rozmiarze normalnym.

Opcja 'Stopień przyciemnienia' decyduje o stopniu przyciemnienia tła, a opcja 'Kolor tła' o kolorze tła.

YasigWidokOgolny

Jeżeli Użytkownik przesunie kursor myszy nad zdjęcie, zostaną dodatkowo wyświetlone przyciski nawigacyjne. Przykładowo, jeżeli kursor myszy znajedzie się ponad prawą połową zdjęcia, zostanie wyświetlony przycisk 'Nast.' sugerujący, że po jego kliknięciu zostanie wyświetlone kolejne zdjęcie galerii.

Na sąsiednim obrazku zaznaczono sens opcji 'Napis 'Nast'' oraz pozycję przykładowego komentarza, o ile Autor zdecydował się opatrzeć dane zdjęcie komentarzem.

 

Na czerwono zaznaczono: na dole po lewej napis podający kolejność aktualnie wyświetlanego obrazku w galerii (opcja 'Napis 'Obrazek'' oraz opcja 'Napis 'Z''), na dole po prawej przycisk powodujący zamknięcie galerii (opcja 'Napis 'Zamknij''), u góry po lewej obrazek 'Poprz.' (opcja 'Napis 'Poprz'') sugerujący, że po kliknięciu przejdziemy do poprzedniego obrazka w galerii.

Opcja 'Instrukcja obsługi' pozwala na wyświetlenie dodatkowego napisu bezpośrednio pod zdjęciem. Może to być np. zdanie wyjaśniające Użytkownikowi jak przechodzić pomiędzy zdjęciami tworzącymi galerię.

YasigDodatkowyNapis

Powrót do Spisu treści.

 


Składnia galerii YASIG

Galeria YASIG to ciąg znaków umieszczonych pomiędzy nawiasem klamrowym otwierającym "{" a nawiasem klamrowym zamykającym "}". Po nawiasie klamrowym otwierającym musi znaleźć się słowo "yasig". Taki najprostszy ciąg znaków tworzący galerię wygląda zatem następująco:

{yasig }

Do wyświetlenia jednego zdjęcia potrzebne jest podanie do trzech argumentów (x1, x2, x3) oddzielonych od siebie znakiem pionowej kreski "|":

{yasig
x1|
x2|
x3||
}

 

Sens poszczególnych argumentów:
x1 - ścieżka dostępu do pliku zdjęcia w rozmiarze normalnym,
x2 - ścieżka dostępu do pliku zdjęcia w rozmiarze miniaturowym,
x3 - opis / komentarz wyświetlany pod każdym ze zdjęć.

Obowiązkowe jest wykorzystanie dwóch argumentów: x1 i x2. Jeżeli nie masz przygotowanej miniaturki (argument x2), jako drugi argument po prostu powtórz nazwę obrazka w pełnym rozmiarze (x1). Argument x3 można pominąć. Jeżeli w galerii znajduje się więcej zdjęć, ciągi argumentów x1, x2, x3 muszą zostać podane osobno dla każdego ze zdjęć. Zestaw argumentów x1, x2, x3 odpowiadający pojedynczemu zdjęciu nazwany został sekcją.

Przykładowa galeria wygląda więc następująco:

{yasig początek wywołania galerii yasig
SciezkaDostepuDoZdjeciaWrozmiarzeNormalnym/ZdjecieWrozmiarzeNormalnym_01 |
SciezkaDostepuDoMiniatury/ZdjecieMiniatura_01 |
Przykładowy komentarz do Zdjecie_01 ||

sekcja pierwszego zdjęcia
SciezkaDostepuDoZdjeciaWrozmiarzeNormalnym/ZdjecieWrozmiarzeNormalnym_02 |
SciezkaDostepuDoMiniatury/ZdjecieMiniatura_02 |
Przykładowy komentarz do Zdjecie_02 ||

sekcja drugiego zdjęcia

...
SciezkaDostepuDoZdjeciaWrozmiarzeNormalnym/ZdjecieWrozmiarzeNormalnym_n |
SciezkaDostepuDoMiniatury/ZdjecieMiniatura_n |
Przykładowy komentarz do Zdjecie_n ||

sekcja n-tego zdjęcia
} koniec wywołania galerii yasig

- Ścieżki dostępu do obrazków domyślnie zawierają ścieżkę dostępu do pliku z pominięciem początkowego ukośnika ("/") i nie powinny zawierać cudzysłowów (prawidłowo: images/fik.jpg -- nieprawidłowo: "/images/fik.jpg")

- Tekst z opisem / komentarzem do obrazka - x3 może zawierać dowolny znak oprócz znaku specjalnego |.

- Jeżeli nie chcesz jakiemuś obrazkowi nadawać opisu, lub jeżeli nie chcesz nadawać opisu wszystkim obrazkom, po prostu pomiń trzeci argument - x3, ale pamiętaj, że wtedy zamiast znaku | kończącego sekcję, musisz umieścić dwa znaki: || - ciągi opisujące kolejne obrazki galerii muszą być od siebie oddzielone sekwencją znaków "||".

Przykład:

{yasig
img/stories/NaszaNowaGaleria/zdjecie1_normalne.jpg |
img/stories/NaszaNowaGaleria/zdjecie1_miniatura.jpg ||


img/stories/NaszaNowaGaleria/zdjecie2_normalne.jpg |
img/stories/NaszaNowaGaleria/zdjecie2_miniatura.jpg ||


img/stories/NaszaNowaGaleria/zdjecie3_normalne.jpg |
img/stories/NaszaNowaGaleria/zdjecie3_miniatura.jpg ||


img/stories/NaszaNowaGaleria/zdjecie4_normalne.jpg |
img/stories/NaszaNowaGaleria/zdjecie4_miniatura.jpg ||


img/stories/NaszaNowaGaleria/zdjecie5_normalne.jpg |
img/stories/NaszaNowaGaleria/zdjecie5_miniatura.jpg ||
}

 

- By skorzystać z YASIG możesz po prostu skopiować powyższy przykład do swojego artykułu.

- W jednym artykule możesz mieć kilka galerii YASIG.

- Możesz też wykorzystać YASIG do wyświetlenia tylko jednego obrazka.

- Na stronie możesz wyświetlić wszystkie miniaturki, albo tylko pierwszą. Jeżeli chcesz pokazać tylko pierwszą, dodaj słowo "single" pisane małymi literami, bezpośrednio po "{yasig".

Przykład:

{yasig single
img/stories/NaszaNowaGaleria/zdjecie1_normalne.jpg |
img/stories/NaszaNowaGaleria/zdjecie1_miniatura.jpg ||
Przykładowy komentarz do Zdjecie_01 ||

img/stories/NaszaNowaGaleria/zdjecie2_normalne.jpg |
img/stories/NaszaNowaGaleria/zdjecie2_miniatura.jpg ||
Przykładowy komentarz do Zdjecie_02 ||

img/stories/NaszaNowaGaleria/zdjecie3_normalne.jpg |
img/stories/NaszaNowaGaleria/zdjecie3_miniatura.jpg ||
Przykładowy komentarz do Zdjecie_03 ||

img/stories/NaszaNowaGaleria/zdjecie4_normalne.jpg |
img/stories/NaszaNowaGaleria/zdjecie4_miniatura.jpg ||

img/stories/NaszaNowaGaleria/zdjecie5_normalne.jpg |
img/stories/NaszaNowaGaleria/zdjecie5_miniatura.jpg ||
}

Powrót do Spisu treści.

 


Konfiguracja dodatku yasiguncle

Rozszerzenie (dodatek) yasiuncle stanowi rozszerzenie edytorów Joomla!. Dobrze współdziała z edytorami TinyMCE oraz JCE. Panel konfiguracyjny dodatku YASIG jest dostępny po zalogowaniu na zaplecze witryny.

Wybierz z menu: Rozszerzenia -> Dodatki. MenuRozszerzeniaDodatki
Po chwili zostanie wyświetlona lista wszystkich zainstalowanych dodatków. MenuRozszerzeniaDodatkiLista

W polu "Filtr" wpisz "yasig", a następnie wciśnij znajdujący się na prawo od pola "Filtr" przycisk "Znajdź". Po chwili na ekranie zostaną wyświetlone zainstalowane rozszerzenia pasujące do kryterium filtru.

Kliknij na dodatku "plg_yasiguncle".

MenuRozszerzeniaDodatkiYasig

Zostanie wyświetlony ekran konfiguracyjny rozszerzenia. Składa się on z kilku obszarów:

  • Szczegóły
  • Opcje podstawowe
Yasiguncle EkranOgolny

Szczegóły zawierają przede wszystkim informacje ogólne.

Yasiguncle Szczegoly

Obszar "Opcje podstawowe". Szczegóły dotyczące poszczególnych parametrów zostały przedstawione w poniższej tabeli.

Yasiguncle OpcjePodstawowe

Opis opcji staje się widoczny po najechaniu kursorem na etykietę opcji.

Przedstawione w poniższej tabeli opcje pozwalają na zapisanie wartości kreatora yasiguncle, co teoretycznie może skrócić czas przygotowania kolejnych galerii. Niezależnie od przyjętych ustawień po każdorazowym wywołaniu kreatora yasiguncle możliwa jest ręczna zmiana każdej z tych opcji.

Nazwa opcji Opis opcji Wartość domyślna Komentarz
na Twoim serwerze Joomla! W nim powinny już znajdować się zdjęcia, które zostaną przetworzone tmp/inputImages Jedna ścieża dostępu - jedno zadziałanie yasiguncle.
Ścieżka dostępu do katalogu wyjściowego Ścieżka dostępu do katalogu wyjściowego na Twoim serwerze Joomla! W nim znajdą się zdjęcia po przetworzeniu tmp/outputImages Katalog wyjściowy może być taki sam, jak katalog wejściowy, chociaż takie rozwiązanie nie jest polecane.
Ścieżka główna Stąd będziesz mógł wybierać podkatalogi ze zdjęciami; pusta = katalog główny Jeżeli użytkownik często korzysta z rozszerzenia yasiguncle, to warto podać katalog nadrzędny. Przyspieszy to wybieranie katalogu wyjściowego.
Szerokość miniaturek Szerokość miniaturek wyrażona w pikselach [px] 200 Wielkość miniaturki powinna być wyraźnie mniejsza od rozmiaru obrazka w trybie normalnym.
Wysokość miniaturek Wysokość miniaturek wyrażona w pikselach [px] 150 Wielkość miniaturki powinna być wyraźnie mniejsza od rozmiaru obrazka w trybie normalnym.
Szerokość pomniejszonych zdjęć Szerokość pomniejszonych zdjęć wyrażona w pikselach [px] 640 Szerokość zdjęcia normalnego, czyli takiego, jakie zostanie wyświetlone Użytkownikowi.
Wysokość pomniejszonych zdjęć Wysokość pomniejszonych zdjęć wyrażona w pikselach [px] 480 Wysokość zdjęcia normalnego, czyli takiego, jakie zostanie wyświetlone Użytkownikowi.
Wielkość ramki zdjęć pomniejszonych Wielkość ramki zdjęć pomniejszonych wyrażona w pikselach [px] 0 Ramka będzie elementem obrazka.
Wielkość ramki miniaturek Wielkość ramki miniaturek wyrażona w pikselach [px] 2 Ramka będzie elementem obrazka.
Tekst umieszczany na zdjęciach Tekst, który zostanie nałożony na zdjęcie. Będzie widoczny w lewym dolnym rogu zdjęcia. created by YasigUncle!
Uzywaj single mode Używaj single mode (tylko jedno zdjęcie widoczne w galerii) nie W trybie pojedynczym (single mode) wyświetlana jest miniatura tylko dla pierwszego obrazka galerii. Patrz np. Demo lub Składnia galerii YASIG.
 Przytnij miniaturę Przytnij miniaturę tak, by jej rozmiar pasował do pozostałych miniatur tak Opcja jest przydatna w przypadku dużego zbioru obrazków, które różnią się np. orientacją. Dzięki temu ustawieniu możliwe jest precyzyjne przewidzenie rozmiaru galerii na stronie. Wadą takiego rozwiązania jest przycięcie obrazków galerii przez co w pewnych okolicznościach mogą się one stać nieczytelne.
Nie usuwaj plików Nie usuwaj plików z katalogu wejściowego po zakończeniu przetwarzania zdjęć nie Opcja może być przydatna np. w przypadku eksperymentów.
Rozdziel wywołania galerii Dzieli wywołania galerii na samodzielne galerie nie Załóżmy, że galeria składa się z 5 zdjęć. Po wybraniu tej opcji w treść artykułu wstawionych zostanie 5 pojedynczych galerii YASIG, po jednej dla każdego ze zdjęć z katalogu wejściowego.
W tabeli Dzieli wywołania galerii i umieszcza je w tabeli. Uwaga! Działa tylko, gdy jest włączona opcja 'Rozdziel wywołania galerii'. nie

Załóżmy, że galeria składa się z 5 zdjęć. Po wybraniu tej opcji w treść artykułu wstawionych zostanie 5 pojedynczych galerii YASIG, po jednej dla każdego ze zdjęć z katalogu wejściowego. Każde ze zdjęć zostanie umieszczone w tabeli o 1 wierszu i 2 kolumnach, w lewej kolumnie. Szerokość lewej kolumny zostanie dopasowana do wielkości miniatury.

Opcja jest przydatna w przypadku tworzenia poradników, gdzie obok zdjęcia umieszczany jest jego opis.

Powrót do Spisu treści.

 


FAQ (ang. Frequently Asked Questions) = Często Zadawane Pytania

  1. Jakie są minimalne wymagania dotyczące poprawnej pracy galerii?
  2. Czy można włączyć otaczanie tekstem miniatur?
  3. Czasami wywołania galerii YASIG nie działają - zamiast wyświetlenia efektu 'Slimbox' pojawia się zdjęcie, jak niżej. Dlaczego?
  4. Czasami oprócz zdjęcia wyświetlanego za pomocą efektu 'Slimbox' pojawiają się dodatkowe fragmenty tła. Dlaczego? 

1. Jakie są minimalne wymagania dotyczące poprawnej pracy galerii?

Wymagania dla galerii YASIG w ogólności są takie same jak dla środowiska J!, czyli: PHP 5.2+ oraz MySQL 5.0.4+

 

2. Czy można włączyć otaczanie tekstem miniatur?

Nie. Efekty, takie jak otaczanie tekstem zdjęć w treści artykułu są uzależnione od możliwości edytora. Wywołanie galerii YASIG polega na wstawieniu określonej składni:

{yasig
...
}

w okienku edytora. Edytor nie traktuje powyższej składni jako zdjęcia, lecz jako tekst.

 

Istnieje jednak dosyć proste i eleganckie obejście tego problemu. Wystarczy:

  1. Wstawić do tekstu edytora tabelę o 1 kolumnie i 2 wierszach o szerokości 100 %.
  2. W lewej kolumnie tabeli wstawić wywołanie YASIG.
  3. Ustawić szerokość lewej kolumny równą szerokości obrazka miniatury.
  4. W prawej kolumnie tabeli wkleić tekst.

Przykład poniżej. Dla jasności włączono kolorowanie ramki tabeli. Otaczający tekst wpisano kursywą.

 

Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst.

{yasig
...
}

Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst.

Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst.

 

Co będzie wyglądało następująco:

 

Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst.

200_img_8077_RusalkaOsetnik_VanessaCardui

Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst.

Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst. Otaczający tekst.

 

3. Czasami wywołania galerii YASIG nie działają - zamiast wyświetlenia efektu 'Slimbox' pojawia się zdjęcie, jak niżej. Dlaczego?

Czasami zamiast poprawnego wywołania galerii ekran przybiera następującą postać:

20110305_YASIG_BrakSlimboxa_zm

Powodem jest nieprawidłowe działania biblioteki JQuery 'Slimbox'. Prawdopodobnie nie została ona zainstalowana, nie została prawidłowo ściągnięta przez galerię lub wystąpił konflikt pomiędzy rozszerzeniem YASIG a jakimś innym rozszerzeniem wykorzystującym bibliotekę 'Slimbox'. Co można zrobić w tej sytuacji:

640_20110601_YASIG_JQuery_pl_zm

a. Sprawdzić, czy przestawienie parametru 'Załaduj JQuery' w konfiguracji rozszerzenia YASIG na przeciwne przywróci prawidłowe działanie galerii (Zaplecze, menu: Rozszerzenie -> Dodatki -> YASIG).

b. Sprawdzić, które z zainstalowanych rozszerzeń Joomla! również korzysta z bibliotek JQuery. Następnie można sprawdzić, czy tamte rozszerzenia pozwalają na wyłączenie pobierania biblioteki JQuery albo na chwilę wyłączyć to rozszerzenie i sprawdzić, czy to rozwiązało problem.

 

640_20110602_KolejnoscRozszerzenPlZm

c. Trzeci sposób polega na sprawdzeniu, czy nie pomoże zmiana kolejności ładowania rozszerzeń. W panelu konfiguracyjnym J! można zmienić kolejność ładowania rozszerzeń. Na przykładowym zrzucie ekranów wymuszono zmianę kolejności ładowania rozszerzeń 'slimbox' oraz YASIG.

Po każdej z opisanych powyżej czynności należy sprawdzić, czy wykonana zmiana przyniosła spodziewany rezultat, czyli zapisać zmiany w konfiguracji oraz przeładować zawartość strony, która poprzednio wyświetlała się nieprawidłowo.

 

4. Czasami oprócz zdjęcia wyświetlanego za pomocą efektu 'Slimbox' pojawiają się dodatkowe fragmenty tła (przykład poniżej). Dlaczego?

Czasami ekran przybiera postać, jak poniżej:

20110305_YASIG_ProblemWidacReklame_zm

Powodem jest nieprawidłowe działania biblioteki JQuery 'Slimbox'. Prawdopodobnie nie została ona zainstalowana, nie została prawidłowo ściągnięta przez galerię lub wystąpił konflikt pomiędzy rozszerzeniem YASIG a jakimś innym rozszerzeniem wykorzystującym bibliotekę 'Slimbox'. Co można zrobić w tej sytuacji:

640_20110601_YASIG_JQuery_pl_zm

a. Sprawdzić, czy przestawienie parametru 'Załaduj JQuery' w konfiguracji rozszerzenia YASIG na przeciwne przywróci prawidłowe działanie galerii (Zaplecze, menu: Rozszerzenie -> Dodatki -> YASIG).

 

b. Sprawdzić, które z zainstalowanych rozszerzeń Joomla! również korzysta z bibliotek JQuery. Następnie można sprawdzić, czy tamte rozszerzenia pozwalają na wyłączenie pobierania biblioteki JQuery albo na chwilę wyłączyć to rozszerzenie i sprawdzić, czy to rozwiązało problem.

 

640_20110602_KolejnoscRozszerzenPlZm

c. Trzeci sposób polega na sprawdzeniu, czy nie pomoże zmiana kolejności ładowania rozszerzeń. W panelu konfiguracyjnym J! można zmienić kolejność ładowania rozszerzeń. Na przykładowym zrzucie ekranów wymuszono zmianę kolejności ładowania rozszerzeń 'slimbox' oraz YASIG.

Po każdej z opisanych powyżej czynności należy sprawdzić, czy wykonana zmiana przyniosła spodziewany rezultat, czyli zapisać zmiany w konfiguracji oraz przeładować zawartość strony, która poprzednio wyświetlała się nieprawidłowo.

Powrót do Spisu treści.

 


Wsparcie, pomoc

Czytelniku, jeżeli dostrzegłeś jakąś nieprawidłowość w działaniu dodatku YASIG, to podziel się tą informacją. Możesz to zrobić zostawiając komentarz pod tym artykułem. Dziękujemy za Twój czas, ZESPÓŁ.

Jeżeli chcesz, możesz też zgłosić problem bezpośrednio na stronie projektu, korzystając z narzędzia Tracker.

 

Prosimy, byś wraz z opisem problemu przekazał nam następujące przydatne informacje:

  • wersja środowiska J!,
  • wersja serwera PHP,
  • nazwa przeglądarki internetowej,
  • wersja przeglądarki internetowej.

Im precyzyjniejszy opis problemu tym lepiej. Poces rozwiązania problemu polega przede wszystkim na próbie jego powtórzenia. Podane powyżej informacje powinny zasadniczo to zadanie ułatwić.

Do dyspozycji użytkowników jest także forum w języku polskim: http://forum.joomla.pl. Prosimy o komentarze!

Powrót do Spisu treści.

 


Automatyczne przerabianie zdjęć po stronie klienta

Opisane w tej sekcji narzędzie spełnia zadania analogiczne do narzędzia yasiguncle, które wchodzi w skład rozwiązania YASIG. Narzędzie yasiguncle przetwarza zdjęcia na serwerze, na którym zainstalowana jest strona www, na której Autor przygotowuje galerię zdjęć. Opisane poniżej narzędzie pozwala na wykonanie tych samych operacji na zdjęciach (zmniejszenie, umieszczenie napisu w zdjęciu), ale działa lokalnie, czyli na komputerze Użytkownika, a nie na serwerze. Opisany dalej skrypt został przygotowany dla systemów operacyjnych GNU/Linux.

Od dawna marzyło mi się automatyczne przygotowanie obrazków (zdjęć) przeznaczonych na stronę internetową. Taka aplikacja powinna automatycznie zmniejszyć obrazki (zdjęcia) do dwóch wymiarów:

  1. 640x (...)
  2. 200x (...)

Czyli chciałbym, by zdjęcia w pełnym rozmiarze miały zawsze większy wymiar maksymalnie 640 pikseli, a miniatury miały mniejszy wymiar równy 200 pikselom.

Jak łatwo się domyślić pierwszy obrazek reprezentuje obrazek w 'pełnym' rozmiarze , a drugi to miniatura pierwszego. Dodatkowo chciałem, by w obrazek w 'pełnym' wymiarze wtapiany był w lewym dolnym rogu tekst z adresem mojej strony.

Do realizacji tego zadania posłużyła mi wspaniała biblioteka ImageMagic (na licencji GNU). Z jej pomocą szybko skonstruowałem odpowiedni skrypt 'bash', który w przyszłości może posłużyć do budowy skryptu .php. Do moich celów póki co wystarczy.

 

Skrypt kopiujemy do tego samego katalogu, co pliki zdjęć, które zamierzamy poddać wyżej opisanym zmianom. Teraz wystarczy wykonać ściągnięty skrypt, np. tak:

 :~$ sh napis_w_zdjeciu

 

Po zakończeniu działania skryptu, w katalogu, w którym zostały stworzone obrazki, warto wydać polecenie:

:~$ ls -1 --sort=time --reverse 640*.* 200*.*

czyli:

-1 <- poustawiaj po jednej nazwie pliku w wierszu,
--sort=time <- posortuj wg czasu powstania,
--reverse <- odwroc sortowanie,
640* 200* <- zastosuj tylko względem plików, których nazwy zaczynają się od 640 i 200.

Polecenie wylistuje jeden pod drugim wszystkie pliki, których nazwy zaczynają się od ciągów '640' oraz '200' akurat w takiej kolejności, by łatwo dało się z nich złożyć wywołanie slimbox. Wystarczy teraz zaznaczyć listę wynikową i przekopiować do artykułu w środowisku Joomla!, całość objąć nawiasami klamrowymi, dopisać ścieżki dostępu i skorzystać z dobrodziejstwa rozszerzenia slimbox. Reszta stanie się sama...

Do pobrania skrypt na licencji GNU.

Powrót do Spisu treści.

 


Zespół

Zespół, który stworzył zespół rozszerzeń YASIG, to 5-7 osób. Połączył nas wspólny cel - przygotowanie funkcjonalnej, prostej w obsłudze, szybkiej galerii zdjęć dla Joomla!.

 

Kontakt do zespołu

e-mail: Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.
GG: 3321025
skype: maciej_slojewski

 

Jeżeli chcesz pomóc a:

  1. jesteś programistą, to możesz dołączyć do grupy programistów;
  2. jesteś użytkownikiem, to możesz dołączyć do grupy testerów;
  3. chciałbyś przetłumaczyć nasze rozszerzenia, skontaktuj się w jeden z opisanych powyżej sposobów;
  4. sponsorem, to możesz wpłaćić pieniądze na podane konto.

 

Uczestnicy

640 img 1544 Damian popr

Damian Damaszke

Ksywa: woroo

 

Twórca większości kodu dodatku 'yasig' oraz skryptu przetwarzającego obrazki, będącego składową komponentu 'yasig'.

 

Rocznik 1984. Z wykształcenia inżynier informatyk. Na co dzień programista aplikacji webowych i interfejsów użytkownika oraz .NET. Na koncie ma m.in. przygotowanie interfejsu użytkownika dla systemu informatycznego dsat, czyli SID.

 

Hobby: adoracja pięknych kobiet, puzzle w każdej postaci.

 

640 img 1547 Krowik popr

Maciej Szczepański

Ksywa: kroovechkaja

 

Twórca (a raczej 'przetwórca' ;) ) części kodu związanego z yasigUncle (guziora editors-xtd i komponentu).

 

Rocznik 1983. Z wykształcenia inżynier informatyk. Na co dzień projektant baz danych oraz programista .NET i C++. Na koncie głównie projekty związane z diagnostyką szlakową taboru kolejowego, wyłącznie komercyjne.

 

Hobby: ASG (ang. air soft gun), hodowla gadów egzotycznych.

 

640 Slawek mslonik

Sławomir Rapeła

 

Do projektu dołączył spontanicznie jako tester oprogramowania.

 

Lat 30. Z wykształcenia mgr inż. informatyki w zarządzaniu. Na co dzień analityk biznesowy prowadzący własną działalność. Na koncie ma m.in. udział w projektach eUrząd, System Elektronicznego Monitorowania Pracy, a także jako kierownik projektu tworzył System Wspierający Centralną Ewidencję Naruszeń dla ITD.

Hobby: książki, podróże

 

640 IMG 2411 KarasWokularach

Karol Lewoniewski

Ksywa: karas

 

Rocznik 1985. Z wykształcenia mgr inż. informatyk, fizyka stosowana, specjalność informatyka stosowana. Na co dzień programista w jednej z większych trójmieskich firm wspierających banki. Na koncie ma m.in. udział w projekcie systemu wspomagania wstępnego projektowania statków dla CTO w Gdańsku.

 

Hobby: podróże

 

640 img 1744 Maciej mslonik popr

Maciej Słojewski

Ksywa: mslonik

 

Inicjator projektu YASIG.

 

Rocznik 1976. Więcej na temat mojej ścieżki zawodowej tutaj.

 

Prywatnie więcej o mnie tutaj.

 

640 IMG 7894 Sylwia

Sylwia Ławrów

Jest z nami od lutego 2012. Studentka na wydziale ETI, kierunek Informatyka, Politechnika Gdańska. Po godzinach wolna programistka stron www :-]

Hobby: Dobre kino, podróże na rowerze.

 

640 img 1546 Karol popr

Karol Domagała

Ksywa: kazuar

Zmodyfikował skrypt .js wyświetlający obrazki (składowa dodatku 'yasig') oraz przygotował kod ajax informujący użytkownika o zmniejszeniu kolejnych obrazków.

Hobby: remonty starych samochodów, projekty open source

Powrót do Spisu treści.

 


Apel

Wesprzyj naszą pracę! Jeżeli uznałeś, że to rozszerzenie Ci się podoba, pomogło Ci w realizacji jakiegoś zadania, zwyczajnie jest przydatne, prosimy zamieść chociaż krótką recenzję w katalogu rozszerzeń Joomla!, czyli tutaj.

Do dyspozycji użytkowników jest także forum w języku polskim. Prosimy o komentarze!

Powrót do Spisu treści.

 

embed video plugin powered by Union Development

Poniższa strona ma za zadanie zademonstrować chociaż niektóre możliwości galerii YASIG.

 

Galeria YASIG przedstawia zdjęcia składowe galerii za pomocą następujących widoków:

  1. miniatur (domyślnego),
  2. normalnego.

Poniżej, bezpośrednio w treści artykułu, widoczne są miniatury zdjęć, jedno obok drugiego. Jest to tzw. widok miniatur. Po kliknięciu myszą na którejś z miniatur galeria przełącza się w widok normalny. W trybie normalnym na ekranie jednorazowo widocznej jest jedno zdjęcie, powiększone w stosunku do miniatury. Dodatkowo po najechaniu na obszar zdjęcia pojawiają się elementy sterujące, a pod zdjęciem wyświetla się opis.

Przechodzenie pomiędzy kolejnymi zdjęciami galerii jest możliwe dzięki klikaniu w odpowiednie obszary ekranu, albo poprzez naciskanie klawiszy kursorów ('prawo', 'lewo'). Po wybraniu przycisku 'Zamknij' (lub wciśnięciu klawisza 'Esc') galeria ponownie przechodzi do widoku miniatur, który jest widokiem domyślnym.

 

Są dwa tryby wywołania galerii:

  1. zwykły,
  2. pojedynczy (ang. single).

 

W trybie zwykłym wyświetlane są wszystkie miniatury dla wszystkich zdjęć, z których składa się galeria, czyli po jednej miniaturze dla każdego zdjęcia. W trybie pojedynczym dla całej galerii wyświetlane jest tylko jedna miniatura, miniatura pierwszego zdjęcia galerii. Tryb pojedynczy przydaje się, jeżeli komuś zależy na prezentacji galerii na niewielkiej powierzchni strony.

 

Galeria, tryb zwykły:

images/stories/20090705_ParadaZaglowcow/800_img_6265_LordNelson.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6303_KapitanPoinc.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6306_Sorlandet.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6328_Eendracht.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6334_AnneMargaritha.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6347_AnneMargaritha.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6348_Szwed.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6350_Humboldt.jpg

 

Poniżej wywołanie powyższej galerii w trybie zwykłym, czyli tekst, który wystarczy wkleić w tekście artykułu, by wyświetlona została galeria:

{yasig
images/stories/20090705_ParadaZaglowcow/800_img_6265_LordNelson.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6265_LordNelson.jpg|
Przykładowy komentarz z przecinkiem :-),||

images/stories/20090705_ParadaZaglowcow/800_img_6303_KapitanPoinc.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6303_KapitanPoinc.jpg|
Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6306_Sorlandet.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6306_Sorlandet.jpg|
I jeszcze jeden komentarz||

images/stories/20090705_ParadaZaglowcow/800_img_6328_Eendracht.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6328_Eendracht.jpg|
fik||

images/stories/20090705_ParadaZaglowcow/800_img_6334_AnneMargaritha.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6334_AnneMargaritha.jpg|
Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6347_AnneMargaritha.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6347_AnneMargaritha.jpg|
Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6348_Szwed.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6348_Szwed.jpg|
Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6350_Humboldt.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6350_Humboldt.jpg|
Kolejny komentarz...||
}

 

Ta sama galeria, tryb pojedynczy:

images/stories/20090705_ParadaZaglowcow/800_img_6265_LordNelson.jpg


 

Wywołanie powyższej galerii w trybie pojedynczym, czyli tekst, który wystarczy wkleić w tekście artykułu, by wyświetlona została galeria:

{yasig single
images/stories/20090705_ParadaZaglowcow/800_img_6265_LordNelson.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6265_LordNelson.jpg|
Przykładowy komentarz z przecinkiem :-),||

images/stories/20090705_ParadaZaglowcow/800_img_6303_KapitanPoinc.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6303_KapitanPoinc.jpg|
Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6306_Sorlandet.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6306_Sorlandet.jpg|
I jeszcze jeden komentarz||

images/stories/20090705_ParadaZaglowcow/800_img_6328_Eendracht.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6328_Eendracht.jpg|
fik||

images/stories/20090705_ParadaZaglowcow/800_img_6334_AnneMargaritha.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6334_AnneMargaritha.jpg|
Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6347_AnneMargaritha.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6347_AnneMargaritha.jpg|
Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6348_Szwed.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6348_Szwed.jpg|
Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6350_Humboldt.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6350_Humboldt.jpg|
Kolejny komentarz...||
}

 


Wesprzyj naszą pracę! Jeżeli uznałeś, że to rozszerzenie Ci się podoba, pomogło Ci w realizacji jakiegoś zadania, zwyczajnie jest przydatne, prosimy zamieść chociaż krótką recenzję w katalogu rozszerzeń Joomla!, czyli tutaj.

This demo page was prepared for you to show you at least some features of YASIG gallery.

 

YASIG gallery displays a set of user pictures in the following modes:

  1. miniature (default),
  2. normal.

 

What could be seen below, is gallery in miniature mode. Small pictures are displayed in article body, one beside another. When one will click with its mouse at any of the miniatures, the gallery switches to normal mode. In normal mode screen is covered with just one picture, enlarged in comparison to size of miniature. Additionally when a cursor is moved over picture there are displayed control buttons and below a picture there is displayed short comment.

 

Going along a gallery pictures is possible after clicking over a picture body or by use of keyboard keys ('left', 'right', 'Esc'). Gallery switches again to miniature mode, which is default one, if 'Close' button is activated.

 

There are two modes of YASIG gallery code call:

  1. ordinary,
  2. single.

 

In ordinary mode there are displayed all miniatures for every photo from within gallery collection. In single mode for all photos from within gallery collection there is displayed just one single miniature ('thumb'), which is miniature of the first photo in gallery. Single mode is particularly useful in case when web page space is of special concern.

 

Gallery, ordinary mode:

images/stories/20090705_ParadaZaglowcow/800_img_6265_LordNelson.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6303_KapitanPoinc.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6306_Sorlandet.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6328_Eendracht.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6334_AnneMargaritha.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6347_AnneMargaritha.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6348_Szwed.jpgimages/stories/20090705_ParadaZaglowcow/800_img_6350_Humboldt.jpg

 

Application of above gallery in ordinary mode, is as easy as placing the following text into your article body, paying attention to some syntax requirements:

 

{yasig

images/stories/20090705_ParadaZaglowcow/800_img_6265_LordNelson.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6265_LordNelson.jpg|
Example of picture comment with some punctuation characters :-),||

images/stories/20090705_ParadaZaglowcow/800_img_6303_KapitanPoinc.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6303_KapitanPoinc.jpg|
Next comment...||

images/stories/20090705_ParadaZaglowcow/800_img_6306_Sorlandet.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6306_Sorlandet.jpg|
And another one!||

images/stories/20090705_ParadaZaglowcow/800_img_6328_Eendracht.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6328_Eendracht.jpg|
fik||

images/stories/20090705_ParadaZaglowcow/800_img_6334_AnneMargaritha.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6334_AnneMargaritha.jpg|
Just a comment...||

images/stories/20090705_ParadaZaglowcow/800_img_6347_AnneMargaritha.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6347_AnneMargaritha.jpg|
Just a comment...||

images/stories/20090705_ParadaZaglowcow/800_img_6348_Szwed.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6348_Szwed.jpg|
Just a comment...||

images/stories/20090705_ParadaZaglowcow/800_img_6350_Humboldt.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6350_Humboldt.jpg|
Just a comment...||
}

 

The same gallery but this time single mode:

images/stories/20090705_ParadaZaglowcow/800_img_6265_LordNelson.jpg


 

Application of above gallery in single mode is as easy as placing the following text into your article body, paying attention to some syntax requirements:

 

{yasig single

images/stories/20090705_ParadaZaglowcow/800_img_6265_LordNelson.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6265_LordNelson.jpg|
Example of picture comment with some punctuation characters :-),||

images/stories/20090705_ParadaZaglowcow/800_img_6303_KapitanPoinc.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6303_KapitanPoinc.jpg|
Next comment...||

images/stories/20090705_ParadaZaglowcow/800_img_6306_Sorlandet.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6306_Sorlandet.jpg|
And another one!||

images/stories/20090705_ParadaZaglowcow/800_img_6328_Eendracht.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6328_Eendracht.jpg|
fik||

images/stories/20090705_ParadaZaglowcow/800_img_6334_AnneMargaritha.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6334_AnneMargaritha.jpg|
Just a comment...||

images/stories/20090705_ParadaZaglowcow/800_img_6347_AnneMargaritha.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6347_AnneMargaritha.jpg|
Just a comment...||

images/stories/20090705_ParadaZaglowcow/800_img_6348_Szwed.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6348_Szwed.jpg|
Just a comment...||

images/stories/20090705_ParadaZaglowcow/800_img_6350_Humboldt.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6350_Humboldt.jpg|
Just a comment...||
}

 


Please support our work! If in your opinion this extension is worth of your time, is nice, helpful, helped you to do some work, or just simply saying did its work, we ask you to assess it by publishing your comment at Joomla! extensions web page, here.