About Form2Content Forms & Fields

Form2Content forms are used to collect data to generate Joomla articles. Each content type has it's own form. Each form can have as many fields as you like. You can access the Fields Manager by clicking on the  in the Content Type Manager. Please read about article templating on how to get the data from the forms into your Joomla article.

Image gallery

Please note: The Image Gallery is available for Form2Content Pro for Joomla 3.x only and from version 6.5.0 onwards!


It has been some work but we can now present the F2C Image Gallery field type! The Image Gallery field allows you to add multimple images within one field thereby shortening your submisison form. You no longer need to add multiple image fields.

Important: The gallery field DOES NOT output an image gallery in your article out of the box, it just collects the images! We have added some examples on how you can display the images within your article at the end of the article.

Tip: DO add one image field for linking to the Joomla article image!


 

Template parameters for the Image Gallery field

There are two output methods, the first is a link to the folder where the images are stored, the second is an array of the images of the uploaded set. In all the examples our image gallery field is called GALLERY!

Gallery: {$GALLERY}
Example: /home/users/root/yourdomain.com/images/stories/com_form2content/p3/f50/gallery62/

Gallery path absolute: {$GALLERY_PATH_ABSOLUTE}
Example: /home/users/root/yourdomain.com/images/stories/com_form2content/p3/f50/gallery62/

Gallery path relative: {$GALLERY_PATH_RELATIVE}
Example: com_form2content/p3/f50/gallery62/

Gallery url absolute: {$GALLERY_URL_ABSOLUTE}
Example: http://www.yourdomain.com/images/stories/com_form2content/p3/f50/gallery62/

Gallery url relative: {$GALLERY_URL_RELATIVE}
Example*: com_form2content/p3/f50/gallery62/

*Please note that the images/stories root is not included as you can set a different location in the field settings!


 

Cropping options

Just like the upgraded image field you can set cropping options for the images that are uploaded. Cropping can be set to optional or always. In the optional case the CROP button is shown next to the image thumb after upload (see second image above).
Of course you can only set the size and cropping options for all the images that are uploaded in the field and not different settings per image. If the later is required you can use multiple image (gallery) fields in your submission form.

Array template output (advanced use!)

Instead of using a plugin to render the images in your article (see below) it's possible to render the actual images within your article using the {foreach} Smarty templating array syntax.

{foreach from=$GALLERY_IMAGES item=GALLERYIMAGE} <img src="/{$GALLERY_URL_ABSOLUTE}{$GALLERYIMAGE.FILENAME}" alt="{$GALLERYIMAGE.ALT}" title="{$GALLERYIMAGE.TITLE}" height="{$GALLERYIMAGE.HEIGHT}" width="{$GALLERYIMAGE.WIDTH}" /> {/foreach}

The above code will render a series of images in html for each image that has been uploaded. The order of the images can be set in the article submission form (see the image above).

IMPORTANT: For the array output you need to use the parameter name: $GALLERY_IMAGES or if your field is called differently, $< YOUR_F2C_GALLERY_FIELDNAME >_IMAGES.

Check IF any image is loaded

You can check if there are any images loaded to prevent html being oaded in your template even if the image gallery wasn't used by using the following Smarty syntax:

{if < YOUR_F2C_GALLERY_FIELDNAME >_IMAGES}   ..... your template code ...... {/if}

The following can also work.

{if !empty($ < YOUR_F2C_GALLERY_FIELDNAME >_IMAGES)} ..... your template code ...... {/if}

Other options could be: {if is_array ($GALLERY_IMAGES)} .... code {/if} or {if $GALLERY_IMAGES[0].FILENAME} .... code .... {/if}

Display specific image

If you like to display a specific image from the gallery you can use the below code. Note that 0 is the first.

{$ < YOUR_F2C_GALLERY_FIELDNAME >_IMAGES[0].FILENAME}

An example (where the fieldname is "gallery") can be using a modal box effect for an image after clicking on a link. Don't forget the root url!:

<a class="modal" href="/{$GALLERY_URL_ABSOLUTE}{$GALLERY_IMAGES[0].FILENAME}">Click here to see an image</a>

Display the first image of the gallery

