Category: WordPress

Upload images to S3 via WordPress Plugin

A few years ago I blogged about creating an Adobe AIR app that would allow me to drag and drop images on it and automatically upload them to my blog server. The backend code would store the image and create a thumbnail. The WordPress plugin would display the images on the sidebar.

Since visiting AWS re:Invent, I started looking for a project to play around with some AWS services and decided it was time to create a new version of the “uploader”. The stack I used:

  • WordPress plugin
    • PHP
    • JS
  • S3 to store the images and thumbnails
  • SQS to get notified when the thumbnails are created
  • Lambda to generate thumbnails after an image is uploaded to S3

Concept

A WordPress plugin is configured to run on the sidebar. For a guest user, only the functionality to list images is loaded. This will make an API call to load all objects from the S3 bucket. In JS, we parse through all objects and display the newest x thumbnail images on the screen. Clicking on the image will load the original sized version.

The experience for the admin user is a bit different. That user sees a drag and drop area above the thumbnails. Upon dropping images on that spot, two progress bars are displayed. One shows the progress of images being uploaded to S3. The other shows the progress of thumbnails begin generated.

Guest View:

Admin View:

Uploading:

The Process

High level, this is what is happening:

  • Images are dropped on the WordPress plugin’s drag and drop area.
  • A call is made to upload those images to an S3 bucket using the AWS JS SDK.
  • The S3 bucket receives the image and when it’s completed, a Lambda function is triggered.
  • The Lambda function creates a thumbnail image and puts it in the thumbnail bucket.
  • When the thumbnail is fully received, that S3 bucket sends SQS a message with information about that image.
  • JS keeps checking back with SQS to check on completed images and when all images are done, resets the display and shows the new thumbnails.

Setup

S3

The first part of the process is to create two S3 buckets: one for the original sized images and the other for the thumbnails. The trickiest part here is to get permissions correct in AWS. We’ll need to attach the right policies. A lot of how I learned to configure this and how I got this to work comes from a hands-on training class from Quiklabs – Introduction to AWS Lambda.

Lambda

The purpose of the Lambda is to resize an uploaded image and store it in the thumbnail bucket.

SQS

We use SQS to track what thumbnails have been generated. When the Lambda is done, it sends a message to the SQS queue to let it know it’s finished.

WordPress Plugin

Nothing fancy here, just a WordPress plugin that shows recent images based on an API call to the S3 thumbnail bucket. It has a widget setup page to store the AWS connection strings.

Here is the repo: https://github.com/joeyrivera/wp-s3-images

Steps To Make This Happen

  • Setup S3
    • create two buckets
    • setup permissions
  • Create Lambda
    • configure the resize script
    • set it as a triggered event on the S3 bucket
    • setup permissions
  • Setup SQS
    • add event to receive from S3 resize bucket
    • setup permissions
  • Create WordPress plugin
    • create widget form
    • create settings page
    • drag and drop

Conclusion

If you want more details, leave a comment and I’ll do my best to answer your question or update this post with more.

Resources

WordPress Plugins

  • https://developer.wordpress.org/themes/basics/including-css-javascript/
  • https://wordpress.org/support/article/debugging-in-wordpress/

Drag and Drop JS

  • https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
  • https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/

AWS

  • https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html
  • https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/SQS.html
  • https://docs.aws.amazon.com/AmazonS3/latest/user-guide/enable-event-notifications.html
  • https://www.tothenew.com/blog/configuring-sns-notifications-for-s3-put-object-event-operation/
  • https://stackoverflow.com/questions/19176926/how-to-make-all-objects-in-aws-s3-bucket-public-by-default
  • https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html
  • https://run.qwiklabs.com/focuses/8613?parent=catalog
  • https://docs.aws.amazon.com/AmazonS3/latest/user-guide/enable-event-notifications.html#enable-event-notifications-how-to
  • https://aws.amazon.com/blogs/aws/new-for-aws-lambda-environment-variables-and-serverless-application-model/

Finally gave my blog a much needed face lift!

