How to add an image to a post using Gravity Forms

In the previous tutorial we learned how to create a basic blogpost from a form using Gravity Forms. If you haven't created a form before, we strongly recommend that you work through this tutorial before moving on to this one.

In this tutorial we will learn how to add an image upload to a form so that anyone filling in the form can attach an image to their blogpost. When the form is added to the blog as a new post the image will be displayed in the post body.

This could be used in lots of ways, for example:

  • For children to evaluate technology projects including an image of their model;
  • By adding a picture of a piece of artwork to a post.
  • For creating a recipe blog with a picture of ingredients or the finished food;
  • To add to a book review blog by allowing the upload of a picture of the cover;
  • To add a form to an Early Years blog to take a picture of the class teddy when visiting home.

IMPORTANT NOTE

By adding an image uploader to a form you are giving a visitor to your site the ability to upload any kind of image that they want. The image may be copyrighted or inappropriate. The uploader cannot determine the nature of the image uploaded so it is essential to give guidelines in the form as to what kind of image may be uploaded. Furthermore, should a copyrighted image be published on the blog it is the blog site administrator (i.e. school) who would be liable for any breach.

Step 1: Create a form

Create a form in the normal way as per the previous tutorial. But in addition to Post Title, Post Body and Tags fields, select the Post Image field.

Step 2: Configuring the image uploader

Once you have added the Post Image to your form use the drop down arrow to open the options for the Post Image field.

By ticking the Image Metadata boxes you are asking the user to add a title, caption and description to the uploaded image. These are optional and if selected will appear as fields on the form for the user to fill in. By ticking "Set as Featured Image" the image uploaded will be set as the featured image for the blogpost - useful if the theme you are using for your blog utilises featured images. Ignore if it doesn't.

Step 3: Creating a Custom Template for the post body

In order to get the blogpost that results from someone submitting the filled in form it is necessary to create a template to tell the blog whereabouts in the post you want the image displayed. This would normally be part of the post body. Drop down the options for the Post Body field and tick the box titled "Create content template". This will reveal tow further boxes. The first, pre-filled to "Insert Merge Tag" and a larger box in which to insert merge tags. These can be typed in as follows:

{Post Image:4:medium:left}{Post Body:2}

Note:

  • If you would like the text to appear first you would put the Post Body tag before the Post Image tag;
  • You may change the size of the image displayed by using large, small or thumbnail instead of medium;
  • You may change the alignment by using right, center (note spelling) or none instead of left.

 

IMPORTANT

In some browsers it appears that when you click "Create Content Template" the correct fields do not appear. In order to resolve this, click "Update Form" after ticking the create content template box. Then open the details for the Post Body Field again. This then allows you to use the dropdown menu for the Insert Merge Tag field, from which you select "Post Image". This will reveal a further dropdown from which you can select image size and alignment.

 

You may now save your form and insert it into a blog post in the usual way.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk