Spin a AWS server from a disk image

I was able to successfully create an AMI (Amazon Mirror Image) of the Laravel server that I just created. I launched it and it worked perfectly. Creating an image from a running instance is quite easy. Just go the EC2 Dashboard. Select Instances and choose the Instance you want to clone. Go to Actions and select Create Image. It takes several minutes to create an image. Once the AMI is created, you can launch another instance using the AMI that you just created. It took close to 3-5 minutes before the server was able to serve Laravel page that was recently installed. In the future, if I want to launch a clean Laravel install, I can just launch an instance based on the AMI I just created.

Dynamic CSS Buttons

I was searching for buttons the other day that I could use for a project. I wanted something flexible, something that could easily be customized for any project. The buttons have to be dynamic and they need to be generated fairly quickly.

This means no buttons that contain text images, no buttons that contain color images. The text needs to be supplied from the source (HTML) as well as the background color from CSS.

This dynamic button needs to be generated on fly, with the flexibility to use it multiple times within a page or the whole website. This sounds like a tall order to me.

Enter a tutorial by Soh Tanaka, a web designer from Los Angeles that I found while searching online. He wrote “Liquid & Color Adjustable CSS Buttons.” The tutorial is actually quite good. He shares how a button can be quickly generated using the supplied anchor text and as well any CSS background color.

A couple of examples.

I love the buttons,  but I found a couple of issues. The buttons doesn’t really work as a Submit button. You’re going to have to use Javascript to send your form if you use this example. The other issues is you can’t really resize the button, since it’s constrained to single supplied image that’s generated for every button.

These buttons are definitely useful tools for creating sites, but it does have its limitations. One more thing, I want to try if this works with HTML4’s button tag as opposed to just using the input tag.

Upgrade Your Theme To Support WordPress 2.9

WordPress 2.9 is just around the corner. It will be here before we know it. There are a number of new features in WordPress 2.9. The inclusion of “post thumbnails” is first and foremost. It allow bloggers to upload thumbnail images associated with their posts. Theme designers and users have several choices as to what thumbnail image size to display, whether the default thumbnail size, medium, large or full, the original size uploaded.

Another feature that has made it to WordPress 2.9 is the addition of the trash feature for posts, pages and comments. It’s similar to the trash can feature found in Windows and Linux operating systems. It allow bloggers to recover posts, pages and comments that were previously deleted.

Also included with WordPress 2.9 is the addition of the basic image editing features in the Media Library. Users will be able to rotate, crop, flip and scale an image. This particular post focuses on what you need to do to get your theme supported in WordPress 2.9. I will show you how to make changes in your current theme to support the thumbnail images.

To activate thumbnail support, you need to add this line of code to functions.php.

add_theme_support('post-thumbnails');

Next, you need to edit your index.php and single.php pages or any page where you want the thumbnail images to be displayed. Add this line of code.

<?php the_post_thumbnail( 'post-thumbnail' ); ?>

For medium size:

<?php the_post_thumbnail( 'medium'); ?>

For large size:

<?php the_post_thumbnail( 'large'); ?>

For full image:

<?php the_post_thumbnail( 'full'); ?>

That’s it. Get a head start. Make your theme changes now.

Batch Watermark Images Using ImageMagick

In my previous post, I talked about using ImageMagick to resize images in a batch process. In this post, I’ll talk about leaving watermarks on images in a batch process. First of all, what is a watermark? A watermark is an image or text that appears on paper or photographs to prevent counterfeiting or for giving a photographer credit or ownership. It’s one way of getting recognition when distributing one’s artwork.

Let’s say you have a bunch of images about 30 or so needing a watermark. They all have an extension of JPG located in one directory or folder. First, if you haven’t already done so, install ImageMagick by typing in the Terminal:

sudo apt-get intall imagemagick

Once you have ImageMagick installed, change directory to the folder where your images are located.

We will use the convert command to leave a text watermark at the bottom of each image. I will go over each of the options one by one. We will put all the options together in the end.

Convert all images with a JPG extension

convert *.JPG

Use the Arial font

convert *.JPG -font Arial

Use a fontsize of 16

convert *.JPG -font Arial -pointsize 16

Place the watermark at the bottom center of each image

convert *.JPG -font Arial -pointsize 16 -draw gravity south

You can place your watermark text anywhere you want it, for example at the top of the image, the side or at the corner. I placed it in the bottom center. It’s just a personal preference.

Write a black text at position 0,12 supplied inside a single quote.

convert *.JPG -font Arial -pointsize 16 -draw "gravity south
fill black text 0,12 'Photos by: Ulysses'"

By the way, the command is all on one line. I placed it on several lines for readability.

Write a white text at position 1,11 supplied inside a single quote.

convert *.JPG -font Arial -pointsize 16 -draw "gravity south
fill black text 0,12 'Photos by: Ulysses'
fill white text 1,11 'Photos by: Ulysses'"

The reason we are writing black and white text that are slightly offset is for our watermark text to display regardless of background color. It’s a technique similar to creating a drop shadow. This ensures your watermark text is readable regardless of the color of the background image.

Finally, name the watermarked images in this format.

convert *.JPG -font Arial -pointsize 16 -draw "gravity south
fill black text 0,12 'Photos by: Ulysses'
fill white text 1,11 'Photos by: Ulysses'"
watermark.JPG

The watermarked images will be written as watermark-0.JPG, watermark-1.JPG, watermark-2.JPG and so forth. So, there you have it. You just watermarked 30 or so images in a batch process using ImageMagick.

Prevent Others From Hotlinking

You can stop others from hotlinking on your site with the use of the .htaccess file in Apache. Hotlinking is when others are directly linking to an image or a file on your server. It’s bad because, they are using your server’s resources and bandwidth for free. You can edit your .htaccess file usually located in your root directory. If you don’t have one, just create one. It must start with a period, .htaccess. Enter this code:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpe [L]

Read more.