Make Image Uploading Easier

I recently met some educators who were telling me how confusing and frustrating image uploading can be, especially for their students who are new to WordPress. I looked into possible plugins for them, but found that most of them only add on more features instead of creating a simpler interface. So, short of creating a new plugin, I came up with a solution that non-developers can implement.

This solution requires that you install the Advanced Custom Fields Plugin and that you know how to create a child theme. If you don’t , here are two great tutorials that walk you through it step by step:

http://wpmu.org/how-to-create-a-wordpress-child-theme-in-3-steps/
http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/

The Advanced Custom Fields Plugin allows us to create a new field in the Post Editor. It will let users upload an image with one click of the button. The image will then be automatically added to the post. Be aware though, that you will no longer be able to adjust the position of your images on a post by post basis. Image size also will be set once in the template and you will not be able to change it with every post. So overall, you and your contributors will have a little bit less flexibility, but you will end up with a more consistent design.

So here it is step by step:

Install and activate the Advanced Custom Fields Plugin. Then go to your dashboard and find the
Custom Fields tab on the right hand side. Click on it and the Field Groups page opens up. Click on ‘Add New’. Now enter a title for your field group. I named mine Post Fields because I am creating a new field on the posts editor screen. As soon as you do so a new form pops up. Create your image upload field by filling in the form as in the screenshot below.

Click to enlarge

Now click ‘Add Field’.
Next, under ‘Location’, you will specify where this custom field will go – in this case, to the post editor screen.

Click to enlarge

Now add your Options

Click to enlarge

Note: You can use the last section to remove other metaboxes from the post editor screen to make it less cluttered. This is especially useful if you are working with contributors who need not see all available options.

Click the ‘Publish’ button at the top right of your screen to save everything.

If you now go to a post to edit it you will see the image upload box below the WYSIWYG editor. Click on ‘Add Image’, navigate to your image on your computer or in the media library and click ‘Select image’.

Click to enlarge

Click to enlarge

 
You have now added an image to your post but if you view your post you will not see an image yet. To be able to see the image you need to add some code to your template files.

We will work on displaying your image in the single view first. In your dashboard, go tho Appearances > Editor, select your child theme on the upper right and find single.php (content-single.php if your parent theme is TwentyEleven). If your child theme does not have either of these two files, get a copy from your parent theme and place it in the child theme (See the link to tutorial about child themes above). Be sure it is named single.php (or content-single.php) not single-copy.php. Open it and find where it says ‘the_content()’. You want to paste the following code right above it.

<div id="content-image" style="float: right; padding: 5px 0 10px 10px;">
     <?php $image = wp_get_attachment_image_src(get_field('image_upload'), 'medium'); ?>
     <img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('image_upload')) ?>" />
</div>

Here is my template:

Click to enlarge

 
If you preview your post you will see that the image is displaying at the top.

Only one more thing remains: you will probably want to display the image on your blog page within the posts loop also. For that you will need to open the index.php file (in TwentyEleven use content.php). If they are not in your child theme get copies from your parent theme. In the file find ‘the_content()’ and paste the same lines of code right above it.

Click to enlarge

 
You are done. It is now really easy to upload a single image to a post.
If you want to be able to upload a second image, at the end of the post for example, you can follow this tutorial and do everything again from beginning to end. Just give your new field a different name and make sure that you use that name in the code that you paste into the templates. This time paste it right after the ‘the_content’ section.

Some additional hints:
If you want the image to allign on the left, use this code:

<div id="content-image" style="float: left; padding: 5px 10px 10px 0;">
     <?php $image = wp_get_attachment_image_src(get_field('image_upload'), 'medium'); ?>
     <img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('image_upload')) ?>" />
</div>

If you want the image to be centered above the text:

<div id="content-image">
     <?php $image = wp_get_attachment_image_src(get_field('image_upload'), 'medium'); ?>
     <img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('image_upload')) ?>" />
</div>

You can change the size of the image by replacing the word ‘medium’ in the code with ‘large’ or ‘thumbnail’. You can also just delete the word medium to show the image at its original size.

You can change what ‘medium, ‘large’ and thumbnail mean by going to your dashboard > Settings > Media and change the dimensions for each size. Note that a change in settings here will only affect future updates. It will not affect images that have already been uploaded to your blog.