PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Upload and Post Multiple Images

  1. 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!

    Posted 8 years ago on Wednesday August 17, 2011 | Permalink
  2. You can add multiple images in the same way as adding one, and use the content template to lay it out however you want.

    Posted 8 years ago on Wednesday August 17, 2011 | Permalink
  3. clc
    Member

    Thanks. I should be more clear. Can I have image 1 be formatted to the top left of the content and images 2/3/4 be sent to the bottom (of the content) middle?

    Thanks!

    Posted 8 years ago on Thursday August 18, 2011 | Permalink
  4. 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)

    Posted 8 years ago on Thursday August 18, 2011 | Permalink
  5. 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!

    Posted 8 years ago on Thursday August 18, 2011 | Permalink
  6. 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.

    Posted 8 years ago on Thursday August 18, 2011 | Permalink
  7. Just what I was looking for: works excellent :-)

    One more question I would have is if there is a way to make the images link to their own full size version?

    Thanks in advance!

    Posted 8 years ago on Friday August 19, 2011 | Permalink
  8. 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>
    Posted 8 years ago on Friday August 19, 2011 | Permalink
  9. 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!

    Posted 8 years ago on Friday August 19, 2011 | Permalink
  10. 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?

    Posted 8 years ago on Saturday August 20, 2011 | Permalink
  11. You can set the featured image (post thumbnail) using this code:

    http://www.gravityhelp.com/forums/topic/fatal-error-when-using-the_post_thumbnail-code-snippet#post-30918

    Posted 8 years ago on Saturday August 20, 2011 | Permalink
  12. clc
    Member

    Carl,
    I'm not quite understanding your answer on how to link to the original picture. Did you mean to type some code at the bottom of the post or am I just missing something?

    Thanks!

    Posted 8 years ago on Sunday August 21, 2011 | Permalink
  13. 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.

    Posted 8 years ago on Sunday August 21, 2011 | Permalink
  14. clc
    Member

    Makes sense! Thanks so much for the help.

    Posted 8 years ago on Sunday August 21, 2011 | Permalink
  15. You're welcome. Please post if you need additional assistance.

    Posted 8 years ago on Sunday August 21, 2011 | Permalink
  16. 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!

    Posted 8 years ago on Sunday August 21, 2011 | Permalink
  17. 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.

    Posted 8 years ago on Monday August 22, 2011 | Permalink
  18. clc
    Member

    Here ya go: http://www.pastie.org/2409603 . Thanks!

    Posted 8 years ago on Monday August 22, 2011 | Permalink
  19. http://pastebin.com/eVXjjGNv

    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 />.

    Posted 8 years ago on Monday August 22, 2011 | Permalink
  20. clc
    Member

    Works great! THANKS!!!!

    Posted 8 years ago on Monday August 22, 2011 | Permalink
  21. Outstanding. Thanks for the update.

    Posted 8 years ago on Monday August 22, 2011 | Permalink

This topic has been resolved and has been closed to new replies.