Let's say you want to use the first image for the link to a pop-up image gallery (modal box). You can use the previous code or:

{foreach from=$GALLERY_IMAGES item=GALLERYIMAGE name=images}
{if $smarty.foreach.images.first}
<img src="/{$GALLERY_URL_ABSOLUTE}{$GALLERYIMAGE.FILENAME}" alt="{$GALLERYIMAGE.ALT}" title="{$GALLERYIMAGE.TITLE}" height="{$GALLERYIMAGE.HEIGHT}" width="{$GALLERYIMAGE.WIDTH}" />
{else}
{/if}
{/foreach}
 

Displaying the remaining images (maybe within a hidden div element).

 
{foreach from=$GALLERY_IMAGES item=GALLERYIMAGE name=images}
{if $smarty.foreach.images.first}
{else}
<img src="/{$GALLERY_URL_ABSOLUTE}{$GALLERYIMAGE.FILENAME}" alt="{$GALLERYIMAGE.ALT}" title="{$GALLERYIMAGE.TITLE}" height="{$GALLERYIMAGE.HEIGHT}" width="{$GALLERYIMAGE.WIDTH}" />
{/if}
{/foreach}

IMPORTANT: There are some extra / after the href/src tags in the examples because of the editor, please remove them in your own code!


Rendering an image gallery in your Joomla article

The power of Form2Content is that we don't tell or limit you on using other 3rd party features. This means YOU get to choose which image gallery YOU like to show within your article! Some examples:

Please remember to always replace the plugin { and } tag with {ldelim} and {rdelim}

Simple Image Gallery (free)

http://demo.joomlaworks.net/simple-image-gallery

The plugin can turn any folder of images located inside your Joomla! website into a grid-style image gallery with cool lightbox previews. And all that using a simple plugin tag like {gallery}myphotos{/gallery}.
So for example, if we have a folder called "my_trip_to_Paris" located in images/stories/my_trip_to_Paris, then we can create our gallery by simply entering the tag {gallery}my_trip_to_Paris{/gallery} into some Joomla! article.

Now all you need to do is place the plugin syntax inside your F2C article template. From above we know that we have a template parameter which renders the folder URL. For this plugin you don't need to add the images/stories so the syntax becomes:

{ldelim}gallery{rdelim}{$ < YOUR_F2C_GALLERY_FIELDNAME >_URL_RELATIVE}{ldelim}/gallery{rdelim}

This will render exactly what the plugin requires.

{gallery}com_form2content/p3/f50/gallery62/{/gallery}

Simple Image Gallery Extended

http://joomla-extensions.kubik-rubik.de/sige-simple-image-gallery-extended

This plugin works almost identical to te first but has more parameters and effects.

{ldelim}gallery{rdelim}{$GALLERY_URL_RELATIVE},limit=0,random=1,width=100,height=100,gap_h=20,gap_v=20
{ldelim}/gallery{rdelim}

Widgetkit lightbox

 {foreach from=$< FIELD_NAME >_IMAGES item=GALLERYIMAGE} <a href="/{$< FIELD_NAME >_URL_ABSOLUTE}{$GALLERYIMAGE.FILENAME}" class="uk-float-left" data-lightbox="group:gallery"> <img src="/{$< FIELD_NAME >_URL_ABSOLUTE}thumbs/{$GALLERYIMAGE.FILENAME}" alt="{$GALLERYIMAGE.ALT}" title="{$GALLERYIMAGE.TITLE}" height="{$GALLERYIMAGE.HEIGHT_THUMB}" width="{$GALLERYIMAGE.WIDTH_THUMB}" /> </a> {/foreach}

Replace the < FIELD_NAME > with the name of your gallery field! Also remove the two / , they are added by the editor.

Many more possibilities!

Working with 3rd party image gallery plugins is easy. For more options please visit the JED:
http://extensions.joomla.org/extensions/photos-a-images/galleries/content-photo-gallery

 

F2C Cheat-sheet

An overview of all template parameters (placeholders for your form data). These are used in your F2C intro and main template to parse the data from your submission forms into the Joomla article.

Download

Footer

Form2Content, a Joomla CCK Documentation © 2010 - 2015 Open Source Design | Powered by Form2Content