How To Add Image Uploading To Comments on WordPress

Allowing users to upload images and media to their comments on your WordPress site really opens up the possibilities for user engagement.

In this video, we take a look at how to add this feature to your site along with running through different options and configurations to get the functionality you really want.

Prefer to read the article?


00:00 Introduction
01:25 How to Install the DCO Comment Attachment Plugin
01:59 Overview of the DCO comment Attachment Plugin
03:43 Allow Users to Embed Images in WordPress Comments
08:21 Allow Users to Embed Videos and Media in WordPress Comments

–Top Resources–

⚡Use Promo Code WPBVIP⚡

►Best WordPress Contact Form Plugin
►Best WordPress Analytics Plugin
►Best Lead Generation Plugin
►Best WordPress SEO Plugin
►Best Theme Builder for WordPress

–Related Videos–
►WordPress Tutorial – How to Make a WordPress Website for Beginners
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor
►What is SEO and How Does it Work?
►How to Install a WordPress Theme

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Follow us on Twitter:

Check out our website for more WordPress Tutorials

#WPBeginner #WordPress #WordPressTutorial

If you run any kind of WordPress site That encourages visitors engagement Perhaps you have a membership site an E-commerce store or even a Blog where Users can comment on posts articles and Products then you may have realized that The WordPress commenting feature is a Little limited and by limited I mean Limited to text only Well there is a way to change all that And if that sounds like something you're Interested in this video is definitely For you so what we're going to do is We're going to open up the commenting Feature in WordPress to allow visitors To upload images to their comments make Sure you watch this video to the very End because it's not just images we Cover we're also going to look at how to Embed videos and other content in your Comments with the exact same plugin Let's Jump Right In so first things First this is the demo site we're going To be using for this video it's a Woocommerce based online store and this Is a product page on that store and if I Scroll down just a little bit You'll see right next to the description Here there's a place for people to leave Reviews So currently at the moment People can leave a star rating a comment Review their name and email address and Then click submit and that will show up Here on the left hand side so what we're

Going to do with this is open up the Functionality of commenting on this Website and allow users to upload images Videos of them using the products so That it gives a lot more social proof to The products that we're selling on our Site and hopefully will increase sales And Coach people to buy that product as Well so let's jump over to the WordPress Dashboard now we're in the dashboard First thing to do is to install the dco Comment attachment plugin so to do that We're going to head over to plugins Hover over that and click on add new Then up in the search bar up here just Write dco This is the dco comma attachment plugin Right here just click install now and Once that plugin is installed we're Going to click the activate button now We can see the plugins activated because We're on the plugins page and we can see It right here we can click the settings Link right here to get to the settings But also you can find that if you hover Over settings here dco comment Attachment is just here click on that Now we're going to go through each one Of these settings and I'm going to show You what that looks like on the live Site as well so you can see the Comparison of what these settings will Do to the comments section on that Product page so the first thing to look

At here is the maximum upload file size So that's currently set to 300 megabytes And as you can see it says currently Your server allows you to upload files Of up to 300 megabytes now this number Is going to change for you depending on The kind of media you're going to allow Your user to upload so if it's images And and things like that it might be a Smaller number you also have to think About the amount of server space that You have as well take that into Consideration when you've picked that Number so just put the number in there That you want below that you can see There's a question is the attachment Required so is the attachment required For the user to post the comment so if You want every comment to have an Attachment of an image or video or a Media file or a document or something Like that then just check this box right Here so now we move on to embed Attachment and if I just uncheck this Box right here and click save changes I'm going to show you what that looks Like on the website so I'm on site and Incognito window which means I'm not Logged in at all I'm just going to Refresh the page and what I'm going to Do is I'm going to quickly write a Comment and upload an image and show you What that looks like when it's not Embedded in the comment

Give it a five star review I had my name in And an email and just click the cheese File button and add your file so now I've added the file I can click the Submit button so as you can see the Comment has been posted here but there Is a link not an embedded image in the Comment so if you click on that it's Going to open the full image up and away From the site so I don't think this Looks very good I don't particularly Like how this looks on my site so I'm Going to change that so if I head back To the dashboard and now I'm on the Dashboard I'm just going to click on Embed attachment I'm going to go down to save changes Then head back to that page so now I'm Back on this page I'm just going to Refresh it and as you can see it looks Much better it's an embedded picture on The comment now we go back to the Dashboard so the auto embed links in Comments text I'm just going to leave That unchecked for a minute we'll look At this later on in the video The attachment image side so we Currently have it set to medium size you Can choose a thumbnail size and there Are other sizes that you can choose as Well I'm quite happy with the medium Size so I'm going to keep that so the Link thumbnail setting right here is

