Урок: Внедрение SimpleViewer в Symphony
В этом уроке я опишу как бесплатную версию Simpleviewer от Airtight Inc. можно внедрить в Symphony CMS. Это позволяет вам управлять всеми вашими фотогалереями, используя административный back-end Symphony. Я не буду вдаваться в подробности всего XSLT.
Перед тем как начать
Шаг 1. Создание необходимых файлов и папок
Установите Symphony с экстеншнами присутствующими по умолчанию (убедитесь, что там присутствует Select Box Link field). По FTP пройдите в папку Symphony’s /workspace и создайте так новую папку “simpleviewer”. Откройте Simpleviewer.zip, который скачали и закачайте оттуда viewer.swf и swfobject.js в вашу новую папку simpleviewer. Теперь перейдите в /workspace/images и создайте там папку “gallery”.
Извлеките расширение Color Chooser Field в extensions и убедитесь что переименовали его в “color_chooser_field”, иначе его не будет видно в back-end и вы его не вкючите. То же самое с Unique File Upload Field extension - “uniqueuploadfield”. Потом включите их в Расширениях в админке.
Шаг 2. Создние секций
SimpleViewer можно настраивать. Убедимся, что настройки доступны в интерфейсе Symphony Interface. Документация по SimpleViewer здесь - http://www.simpleviewer.net/simpleviewer/options.html.
Создайте секцию “Simpleviewer Gallery” со следующими полями:
- Text Input field “Title”, make it a required field
- Text Input field “maxImageWidth”, use number validation rule
- Text Input field “maxImageHeight”, use number validation rule
- Text Input field “frameWidth”, use number validation rule
- Text Input field “stagePadding”, use number validation rule
- Text Input field “navPadding”, use number validation rule
- Text Input field “thumbnailColumns”, use number validation rule
- Text Input field “thumbnailRows”, use number validation rule
- Text Input field “firstImageIndex”, use number validation rule
- Text Input field “Flash Object Width”
- Text Input field “Flash Object Height”
Для следующих полей выберите размещение в сайдбаре - Sidebar
- Color Chooser field “textColor”
- Color Chooser field “frameColor”
- Color Chooser field “preloaderColor”
- Color Chooser field “Background Color”
- Unique Upload field “backgroundImagePath”, select /workspace/images/gallery, use validation rule
/.(?:gif|jpe?g|png|swf)$/i - Select Box field “navPosition”, static options “left, right, top, bottom”
- Select Box field “vAlign”, static options “center, top, bottom”
- Select Box field “hAlign”, static options “center, left, right”
- Select Box field “enableRightClickOpen”, static options “true, false”
- Text Input field “langOpenImage”
- Text Input field “langAbout”
- Checkbox field “Publish”
Заметьте вы можете использовать пиксели, em или проценты для Flash Object Width и Flash Object Height, поэтому мы не устанавливаем валидацию на проверку чисел. Также, если хотите чтобы Flash Object был transparent background, можете “Background Color” установить типа Text Input field вместо Color Chooser field (“transparent” - тоже верное значение).
Создайте секцию “Simpleviewer Images с полями:
- Text Input field “Title”
- Unique Upload field “Image File”, select /workspace/images/gallery, use validation rule
/.(?:gif|jpe?g|png|swf)$/i - Select Box Link field “Gallery”, select option “title” from “Simpleviewer Gallery”, limit to the 99999 most entries
Step 3. Creating Data Sources
I don’t like to retrieve data that I am not going to use, therefore I make three data sources.
Create a Data Source called Simpleviewer Galleries with the following details:
- Source: Simpleviewer Gallery
- Filter Simpleviewer Gallery by Publish, value “yes”
- Show a maximum of 99999 results
- Use field “System ID” for Parameter Output
- Included Elements: title, publish
Create a Data Source called Simpleviewer Gallery Details with the following details:
- Source: Simpleviewer Gallery
- Filter Simpleviewer Gallery by System ID, value
{$simpleviewer-gallery-id} - Show a maximum of 1 results
- Include all elements except pagination (publish is also not necessary but you might want to see unpublished galleries anyway)
Create a Data Source called Simpleviewer Images with the following details:
- Source: Simpleviewer Images
- Filter Simpleviewer Images by Gallery, value
{$simpleviewer-gallery-id} - Show a maximum of 99999 results
- Included Elements: title, image-file
Step 4. Creating Pages
You need to create at least one page to display your Simpleviewer galleries and one page to generate the Simpleviewer XML file.
Create a Page called Gallery with the following details:
- URL handle: gallery
- URL parameters: simpleviewer-gallery-id
- Include Event “Login Info”
- Include Data Sources: Navigation, Simpleviewer Galleries, Simpleviewer Gallery Details
Create a Page called Gallery XML with the following details:
- URL handle: xml
- Parent page: /gallery
- URL parameters: simpleviewer-gallery-id
- Page type: hidden, XML
- Include Data Sources: Simpleviewer Gallery Details, Simpleviewer Images
Step 5. Write XSLT
We’ll need to write XSLT to display the Simpleviewer galleries and to generate the Simpleviewer XML file. In the setup of this tutorial I assume that more galleries are required. However, if only one gallery is published this gallery will be shown by default.
Open master.xsl and put the following line just below the closing head tag: <script type="text/javascript" src="{$workspace}/simpleviewer/swfobject.js"></script>
We want to create an XML file that outputs all allowed configuration options of Simpleviewer and includes the appropriate images. Use the code provided at http://gist.github.com/223768 to replace the existing code of gallery_xml.xsl
Now, open gallery.xsl and use the code provided at http://gist.github.com/223768 to replace the existing code. This code will generate a list of all your galleries and if one is chosen will display the Simpleviewer gallery using the values you provided in your Simpleviewer Gallery and Simpleviewer Image content entries.
Step 6. Create your first gallery
Go to Simpleviewer Gallery and create a new entry. Only Title is required, but to display the gallery be sure to check the Publish checkbox. In the ensemble (see demo at ) I use the following values for the following fields with the horizontal gallery and (vertical gallery):
- maxImageWidth: 800 (400)
- maxImageHeight: 480 (700)
- frameWidth: 10 (10)
- stagePadding: 10 (5)
- navPadding: 5 (50)
- thumbnailColumns: 6 (2)
- thumbnailRows: 1 (2)
- firstImageIndex: 0 (2)
- Flash Object Height: 100% (90%)
- Flash Object Width: 100%
- textColor: #000000 (#2e2e2e)
- frameColor: #000000 (#8a8a8a)
- preloaderColor: #000000 (#8a8a8a)
- Background Color: #FFFFFF (#FFFFFF)
- navPosition: top (left)
- vAlign: top
- hAlign: center
Final Note
There are some default values defined in the code for gallery.xsl that you can find at lines 46, 52, 58, and 64. These are only used when the values are left empty in the respective Simpleviewer Gallery content entry. Change them if you want. You can find the default values for all config options at http://www.simpleviewer.net/simpleviewer/options.html.
If you have any questions about the code or suggestions for improvement, please let me know. Also, if you use this code it would be nice to see some examples of your Simpleviewer galleries and their configuration values, so feel free to post them!
перевёл - Саша Исаев
RSS комментариев к этой статье.
Урок: Внедрение SimpleViewer в Symphony
В этом уроке я опишу как бесплатную версию Simpleviewer от Airtight Inc. можно внедрить в Symphony CMS. Это позволяет вам управлять всеми вашими фотогалереями, используя административный back-end Symphony. Я не буду вдаваться в подробности всего XSLT.
Перед тем как начать
Шаг 1. Создание необходимых файлов и папок
Установите Symphony с экстеншнами присутствующими по умолчанию (убедитесь, что там присутствует Select Box Link field). По FTP пройдите в папку Symphony’s /workspace и создайте так новую папку “simpleviewer”. Откройте Simpleviewer.zip, который скачали и закачайте оттуда viewer.swf и swfobject.js в вашу новую папку simpleviewer. Теперь перейдите в /workspace/images и создайте там папку “gallery”.
Извлеките расширение Color Chooser Field в extensions и убедитесь что переименовали его в “color_chooser_field”, иначе его не будет видно в back-end и вы его не вкючите. То же самое с Unique File Upload Field extension - “uniqueuploadfield”. Потом включите их в Расширениях в админке.
Шаг 2. Создние секций
SimpleViewer можно настраивать. Убедимся, что настройки доступны в интерфейсе Symphony Interface. Документация по SimpleViewer здесь - http://www.simpleviewer.net/simpleviewer/options.html.
Создайте секцию “Simpleviewer Gallery” со следующими полями:
Для следующих полей выберите размещение в сайдбаре - Sidebar
/.(?:gif|jpe?g|png|swf)$/iЗаметьте вы можете использовать пиксели, em или проценты для Flash Object Width и Flash Object Height, поэтому мы не устанавливаем валидацию на проверку чисел. Также, если хотите чтобы Flash Object был transparent background, можете “Background Color” установить типа Text Input field вместо Color Chooser field (“transparent” - тоже верное значение).
Создайте секцию “Simpleviewer Images с полями:
/.(?:gif|jpe?g|png|swf)$/iStep 3. Creating Data Sources
I don’t like to retrieve data that I am not going to use, therefore I make three data sources.
Create a Data Source called Simpleviewer Galleries with the following details:
Create a Data Source called Simpleviewer Gallery Details with the following details:
{$simpleviewer-gallery-id}Create a Data Source called Simpleviewer Images with the following details:
{$simpleviewer-gallery-id}Step 4. Creating Pages
You need to create at least one page to display your Simpleviewer galleries and one page to generate the Simpleviewer XML file.
Create a Page called Gallery with the following details:
Create a Page called Gallery XML with the following details:
Step 5. Write XSLT
We’ll need to write XSLT to display the Simpleviewer galleries and to generate the Simpleviewer XML file. In the setup of this tutorial I assume that more galleries are required. However, if only one gallery is published this gallery will be shown by default.
Open master.xsl and put the following line just below the closing head tag:
<script type="text/javascript" src="{$workspace}/simpleviewer/swfobject.js"></script>We want to create an XML file that outputs all allowed configuration options of Simpleviewer and includes the appropriate images. Use the code provided at http://gist.github.com/223768 to replace the existing code of gallery_xml.xsl
Now, open gallery.xsl and use the code provided at http://gist.github.com/223768 to replace the existing code. This code will generate a list of all your galleries and if one is chosen will display the Simpleviewer gallery using the values you provided in your Simpleviewer Gallery and Simpleviewer Image content entries.
Step 6. Create your first gallery
Go to Simpleviewer Gallery and create a new entry. Only Title is required, but to display the gallery be sure to check the Publish checkbox. In the ensemble (see demo at ) I use the following values for the following fields with the horizontal gallery and (vertical gallery):
Final Note
There are some default values defined in the code for gallery.xsl that you can find at lines 46, 52, 58, and 64. These are only used when the values are left empty in the respective Simpleviewer Gallery content entry. Change them if you want. You can find the default values for all config options at http://www.simpleviewer.net/simpleviewer/options.html.
If you have any questions about the code or suggestions for improvement, please let me know. Also, if you use this code it would be nice to see some examples of your Simpleviewer galleries and their configuration values, so feel free to post them!
перевёл - Саша Исаев