So what do you guys think? Does it look better now? It is not finished, I still need to tweak some graphics and colors but overall I’m very pleased. I started out with a new theme: Arclite by digitalnature. It has many customization options so I haven’t had to do too much tweaking of the .css files but there has been some. Since I blog so much about code, I finally stopped being lazy and got a code highlighter. I’m using: Dean’s Code Highlighter by Dean Lee. It’s very easy to use and supports a range of different code syntax such as PHP and Actionscript. One of the reasons I decided to update my look was because I have been running an older version of WordPress and it was about time to upgrade. I’m now running 2.9.1 and it looks great. I really like the new admin back office and it is so easy to use and setup.

I also created my first widgets! The ‘Interesting Links’ and ‘Interesting Images’ on the sidebar are no longer hacks done on the themes sidebar.php file. I learned how to create a plugin in WordPress and make it into a widget. Here is what one of the widgets looks like:

/*
Plugin Name: JR-Images
Plugin URI: http://www.joeyrivera.com
Description: Show my images
Version: 0.1
Author: Joey Rivera
Author URI: http://www.joeyrivera.com

  Copyright 2010  Joey Rivera  (email : joey1.rivera@gmail.com)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as 
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/
 
function show_images() 
{
	global $wpdb;
	
	$query = '
		SELECT image_file, image_origin, image_thumbnail
		FROM wp_images
		ORDER BY image_id DESC
		LIMIT 6';
	
	$results = $wpdb->get_results($query);
	
	if(!$results)
	{
		return;
	}
	echo '
  •  
    Interesting Images
    ';
	echo '
      ';
	foreach($results as $row)
	{
		echo '
      • ', "\n";
	}
	echo '
    ';
	echo '
     
    • ';
}
 
function register_images()
{
	register_sidebar_widget("JR-Images", "show_images");     
}
 
add_action("plugins_loaded", "register_images");

    I had to go back to all my old posts and make updates. If you find any issues anywhere, please let me know so I can fix it asap. I’ve found instances in code where there should be two && and instead the code blocks shows &&. I’m currently trying to figure out why my preview button doesn’t work, hopefully I’ll figure that out soon so I can move on to changing some colors around and finally updating my ‘About Me’ page. I hope to have some content in that page by the end of this weekend. Other than that, I hope you all enjoy the new look and am looking forward to hearing some feedback!

    Uploader Phase 2 complete!

    Here is a screen shot of the Uploader 0.1.0
    Uploader 0.2.0

    So today after work I decided it was about time to start working on phase two of my Uploader tool. Phase two consists of allowing me to drag and drop an image URL into the app so the app can then download the image to a folder in my server, create a thumbnail of this image, and update the WordPress database with information about the new image. The new image would then show up the next time a person visits my blog. If you notice, there is now a “Pics of Interest” section on the sidebar to the right of the page (similar to what people are doing with the flickr plugin). Every time I drag an image URL into the Uploader, the new image thumbnail will show in that area and if you click on the thumbnail you’ll see the full size image.

    It was actually much easier than I originally thought to make this work. Technically, the Uploader already has the drag/drop functionality and already takes in a URL. The only extra AS3 code was a check to see if the URL was an image and if so call the PHP page with a code (I’m passing –@IMAGE@– to know it’s an image – it was just the first thing that came to my head) so then PHP knows this URL should be treated as an image not just a URL. If you remember, phase 1 for the Uploader allows a person to drag/drop a URL into the app so it creates a new link under the “Links of Interest”. Continue reading “Uploader Phase 2 complete!”

    Joey’s WordPress Setup

    I’m going to list the changes I’ve made to WordPress to look and function the way it is today. This will probably change over time, but I feel as if it’s working pretty well right now. This information is for anyone trying to create something similar and for me to use as reference later if I need to recreate this again.

    The theme I’m using is Devart by deniart. The few mods I’ve made to this theme are:

    • Edited the /wp-content/themes/devart/images/author.gif (to show my pic instead of the default apple)
    • Modified the /wp-content/themes/devart/style.css to change the way <code>, <ul>, <li> look
    • Modified the style.css to add my twitter logo and link on the top right hand side of the page
    • Modified the header.php page to add my twitter logo and link to the top right hand side of the page
    • Had to add <?php wp_footer(); ?> to footer.php to launch stats code
    • Added img#wpstats{display:none} to style.css to hide the 🙂 from stats plugin

    I’ve also done the following to my setup:

    Uploader Phase 1

    Here is a screen shot of the Uploader 0.1.0
    Uploader 0.1.0

    If you missed the previous post explaining what Uploader is go check it out.

    So after having some fun with code I think I’m close to being done with phase 1.  I currently have a working beta (0.1.0) that I’m going to share with you all and explain what I’ve done in case anyone else wants to do something similar.  For the most part this was pretty straight forward.  There were a few hiccups here and there that I’ll try to address in this post. The link to the code will be at the end.

      Continue reading “Uploader Phase 1”

    Uploader: Automating WordPress Links and File Uploads

    So now that I’m starting to get my WordPress and new hosting server settled in I’m trying to think of what I can create to help me automate some tasks. One of the things I know I’ll be doing quite often is adding new links to the ‘Links of Interest’ on the front page.  I’ll also be uploading files/images to use on posts or to share with others but I’m too lazy to be ftping files constantly. So… time for a new tool!

    The Uploader (yeah I know, I’m very creative) is going to do all the above for me. This will be a app I can keep running on my desktop somewhere and when I need to upload a file or link I can just drag it over and drop it in. The tool will then figure out what kind of item was dropped in and what to do with it.

    Phase 1 will handle the links. The way the tool should work for links is the following.  I visit a page that I find interesting and want to add to the ‘Links of Interest’.  Instead of logging into WordPress to create it, I highlight the link from the address bar of the browser, drag it over to the app, and drop it. Now the app needs to figure out the <title> of that page to use as the name since we need a name and url to create a link. Once it has that, the tool will send the information to a PHP page which will do an insert to the links table in the WordPress DB.  

    Phase 2 will deal with images and files. I may break phase 2 into two since I may do some stuff differently with images versus other files.  I’m thinking I may want to upload images, create a thumbnail, and insert to a DB to display in the front page the same way some people do with their flickr images. Other files I would just upload and store somewhere else.  I’ll give this more thought when I get to it.

    I’m going to be writing the tool in Flash CS3/AIR with PHP in the backend using the current WordPress MySQL DB.  Stay tuned for updates!

    EDIT:

    Uploader Phase 1 completed 
    Uploader Phase 2 completed

    rtl.css?

    So I’m still learning to use WordPress and decided to style the default theme a bit. I went to the theme folder and opened up the first CSS file I found which was ‘rtl.css’. I added a background color to the <code> tag, saved the file, and refreshed my page… nothing. Tried it again and nothing. I went back to the theme folder and noticed a ‘style.css’ file. Opened that up, made changes to the <code> tag, saved and reloaded and it worked! So what’s this ‘rtl.css’ file? A quick Google search gave me the following answer:

    “rtl.css is called when you are using a language localization that reads from right to left (e.g., Arabic or Hebrew).” – source

    Well now I know and so do you.

    Setting up my WordPress

    So I’m using WordPress for the first time and I’m quickly learning that it’s neat and fun to play around with.  The documentation seems good and the code easy to work with.  I’m going to be tracking all the changes I make to the default installation of version 2.6.3 for reference.  I may need this information later or someone else might find helpful.

    So far I am using the default theme.  I’m sure I’ll eventually change it but for now I’m just trying to understand how things are structured and how to tweak elements on screen.  The WordPress Function Reference page was a great place to start.  My first goal was to figure out how to get my sidebar to display a list of projects and topics.  In the admin, I created a root level category called ‘Topics’ and another one called ‘Projects’.  Then I created a few other categories that were under either topics or projects such as ‘Flash’, ‘Cars’, ‘PHP’.

    Continue reading “Setting up my WordPress”