First of all, I do really appreciate RS Joomla for creating such a wonderful extension (RSForm Pro!) for Joomla. I had a chance to work on it and only can say - it is great! And it does what it describes.

Below, I just wanted to share with my experience of displaying images front-end with the help of RSFrom Pro! In fact, there were several instances, when users wanted to know how to display their images front-end with the help of Manage Directories. For instance, clear answer was given <a href="www.rsjoomla.com/forum/37-rsform-pro/152...tail-view.html#15298">in this thread</a>. Though, I think this should be explained in more detail, especially for the users who recently started using joomla or RSForm Pro.

Also, as a bonus, I will share with another feature - adding audio player to front-end automatically with uploading of audio file. All these were developed based on my experience.

So let's start:
- Create new form – Components > RSForm! Pro > Manage Forms > New > Next > Fill in the fields concerning the form to be created (I named my form as “Test”) > Next > Finish.

- Add necessary elements to a form – in our case (for testing purposes) we will create 2 “File Upload” elements with “Submit button” element.

1. Click on “File upload” element: give name, for instance – Image; Caption – Here will be image; attributes: File Size indicated the maximum file size to be attached, I indicated 5000; Accepted extensions – put in each separate file extensions allowed:
jpg
jpeg
gif
Save and close.
2. Click on “File upload” element: Repeat the same step > element name - Audio, Caption – Here will be audio player; maximum size 5000; accepted extensions:
Jpg
Jpeg
Mp3
Save and close
3. Click on “Submit button” element: give name – Submit; Label – Submit > save and close.

- Displaying required elements of the form in Manage Directories:
Components > RSForm! Pro > Manage Directories > Click on your form (in my case “Test”)
In Directory Info: Select “Public” if your form is available to everyone (or “Registered” if it is available to registered Users). In addition select “Super User” – yourself.
In Directory Fields: Select “Image” and “Audio” on columns “Show in Listing”, “Editable”, “Show in Details”. Save and close.

- Adding Menu Items for “Form” and “Submissions Directory”:

Add menu items by selecting “Menu Item Type” as: RSForm Pro > Form. Do not forget to give title to menu item and make it published. Save and close.
Add menu item by selecting “Menu Item Type” as RsForm Pro > Submissions Directory. Do not forget to give it a title. This will show you the records added to your form. In the Options of this menu item do not forget to “Enable submissions directory”. Save and Close.

- Create Menu Module and assign it your menu created (with RS Form Menus), select position of the module (usually the center of your site) and make it published.

- Making image and audio visible in the Submissions Directory: Now go to Components > RSForm! Pro > Manage Directories > Click on your form (in my case “Test”);

Go to “Details Layout” > Make “Auto Generate Layout?” “No”

Add the following line to “Image”:

<div class="rsform-right-col"><img src="{Image:path}" width="300px" /></div>

Add the following line to “Audio”:
<div class="rsform-right-col"><audio id="audio-player" src="{Audio:path}" type="audio/mp3" controls="controls" /></div>

Save and close. Go to front end. Attach first image (with jpg or jpeg or gif extension). Attach sound (mp3 extension). Submit.

Go to your Submissions Directory Menu Item > You will see a table with your entry > Click on View.

You will see there your image resized to 300 px and audio player, which can play your sound/music.

Alternatively you remove links above your image and audio player. To do so, just go to

Manage Directories > Details Layout and Delete:
<div class="rsform-right-col">{Image:value}</div>
And
<div class="rsform-right-col">{Audio:value}</div>

That’s all. I hope this will help you to make your forms more interesting and match your creative needs.

Best,

Akmal Akhmed (User)

Hi
Thank you for your documentation.
But haw can I show the image in the list view?