Manipulating Images
Date: 28-02-2008 09:31 Views: 814
MonkeyCMS has inbuilt support to allow you to upload, manipulate and protect your images when posted to your website. You can easily prevent any unauthorised site from accessing your images - either replacing them with a lower quality version, a watermarked image, a different image entirely or just preventing them displaying altogether.
You can resize images at 'runtime' so that you can upload an image at one size and then let MonkeyCMS handle the resizing (and subsequent caching) just by manipulating the image URL.
Each admin user gets their own image directory to store their images in and users with Superuser permissions can access anyone's directory to upload, view and delete images.
Images can be included within content with a few simple clicks - you can even upload images from the content add/edit screen.
Configuring Images
To enable image support you must firstly set up a suitable directory on your server. It would be preferable for this directory to be in an area that is NOT accessible from the internet - this is for optimal protection of your images, if they can be seen from the internet then protecting them is pretty pointless!
Secondly you must ensure that this directory is writable by the web server account on your server. This usually involves running the following command via SSH or Telnet on your server:
chmod 755 /path/to/your/image/directory
If you do not have shell access to your server, most FTP packages such as FileZilla allow you to alter the permissions of a directory.
Once you have done this, you must configure MonkeyCMS to know where to look to upload and display images. There are a number of options in the Site Settings screen that need to be set up to ensure images are handled how you want them.
Start by entering the full path to the directory you have just created in the Protected Images Directory field. Do not include the trailing slash. Setting up basic image support is that simple - from now on you'll be able to use the inbuilt MonkeyCMS tools for uploading and displaying your images.
However, there are various other options available to you...
Protecting Your Images
Why would you want to prevent other sites from displaying images from your server? The simple answer is that it ensures you are in control over the bandwidth your site uses - if a particularly popular site decides to link to your images, you might find that they use up all of your available bandwidth, or worse, you end up with a massive bill. Therefore you may want to prevent sites from linking to images on your site - there's nothing you can do about them saving them and using them, but you can prevent them stealing your bandwidth when doing it!
In the Site Settings screen locate the 'Protect Images' option and set it to 'Yes'. Once this option is saved, only sites listed in the 'Site Aliases' box at the bottom of the Site Settings page will be able to display images from your site. You need to ensure that every possible version of your website address is included in this Site Aliases box. You can override this setting on an image-by-image basis and remove protection from images if you wish.
How you want to handle protection is up to you. MonkeyCMS provides four options in the 'Protect Images Action' dropdown - Display Nothing, Display Thumbnail, Display Low Quality and Display Alternative.
Display Nothing
This is the most bandwidth friendly option. Instead of serving an image, your site will just return a '404' error and nothing will be shown. This is the most basic option and requires the least configuration.
Display Thumbnail
This is a little more detailed - it allows the external site to display a low quality thumbnail with a red border. This reduces your bandwidth and at the same time provides the external site with a basic 'idea' of the image. You can control the thumbnail size by entering the appropriate values (either Width or Height; Width takes precedence).
Display Low Quality
This is another bandwidth-saver. You can output a very low quality version of the image - the image is actually resized and output at a JPEG quality threshold you define (set as 1 by default). This gives the external site a very poor quality image and saves on your bandwidth. Depending on the image complexity and JPEG quality setting, you may find the image is still identifiable but it will be next-to-useless for the external site.
Display Alternative
This final option allows you to serve up a completely different image - maybe one telling the external site that it's rude to hotlink and steal bandwidth, or maybe one that directs viewers of the external site to your URL. You can specify any image in the 'Alternative Image' field - just put the full server path to the image you wish to use.
Watermarking Images
One way of preventing your images from being saved and used elsewhere is to add a watermark. While you can do this manually via any graphics application, MonkeyCMS allows you to apply a watermark to any image at runtime. To configure this, first you must create an image to use as your watermark - we recommend creating a transparent PNG file as this is best suited to creating a good quality final image.
For this example we will use the following image as our watermark:
Upload the watermark file to any location on your server - preferably one that is not web accessible and then enter the full path to this file into the Watermark Image field in your site settings. Determine where you would like the watermark to appear on your image and select that option in the Watermark Position field. We want the watermark to be semi-transparent, so ensure that the Watermark Level value is set at a reasonable level; we will set it to 30 for this example.
Once this is configured you can apply a watermark to any image you upload. Just click on the 'Watermark' checkbox when uploading or on the View/Edit Images screen. The main image is stored in a raw format on your server, so you can choose to turn the watermark on or off at any time. Once you have uploaded an image and turned on its watermark it will looks something like this:
Image Manipulation via the URL
One of the most powerful aspects of MonkeyCMS is it's ability to control how images are displayed via the URL used to display the image. The basic image display URL looks like this:
http://www.yoursite.com/protectedimage.php?image=imagepath/imagefilename.jpg_29112007
The above URL would display the image directly from the server with no manipulation (as long as the protection requirements are met).
There are a number of additional parameters you can add. As of Version 1.2.6 these are:
Image Caching
Processing images, particularly large images, is a server-intensive process. In order to ensure that your MonkeyCMS site is as quick as possible the image manipulation uses a caching mechanism to store copies of manipulated images on your server and therefore prevent the need to carry out processing on every display. If you change any of your image settings you may find you need to flush all of your caches to ensure that images are correctly displayed.
You can resize images at 'runtime' so that you can upload an image at one size and then let MonkeyCMS handle the resizing (and subsequent caching) just by manipulating the image URL.
Each admin user gets their own image directory to store their images in and users with Superuser permissions can access anyone's directory to upload, view and delete images.
Images can be included within content with a few simple clicks - you can even upload images from the content add/edit screen.
Configuring Images
To enable image support you must firstly set up a suitable directory on your server. It would be preferable for this directory to be in an area that is NOT accessible from the internet - this is for optimal protection of your images, if they can be seen from the internet then protecting them is pretty pointless!
Secondly you must ensure that this directory is writable by the web server account on your server. This usually involves running the following command via SSH or Telnet on your server:
chmod 755 /path/to/your/image/directory
If you do not have shell access to your server, most FTP packages such as FileZilla allow you to alter the permissions of a directory.
Once you have done this, you must configure MonkeyCMS to know where to look to upload and display images. There are a number of options in the Site Settings screen that need to be set up to ensure images are handled how you want them.
Start by entering the full path to the directory you have just created in the Protected Images Directory field. Do not include the trailing slash. Setting up basic image support is that simple - from now on you'll be able to use the inbuilt MonkeyCMS tools for uploading and displaying your images.
However, there are various other options available to you...
Protecting Your Images
Why would you want to prevent other sites from displaying images from your server? The simple answer is that it ensures you are in control over the bandwidth your site uses - if a particularly popular site decides to link to your images, you might find that they use up all of your available bandwidth, or worse, you end up with a massive bill. Therefore you may want to prevent sites from linking to images on your site - there's nothing you can do about them saving them and using them, but you can prevent them stealing your bandwidth when doing it!
In the Site Settings screen locate the 'Protect Images' option and set it to 'Yes'. Once this option is saved, only sites listed in the 'Site Aliases' box at the bottom of the Site Settings page will be able to display images from your site. You need to ensure that every possible version of your website address is included in this Site Aliases box. You can override this setting on an image-by-image basis and remove protection from images if you wish.
How you want to handle protection is up to you. MonkeyCMS provides four options in the 'Protect Images Action' dropdown - Display Nothing, Display Thumbnail, Display Low Quality and Display Alternative.
Display Nothing
This is the most bandwidth friendly option. Instead of serving an image, your site will just return a '404' error and nothing will be shown. This is the most basic option and requires the least configuration.
Display Thumbnail
This is a little more detailed - it allows the external site to display a low quality thumbnail with a red border. This reduces your bandwidth and at the same time provides the external site with a basic 'idea' of the image. You can control the thumbnail size by entering the appropriate values (either Width or Height; Width takes precedence).
Display Low Quality
This is another bandwidth-saver. You can output a very low quality version of the image - the image is actually resized and output at a JPEG quality threshold you define (set as 1 by default). This gives the external site a very poor quality image and saves on your bandwidth. Depending on the image complexity and JPEG quality setting, you may find the image is still identifiable but it will be next-to-useless for the external site.
Display Alternative
This final option allows you to serve up a completely different image - maybe one telling the external site that it's rude to hotlink and steal bandwidth, or maybe one that directs viewers of the external site to your URL. You can specify any image in the 'Alternative Image' field - just put the full server path to the image you wish to use.
Watermarking Images
One way of preventing your images from being saved and used elsewhere is to add a watermark. While you can do this manually via any graphics application, MonkeyCMS allows you to apply a watermark to any image at runtime. To configure this, first you must create an image to use as your watermark - we recommend creating a transparent PNG file as this is best suited to creating a good quality final image.
For this example we will use the following image as our watermark:
Upload the watermark file to any location on your server - preferably one that is not web accessible and then enter the full path to this file into the Watermark Image field in your site settings. Determine where you would like the watermark to appear on your image and select that option in the Watermark Position field. We want the watermark to be semi-transparent, so ensure that the Watermark Level value is set at a reasonable level; we will set it to 30 for this example.
Once this is configured you can apply a watermark to any image you upload. Just click on the 'Watermark' checkbox when uploading or on the View/Edit Images screen. The main image is stored in a raw format on your server, so you can choose to turn the watermark on or off at any time. Once you have uploaded an image and turned on its watermark it will looks something like this:
Image Manipulation via the URL
One of the most powerful aspects of MonkeyCMS is it's ability to control how images are displayed via the URL used to display the image. The basic image display URL looks like this:
http://www.yoursite.com/protectedimage.php?image=imagepath/imagefilename.jpg_29112007
The above URL would display the image directly from the server with no manipulation (as long as the protection requirements are met).
There are a number of additional parameters you can add. As of Version 1.2.6 these are:
- width
The width parameter is used to proportionally resize the image based on the width provided. If image on your server is 500 pixels wide, but you want to resize it while reducing filesize and preserving quality, you could add width=300 to the URL to reduce the image width to 300 pixels. The height would adjust proportionally. Width takes precedence over height and only one of these two parameters is required.Example
http://www.monkeycms.com/protectedimage.php?image=ColinPolonowski/nightbeach.jpg_29112007&width=300 - height
The height parameter is used to proportionally resize the image based on the height provided. If image on your server is 500 pixels high, but you want to resize it while reducing filesize and preserving quality, you could add height=150 to the URL to reduce the image height to 150 pixels. The width would adjust proportionally. Width takes precedence over height and only one of these two parameters is required.Example
http://www.monkeycms.com/protectedimage.php?image=ColinPolonowski/nightbeach.jpg_29112007&height=150 - ifbigger
As images could be stored at any number of sizes, there maybe times where you only want images bigger than a certain size to be resized, preventing smaller images from being enlarged. To do this, just add ifbigger=true to the URL. - rotate
Allows you to rotate the image through any specified number of degrees. If the image is stored on your server in landscape you want to display it in portrait then all you need to do is add rotate=90 to the URL. If an image is to be resized, this occurs prior to the rotate.Example
http://www.monkeycms.com/protectedimage.php?image=ColinPolonowski/nightbeach.jpg_29112007&rotate=45 - quality
You can adjust the output quality of the processed images - all images that are manipulated are output as JPEG files and therefore you can reduce their filesize by altering the compression threshold (1 is high compression, low quality while 100 is low compression, high quality). For example you could reduce the quality to 10 by adding quality=10 to the URL.Example
http://www.monkeycms.com/protectedimage.php?image=ColinPolonowski/nightbeach.jpg_29112007&quality=10 - thumb
This is a handy parameter that generates a thumbnail of the dimensions specified in your site settings. Unlike the thumbnail displayed when an image is accessed by an unauthorised site, this thumbnail has a black border and is of a higher quality. To generate a thumbnail, just add &thumb=true to the URL. You can even allow external sites to display these thumbnails if the 'Allow External Thumbnails' option is set to Yes in your site settings.Example
http://www.monkeycms.com/protectedimage.php?image=ColinPolonowski/nightbeach.jpg_29112007&thumb=true
Image Caching
Processing images, particularly large images, is a server-intensive process. In order to ensure that your MonkeyCMS site is as quick as possible the image manipulation uses a caching mechanism to store copies of manipulated images on your server and therefore prevent the need to carry out processing on every display. If you change any of your image settings you may find you need to flush all of your caches to ensure that images are correctly displayed.