Basically if the user clicks on the Thumbnail in the comment so if you have A lightbox plug-in support on your Website you can choose that right there And then once the image is clicked on in The comment it'll open up in a nice Light box and people can see it in the Full size image I haven't got that Functionality I'm just going to leave it As it is Now we move on to the multiple uploads Section so if you check this box that's Going to allow them to upload multiple Files at once in their comments below That there's an option to combine the Images into a gallery and that's Currently checked I'm going to show you What that looks like right now on the Website I'm going to click and save Changes And on the site here I'm just going to Refresh this page I'm going to add in another review And then I'm going to choose multiple Files from my compute ad so I've chose Three image files right there I'm just Going to click submit Foreign Files are nicely displayed in that Comment there so that allows people to Upload multiple images in their comments And it looks really nice in a gallery Kind of form if you uncheck the box for Combined images into gallery and you

Just click save changes for that and we Refresh the page on the website now you Can see it's stacked the images on top Of each other there heading back to the Dashboard so I'm going to click combine The images into gallery and then you can Also choose the gallery image size so we Had it in a thumbnail size and it's Cropped the images you can choose to Have it in a medium size and that won't Crop the images this is what that looks Like on the page as well so it adds a Really nice Gallery feature to the Comments for images so keep that as it Is and then just below The multiple upload section is the Permissions and this is where it gets Really interesting so you can choose the Kind of files that people can upload to The comments so there's image files Audio files video files documents like PDFs psds And docs from word spreadsheet files Interactive files like PowerPoint files Text files archive files bits of code And other files as well just as a little Note here the one star Asterix next to Any of the files is available for Embedding so that means that you can Embed image files and audio files and Some video files as well and they will Show up as the as the embedded file in The comment rather than the link The two-star Asterix here is allowed for

Administrators and editors only so People that are logged into your site With the administrator or editor role That might be replying to comments that People leave on the website they have a Little bit more functionality than Everyone else Below that who can upload an attachment So at the moment we've got all users That can upload the attachment If I click on only logged in users and Click on Save changes and we go back to The website and we just refresh the page We can now see that as we're not logged In because we're using an incognito Window the upload feature has now been Taken away so only people that are Logged into the site can upload images Or embed videos and things like that Into their comments so that adds a Little bit more security and protection For you and gives the users that are Actually signed into the site a little Bit more features than everybody else so The next option I would totally Encourage everyone to check which is to Manually moderate the comments with Attachments so that means anyone that Uploads attachments to the website you Will have to manually check those Comments first and the attachments just In case there's anything that shouldn't Be uploaded to a comment that's been Uploaded and you can get rid of that

Before it even hits the website so I Will always check that box just so that You can see each comment before they go Out in the admin panel section of things Delete attachment when comment is Deleted so that if you don't want the Attachment to say in your media library If you delete the comments then keep That checked I'm going to keep it Checked and then delete attachment Action on the edit comments page I'll Keep that checked as well and save those Changes So now we've covered all the settings Apart from one which is the auto embed Links in comments text so I'm going to Check this box and that's going to allow Users to embed content from YouTube Facebook Twitter and other social media Platforms as well directly into their Comments so I'm just going to click save Changes on that and then show you what That looks like on the site as well so Scroll down to the comment section Add a reviewing and underneath that text I'm just going to add a link to a YouTube video And as you can see that's now embedded The YouTube video into the comment so we Can play that video directly in the Comments section so if someone's created A review for a product or has maybe has A support issue that needs addressing People can add links from their videos

From YouTube Facebook and things like That directly to the comments so they Don't have to upload the videos to your Site So as you can see that's a really Powerful tool to have in your WordPress Toolbox especially if you're running Sites where you're encouraging visitors To interact with you in the comments Speaking of comments drop us one below If you like this video If you fancy Learning more about WordPress then check This video out next and also subscribe To our Channel thanks for watching

You might like