Tag: 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!

    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:

    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”