images and data forms

images and data forms

Karii_vg 11 Nov 2011 22:01

Ok, after looking through every bit i could find, i still haven't found what i am wanting to accomplish.. So i've got a tempate, which uses a form for users to input information. but i've run in to a obstical.

I want the users to be able to upload a Image using a form field, and then have that image displayed as a image on the page. but have yet to be able to figure out or find a way to do this. any help would be appreciated.

I did notice also that about halfway through the discussion on the data forms page, that this option was something that had been being looked at? is it possible? (i've currently found a work around, but is not as easy for them as i would like it to be)

Last edited on 11 Nov 2011 22:03 by Karii_vg + Show more

Re: images and data forms

RobElliott 11 Nov 2011 22:26

Images use a File field in the dataform. Then they are displayed using form_raw, not form_data: %%form_raw{fieldname}%%. There are two ways you can use this. Suppose you have a field in your form called picture you could use basic image syntax:

[[image %%form_raw{picture}%%]]

Or you can do a bit more. As well as your picture field, if you have another text field for a caption called caption and a link to an external website using a url field called website, you could use an image-box snippet and also then have a header and/or a caption for your image and a link:

[[include :snippets:image
|image=%%form_raw{picture}%%
|width=180px
|float=left
|heading=
|caption=%%form_data{caption}%%
|link=%%form_data{website}%%
]]

I have a site built completely on dataforms which uses this image method throughout. An example of the images with captions is on the page here.

An update to the documentation on dataforms - which I am hoping to release this weekend - has a section on using images which is missing from the current documentation.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Last edited on 11 Nov 2011 23:13 by RobElliott + Show more

Re: images and data forms

Karii_vg 11 Nov 2011 23:31

Thanks Rob! that gives me a path to go down and some things to try out, Appreciate the help!

Re: images and data forms

Karii_vg 01 Dec 2011 16:57

Ok, so i got everything dispalying correctly, but i've come across another issue… on data form http://www.thetelonproject.com/dungeons:_template you will notice that there are spots for two images to be input.. both of them have a 'style' Attribute. but there will nto always be two images, if there is no image uploaded you get red text still showing up (as showing in this example page- http://www.thetelonproject.com/dungeons:kalendras-coven on the lower right side where the second image were to go if there was a second image)

the question is, is there a way to keep this text from showing that i haven't been able to find yet?

Re: images and data forms

RobElliott 01 Dec 2011 17:19

What you can do is to have a default image displaying if you don't upload an image via the dataform. That default image could be a blank image or a general image related to your site. It needs a css module in the live templateand I have also used the image box snippet from http://snippets.wikidot.com/code:image-box to display the relevant image and, in this case, to display a caption and have the image link to another page:

[!-- Following CSS module is needed for the default image code below --]
[[module CSS]]
.form-image-default%%form_raw{screenshot}%%{ display: block !important; }
.form-image%%form_raw{screenshot}%%{ display: none !important; }
[[/module]]

[!-- Following snippets code will add a default image if an image is not uploaded to the screenshot dataform field --]

[[div class="form-image"]]
[[include :snippets:image
|image=%%form_raw{screenshot}%%
|width=150px
|float=right
|heading=
|caption=%%form_data{screenshot_caption}%%
|link=%%form_data{screenshot_link}%%
]]
[[/div]]
[[div class="form-image-default" style="display: none;"]]
[[include :snippets:image
|image=/css:theme/wagon.jpg
|width=150px
|float=right
|heading=
|caption=
|link=
]]
[[/div]]

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Last edited on 01 Dec 2011 17:30 by RobElliott + Show more

Re: images and data forms

Karii_vg 03 Dec 2011 01:59

Ok, think i have this working to a point.. the max-width & max-height settings dont seem to be working though.. basically its turning the image into a little thumbnail instead of just limiting the size of the image

[[module CSS]]
.form-image-default%%form_raw{DungeonMap2}%%{ display: none !important; }
.form-image%%form_raw{DungeonMap2}%%{ display: none !important; }
[[/module]]

[[include :snippets:image
|image=%%form_raw{DungeonMap2}%%
|max-width=675px
|max-height=650px
|float=right
]]

[[include :snippets:image
|image=http://www.thetelonproject.com/local--files/header-image-page/mapPHimage.jpg
|max-width=675px
|max-height=650px
|float=right

]]

Also… even though i deleted the "link' part of it out, its still creating a link to the page which holds the image.. and placing a annoying box around the image.. lol

Last edited on 03 Dec 2011 02:00 by Karii_vg + Show more

Re: images and data forms

RobElliott 03 Dec 2011 05:24

You can't just add your own variables like max-width to the default image box snippet as they haven't been set up in the snippet's backend code and css.

What you'll need to do is to copy the code from http://snippets.wikidot.com/image and http://snippets.wikidot.com/image-backend to pages on your own site, change the includes on the snippet and the image page to point to your pages and then in the image page set up a new variable and in the image-backend page (or whatever you are calling them) add the css variables. It works fine, I've done it on several sites where I need a change from the default snippet.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re: images and data forms

RobElliott 03 Dec 2011 05:27

To remove the "annoying box" and the default link you would change the css in your new image-backend page.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Last edited on 03 Dec 2011 05:27 by RobElliott + Show more