Image set name: {{ name }}<\/h4>\r\n

Image Gallery field type value output examples:<\/p>\r\n\r\n\r\n\r\n

This is a complex example how to use diffrent layouts to output the content:<\/p>\r\n\r\n\r\n{% set galleryLayouts = [\"3D_Rotating_Gallery\",\"CSS_Only_image_gallery\",\"animated_Mini_Photo_Gallery\",\"A_CSS_only_expanding_gallery\",\"A_CSS_only_expanding_gallery_II\",\r\n\"Pure_CSS_Lightbox_using_target_and_has\",\"Sibling_Gallery\"] %}\r\n\r\n\r\n\r\n

\r\n Select Gallery Layout:<\/label>\r\n \r\n {% for index, layout in galleryLayouts %}\r\n {{ layout }}<\/option>\r\n {% endfor %}\r\n <\/select>\r\n Show Layout<\/button>\r\n<\/form>\r\n

\r\n{% set index = url.getint(\"g\") %}\r\n\r\n \r\nGallery style:\r\n \r\n \r\n{{ document.layout(galleryLayouts[index]) }}\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\nSimple list of thumbnails:\r\n\r\n\r\n{% verbatim %}

{{ gallery }}<\/pre>{% endverbatim %}\r\n\r\n\r\nOutput:{{ gallery }}\r\n\r\n\r\nSimple list of original image links:When editing a layout you can double-click on the tag to see the list of possible options.\r\n\r\n\r\n{% verbatim %}
{{ gallery(\"link:_original\",\",\") }}<\/pre>{% endverbatim %} \r\n\r\n\r\nOutput:
{{ gallery(\"link:_original\",\",\") }}<\/pre>\r\n\r\n\r\n\r\nArray of thumbnails:\r\n\r\n{% verbatim %}
\r\n{% set images = gallery(\"link:\",\";\")|split(';') %}\r\n<ul>\r\n{% for image in images %}\r\n  <li>{{ image }}<\/li>\r\n{% endfor %}\r\n<\/ul>\r\n<\/pre>{% endverbatim %}\r\n\r\n\r\nOutput:
\r\n{% set images = gallery(\"link:\",\";\")|split(';') %}\r\n
\r\n{% for image in images %}\r\n
{{ image }}<\/li>\r\n{% endfor %}\r\n<\/ul><\/pre>","tableid":41,"layouttype":4,"changetimestamp":"2024-05-13 16:00:19","published":1,"created_by":0,"modified_by":200042,"created":"2024-05-13 21:00:19","modified":"2024-05-14 01:45:27","checked_out":0,"checked_out_time":"0000-00-00 00:00:00","layoutmobile":"","layoutcss":"","layoutjs":"","asset_id":722,"params":null,"version":1,"hits":0,"ordering":0},{"id":104,"layoutname":"ImageGalleryCatalog","layoutcode":"
{{ html.recordcount }}<\/div>\r\n
{{ html.add }}<\/div>\r\n\r\n
Custom Tables - Image Gallery field type<\/h2>\r\n\r\n
This example page will show you how to use the Image Gallery output.\r\nThe Image Gallery field allows you to easily upload and manage multiple images within a single field in your custom tables.<\/p>\r\n\r\n
Instead of providing built-in gallery layouts, you can generate lists or arrays of images from the Image Gallery field. You can then use these lists as sources to create different types of image galleries using your own custom code or third-party scripts.<\/p>\r\n
Here's what you'll learn:<\/p>\r\n
\r\n  \r\n  
Generate Image Lists<\/strong>: Generate various types of lists or arrays from the images in your gallery, such as a simple list of thumbnails, a list of original image links, or an array of thumbnail links.<\/li>\r\n  
Use Twig Templating<\/strong>: The examples on this page utilize Twig templating syntax, which is a powerful templating engine used in Custom Tables.\r\n    You can use filters and loops to manipulate and display your image lists in different formats.<\/li>\r\n  
Create Custom Galleries<\/strong>: With the generated lists or arrays of images, you can then use your own custom code or integrate with third-party scripts and libraries to create unique and visually appealing image galleries tailored to your specific needs.<\/li>\r\n<\/ol>\r\n\r\n\r\n
\r\n
{{ html.batch('edit','publish','unpublish','refresh','delete') }}<\/div>\r\n\r\n\r\n\r\n\r\n{% block record %}\r\n\r\n
{{ html.batch(\"checkbox\") }}<\/th>\r\n
{{ record.label(true) }}<\/th>\r\n
{{ name.label(true) }}{{ html.search(\"name\") }}<\/th>\r\n
Action{{ html.searchbutton }}<\/th>\r\n<\/tr><\/thead>\r\n\r\n\r\n
{{ html.toolbar(\"checkbox\") }}<\/td>\r\n
{{ record.id }}<\/a><\/td>\r\n
Click to see the Gallery of Photos: {{ name }}<\/a><\/td>\r\n
{{ html.toolbar(\"edit\",\"publish\",\"refresh\",\"delete\") }}<\/td>\r\n<\/tr>\r\n{% endblock %}\r\n<\/tbody>\r\n<\/table>\r\n\r\n<\/div>\r\n
{{ html.pagination }}<\/div>\r\n\r\n
You can download the complete Gallert setup and export it to your Custom Tables to try it yourself.<\/p>\r\n
To export the file go to Administrator => Components => Custom Tables => Import Tables<\/p>\r\n","tableid":41,"layouttype":1,"changetimestamp":"2024-05-14 01:23:10","published":1,"created_by":200042,"modified_by":200042,"created":"2024-05-14 01:23:10","modified":"2024-05-14 01:46:55","checked_out":0,"checked_out_time":"0000-00-00 00:00:00","layoutmobile":"","layoutcss":".datagrid td, .datagrid th{\r\npadding:10px;\r\n}","layoutjs":"","asset_id":723,"params":null,"version":1,"hits":0,"ordering":0}],"records":null,"menu":[{"id":7905,"menutype":"custom-tables-import-men","title":"Gallery","alias":"gallery","note":"","path":"gallery","link":"index.php?option=com_customtables&view=catalog","type":"component","published":1,"parent_id":1,"level":1,"component_id":10605,"checked_out":null,"checked_out_time":null,"browserNav":0,"access":6,"img":" ","template_style_id":0,"params":"{\"establename\":\"imagegalleryexample\",\"escataloglayout\":\"\",\"esitemlayout\":\"\",\"eseditlayout\":\"\",\"esdetailslayout\":\"Gallery_Details\",\"filter\":\"\",\"showpublished\":\"0\",\"useridfield\":\"\",\"recordstable\":\"\",\"recordsuseridfield\":\"\",\"recordsfield\":\"\",\"groupby\":\"\",\"limit\":\"0\",\"sortby\":\"\",\"forcesortby\":\"\",\"guestcanaddnew\":\"0\",\"addusergroups\":\"8\",\"editusergroups\":\"8\",\"publishusergroups\":\"8\",\"deleteusergroups\":\"8\",\"publishstatus\":\"1\",\"returnto\":\"\",\"msgitemissaved\":\"\",\"onrecordaddsendemaillayout\":\"\",\"onrecordaddsendemail\":\"0\",\"onrecordaddsendemailto\":\"\",\"onrecordsavesendemailto\":\"\",\"sendemailcondition\":\"\",\"emailsentstatusfield\":\"\",\"allowcontentplugins\":\"0\",\"requiredlabel\":\"\",\"showcartitemsonly\":\"0\",\"cart_returnto\":\"\",\"cart_msgitemadded\":\"\",\"cart_msgitemdeleted\":\"\",\"cart_msgitemupdated\":\"\",\"menu-anchor_title\":\"\",\"menu-anchor_css\":\"\",\"menu_icon_css\":\"\",\"menu_image\":\"\",\"menu_image_css\":\"\",\"menu_text\":1,\"menu_show\":1,\"page_title\":\"\",\"show_page_heading\":\"\",\"page_heading\":\"\",\"pageclass_sfx\":\"\",\"menu-meta_description\":\"\",\"robots\":\"\"}","lft":5,"rgt":6,"home":0,"language":"*","client_id":0,"publish_up":null,"publish_down":null},{"id":7906,"menutype":"custom-tables","title":"Image Gallery field type example","alias":"image-gallery","note":"","path":"image-gallery","link":"index.php?option=com_customtables&view=catalog","type":"component","published":1,"parent_id":1,"level":1,"component_id":10605,"checked_out":null,"checked_out_time":null,"browserNav":0,"access":1,"img":" ","template_style_id":0,"params":"{\"establename\":\"imagegalleryexample\",\"escataloglayout\":\"ImageGalleryCatalog\",\"esitemlayout\":\"\",\"eseditlayout\":\"\",\"esdetailslayout\":\"Gallery_Details\",\"filter\":\"\",\"showpublished\":\"0\",\"useridfield\":\"\",\"recordstable\":\"\",\"recordsuseridfield\":\"\",\"recordsfield\":\"\",\"groupby\":\"\",\"limit\":\"0\",\"sortby\":\"\",\"forcesortby\":\"\",\"guestcanaddnew\":\"0\",\"addusergroups\":\"8\",\"editusergroups\":\"8\",\"publishusergroups\":\"8\",\"deleteusergroups\":\"8\",\"publishstatus\":\"1\",\"returnto\":\"\",\"msgitemissaved\":\"\",\"onrecordaddsendemaillayout\":\"\",\"onrecordaddsendemail\":\"0\",\"onrecordaddsendemailto\":\"\",\"onrecordsavesendemailto\":\"\",\"sendemailcondition\":\"\",\"emailsentstatusfield\":\"\",\"allowcontentplugins\":\"0\",\"requiredlabel\":\"\",\"showcartitemsonly\":\"0\",\"cart_returnto\":\"\",\"cart_msgitemadded\":\"\",\"cart_msgitemdeleted\":\"\",\"cart_msgitemupdated\":\"\",\"menu-anchor_title\":\"\",\"menu-anchor_css\":\"\",\"menu_icon_css\":\"\",\"menu_image\":\"\",\"menu_image_css\":\"\",\"menu_text\":1,\"menu_show\":1,\"page_title\":\"\",\"show_page_heading\":\"\",\"page_heading\":\"\",\"pageclass_sfx\":\"\",\"menu-meta_description\":\"\",\"robots\":\"\"}","lft":419,"rgt":420,"home":0,"language":"*","client_id":0,"publish_up":null,"publish_down":null}]}]