[TYPO3-templavoila] hiding complicated settings of frontend extensions by using an FCE

[Claudius Heitz]

Hi,

in the last days, I experimented a lot with FCEs and I thought, one 
thing could be interesting as a general concept:

I wanted to integrate the rgsmoothgallery, a nice frontend-extension, 
with external thumbnails, and it should be easy for editors to put such 
a gallery on a page.

The problem was that the settings for using the rgsmoothgallery in this 
way are very difficult: one has to insert the ID of a div container in 
the settings of rgsmoothgallery and this div-container has to exist on 
the page.

So the editor had to insert a content element with plain html to bring 
this div-container on the page - not the thing a normal text editor is 
meant to do.


THE SOLUTION
I created an FCE, where the editor can just enter two things:
- the path to the image folder (input field)
- whether he wants thumbnails or not (if only one picture is in the 
folder, thumbnails don't make sense)

For the path to the image folder, he can enter a relative path to the 
root folder, where all image folders are in (e.g. fileadmin/galleries/).

The FCE provides the rest of the settings (div-container for external 
thumbnails, height / width of images, other standard settings ...).


THE GENERAL CONCEPT
FCEs could hide complicated settings of some frontend extensions by 
offering only the necessary input fields. They can also combine these 
settings with other information, e.g. adding the page title or something.

I know that hiding input fields could also be achieved with TSconfig for 
the backend users, but I think with FCE, it's even more flexible.

I hope, I didn't bore you.

See below the data structure for my rgsmoothgallery - integration.

Note: I had to copy the whole setup.txt (or at least the relevant part 
for my case) of rgsmoothgallery into my FCE - I don't know why.
see thread "include setup.txt from extension"

Greetings
Claudius




<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
<T3DataStructure>
	<meta type="array">
		<langDisable>1</langDisable>
	</meta>
	<ROOT type="array">
		<tx_templavoila type="array">
			<title>ROOT</title>
			<description>Wählen Sie das HTML-Element der Seite, das Sie als 
übergeordnetes Container-Element des Templates möchten.</description>
		</tx_templavoila>
		<type>array</type>
		<el type="array">
			<field_gallery_path type="array">
				<tx_templavoila type="array">
					<title>Image-Folder</title>
					<description>don't map this</description>
					<sample_data type="array">
						<numIndex index="0"></numIndex>
					</sample_data>
					<eType>input</eType>
					<proc type="array">
						<HSC type="integer">1</HSC>
					</proc>
				</tx_templavoila>
				<TCEforms type="array">
					<config type="array">
						<type>input</type>
						<size>48</size>
						<eval>trim</eval>
					</config>
					<label>Image-Folder</label>
				</TCEforms>
			</field_gallery_path>
			<field_show_thumbs type="array">
				<tx_templavoila type="array">
					<title>Thumbnails</title>
					<description>don't map this</description>
					<sample_data type="array">
						<numIndex index="0"></numIndex>
					</sample_data>
					<eType>select</eType>
				</tx_templavoila>
				<TCEforms type="array">
					<config type="array">
						<type>select</type>
						<items type="array">
							<numIndex index="0" type="array">
								<numIndex index="0">show</numIndex>
								<numIndex index="1">1</numIndex>
							</numIndex>
							<numIndex index="1" type="array">
								<numIndex index="0">hide</numIndex>
								<numIndex index="1">0</numIndex>
							</numIndex>
						</items>
						<default>0</default>
					</config>
					<label>Thumbnails</label>
				</TCEforms>
			</field_show_thumbs>
			<field_gallery_plugin type="array">
				<tx_templavoila type="array">
					<title>Gallery-Plugin (rgsmoothgallery)</title>
					<sample_data type="array">
						<numIndex index="0"></numIndex>
					</sample_data>
					<eType>link</eType>
					<TypoScript><![CDATA[

			10 < tx_rgsmoothgallery_pi1->main
			10 {
			
				# here the value from the field for the image-folder above 
(field_gallery_path) is inserted
				startingpoint.field = field_gallery_path
				startingpoint.wrap = fileadmin/galleries/ |
			
				# here the value from the field for the thumbnails above 
(field_show_thumbs) is inserted
				showThumbs.field = field_show_thumbs

				# ID of the div-container for the external thumbs - must exist on 
the page.
				externalThumbs = ext_thumbs


				# all following settins are just copied from the setup.txt of 
rgsmoothgallery
			  	thumb = IMG_RESOURCE
			  	thumb {
			    	file.maxW = 60
				    file.maxH = 60
			  	}

			  	big = IMG_RESOURCE
				big {
			    	file.maxW = 300
			    	file.maxH = 300
			  	}

			  	lightbox = IMG_RESOURCE
			  	lightbox {
			    	file.maxW = 800
			    	file.maxH = 600
			  	}

			  	pathToMootools = EXT:rgsmoothgallery/res/scripts/mootools.js
			  	pathToJdgalleryJS = EXT:rgsmoothgallery/res/scripts/jd.gallery1010.js
			  	pathToJdgalleryCSS = EXT:rgsmoothgallery/res/css/jd.gallery.css
			  	pathToSlightboxJS = EXT:rgsmoothgallery/res/scripts/slightbox107.js
			  	pathToSlightboxCSS = EXT:rgsmoothgallery/res/css/slightbox.css
			  	pathToJdgallerySetJS = 
EXT:rgsmoothgallery/res/scripts/jd.gallery.set.js
			  	pathToJdgalleryTransitionsJS = 
EXT:rgsmoothgallery/res/scripts/jd.gallery.transitions.js


			  	settings = timed:false,showArrows: false,showCarousel: 
false,embedLinks:true,lightbox:true,textShowCarousel:'Thumbnails'
			  	pid =
			  	height = 300
			  	width = 300
			  	minimumImages = 2
			  	noscript = 1
			  	enableSaveButton = 0
			  	enablePrintButton = 0

			  	hideInfoPane = 1
			  	thumbOpacity = 1.0
			  	slideInfoZoneOpacity =
			  	thumbSpacing = 0

			  	mode = DIRECTORY
				lightbox = 1
				arrows = 1
			}				
				]]></TypoScript>
				</tx_templavoila>
			</field_gallery_plugin>
		</el>
	</ROOT>
</T3DataStructure>