David Slack - Web developer

ImageCache

Now to set up the main part of the image modules, we'll setup ImageCache

  1. Go to admin
  2. On the right hit 'ImageCache'

There will probably be only one preset for ImageCash at the moment and this is for the iTweak upload module. This preset will set up an images size for any image uploaded using iTweak upload. We won't touch this at the moment but we will create our own

From the image the user will upload we will create 4 images

  • one at 600px width by 300px height for the main image
  • one at 200px width by 200px height for the sub images
  • one at 950px width with any height for the full size image
  • one at 80px width by 80px for the teaser

We'll start with the main image

  1. Click the 'Add new preset' tab at the top
  2. Use the name 'main'
  3. Click the Save preset button at the bottom
  4. Click 'Add Scale' near the bottom
  5. In the width box type '600' and leave height blank
  6. Hit the 'Create action' button
  7. Click 'Add Javascript crop' under 'New Actions'
  8. In the width type '600'
  9. In the height type '300'
  10. X offset and Y offset is center
  11. Aspect ratio set to 'CROP'
  12. Cick the 'Is the toolbox reizable or not?' box
  13. Hit the 'Create action' button

Go back to admin -> ImageCache and you'll see your new preset (I'll show you how to use it later). Now the next preset

  1. Click the 'Add new preset' tab at the top
  2. Use the name 'full'
  3. Click the Save preset button at the bottom
  4. Click 'Add Scale' action near the bottom
  5. In the width box type '950' and delete everything in the height box
  6. Hit the 'Create action' button

Go back to admin -> ImageCache and we'll create the sub image

  1. Click the 'Add new preset' tab at the top
  2. Use the name 'sub'
  3. Click the Save preset button at the bottom
  4. Click 'Add Scale And Crop' near the bottom
  5. In the width box type '200' and in the height box type '200'
  6. Hit the 'Create action' button

Go back to admin -> ImageCache and you'll see your new preset. Now the last preset

  1. Click the 'Add new preset' tab at the top
  2. Use the name 'teaser'
  3. Click the Save preset button at the bottom
  4. Click 'Add Scale And Crop' near the bottom
  5. In the width box type '80' and in the height box type '80'
  6. Hit the 'Create action' button
NB. There is a problem with some of the ImageCache actions working with PHP 5.3. PHP 5.3 doesn't need the '&' on some of the variables used. If you find a problem when using watermark or one of the other acctions and your server uses PHP 5.3 then open 'sites/all/modules/imagecache_actions/imagecache_canvasactions.module' and search and replace &$image for $image and &$layer for $layer

Latest content

There are lots of developers out there with varying degrees of experience and expertise, some mid level, some junior and some senior. Some...
First thoughts are Symfony is ace!Only been using Symfony for 1 project but the amount of coding it has saved has been worth the time spent...
The Lost and Found website was built by myself (David Slack) and designed by Arm & Eye.The site was created to promote a bar and...

Social networks

Contact me here or catch me on one of
the social networks below


What I'm listening to

Off-site News

My blog

Wednesday, 2 August, 2017 - 06:56
There are lots of developers out there with varying degrees of experience and expertise, some mid level, some junior and some senior. Some developers...
Tuesday, 5 March, 2013 - 09:49
First thoughts are Symfony is ace!Only been using Symfony for 1 project but the amount of coding it has saved has been worth the time spent learning...
Monday, 3 December, 2012 - 10:07
As a web developer and web designer I need to take into account everything on a site from SEO, marketing, usability across devices, the look and feel...

Try this on your mobile

Use your QR reader to read this

You should be able to use this right from the screen

Latest tweets

Calendar

M T W T F S S
 
 
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
21
 
22
 
23
 
24
 
25
 
26
 
27
 
28
 
29
 
30
 
31
 
 
 
 
 
 

You are here

Back to top

Copyright David Slack - Web developer