clc
Member
I'm new to GF (and suck at coding). Is it possible to upload multiple images to a user submitted post and arrange where all of the images go in the layout? I love the fact we can add one image to the post and make a template for that but what about multiple pictures?
Thank you very much!
You can add multiple images in the same way as adding one, and use the content template to lay it out however you want.
Of course. It can all be done within the content template. Here's a post I created using a form which accepted 4 images:
http://gravity.chrishajer.com/2011/08/17/rufus/
Here's the form that created it:
http://gravity.chrishajer.com/submit-dog-photos/
Here's the content template that I used for this form:
[html]
{Best photo:3:medium:left}{Give us a little background on your dog:2}<br style="clear:both;" /><div class='dogthumbs'>{Photo 2:4:thumbnail}{Photo 3:5:thumbnail}{Photo 4:6:thumbnail}<br class="clear:both;" /></div>I wrapped the thumbnails in a div so I could style it and override the default styles for my theme. You could wrap the whole thing in a div if you wanted to control everything. I just wanted control over the layout of the thumbnails.
It's all completely doable. You just need to do a little layout work in your content template. I had to add a little bit to my style.css as well:
[css]
div.dogthumbs {
height: 180px;
}
.dogthumbs img {
display:inline;
margin-right: 30px;
float:left;
}(I exported and uploaded the form here so you can import it if you want to see how it was all put together. Direct download link)
clc
Member
Yes! AWESOME! I can't test this out until later but the sample page plus .css/content code seems to make sense.
The only question I have is how do you label it so the first picture is "Best photo" etc. and what exactly does the "4" after the first colon in "{Photo 2:4:thumbnail}" represent? I see you changed it from "4" to "5" and then to "6".
I'm at work and can't download anything or I'm sure it'd clearer.
Thanks!
The 4 in {Photo 2:4} is the field id. It's very important. You can use the "Insert form field" drop down to insert these merge tags so you shouldn't have to know the field id's, it inserts them for you.
If you want to link to the original full size image you would have to add the link by building the link yourself and using an undocumented option on the merge tag :url for the post image field for the full size image you want.
It would be like this [EDITED 8/21/2011]:
<a href="{Post Image:3:full:url}">{Post Image:3:medium}</a>Thanks for the quick reply Carl!
I followed another route: for the images I only place the native WordPress [gallery link="file] tag in the content template, which also happens to work great with the FancyBox Gallery plugin.
You guys keep surprising me with such great features!
This is exactly what I'm working on right now...You can also add youtube videos with just the video url...use the custom field...something like this [embed]{Youtube Url:8}[/embed]
Is there a way to use the featured image option? For example can my form grab the image and use it for the featured image with my theme?
You can set the featured image (post thumbnail) using this code:
clc, I edited Carl's post to show the full code. Basically you craft your own HTML using the merge tag you can see, plus the undocumented one to get the URL.
You're welcome. Please post if you need additional assistance.
clc
Member
Ok tested this out with this code: " {Post Title:1}
{Post Image:7:thumbnail:right}
{Post Body:9} " and when it posts, the thumbnail links to "http://mywebsite.com/ <img width=" (with a space after the / and after img). Also, under the title it has a link that just reads: "> (including the quotation). It makes me think that the thumbnail link and link under the title are obviously related but I'm too dumb to figure out how to fix this.
Am I doing something wrong here? The image ID is "7".
Thanks!
I don't think you are doing anything wrong really. But to figure out what you're doing exactly I need you to post your complete content template at http://www.pastie.org or http://www.pastebin.com so I can view it without any formatting. Some of the formatting is interpreted here and makes things difficult to troubleshoot.
Thank you.
clc
Member
Here ya go: http://www.pastie.org/2409603 . Thanks!
I forgot the size in the link (what we're linking to). The link should look like this:
<a href="{Post Image:7:full:url}">{Post Image:7:thumbnail:right}</a>Note the "full" in there between the 7 and url.
Sorry about that.
p.s. I also changed all the < br > to XHTML valid < br />.
Outstanding. Thanks for the update.