opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Run prettier on all *.md files

Browse source 
```
prettier '{app,source}/**/**.md' --write
```
This commit is contained in:
Oliver Davies 2020-03-08 17:52:59 +00:00
parent a3ceeaf0f3
commit 85a10c545b
170 changed files with 5127 additions and 2282 deletions
Download patch file Download diff file Expand all files Collapse all files

39
source/_posts/using-imagecache-and-imagecrop-my-portfolio.md
View file

@ -1,7 +1,8 @@
---
title: Using ImageCache and ImageCrop for my Portfolio
date: 2010-04-28
excerpt: How to create thumbnail images using the ImageCache and ImageCrop modules.
excerpt:
How to create thumbnail images using the ImageCache and ImageCrop modules.
tags:
- drupal
- drupal-6
@ -10,21 +11,35 @@ tags:
- imagecrop
- imagefield
---
Whilst working on my own portfolio/testimonial website, I decided to have a portfolio page displaying the name of each site and a thumbnail image. For this Blog post, I'll be using a site called [Popcorn Strips](http://popcornstrips.com) which I built for a friend earlier this year as an example.
I created a content type called 'Project' with a CCK ImageField called 'Screenshot'. I created a project called [Popcorn Strips](http://popcornstrips.com), used the [ScreenGrab](https://addons.mozilla.org/addon/1146) add-on for Mozilla Firefox to take a screenshot of the website, and uploaded it to the project node.
Whilst working on my own portfolio/testimonial website, I decided to have a
portfolio page displaying the name of each site and a thumbnail image. For this
Blog post, I'll be using a site called
[Popcorn Strips](http://popcornstrips.com) which I built for a friend earlier
this year as an example.
I created a View to display the published projects, and an ImageCache
preset to create the thumbnail image by scaling and cropping the image
to a size of 200x100 pixels.
I created a content type called 'Project' with a CCK ImageField called
'Screenshot'. I created a project called
[Popcorn Strips](http://popcornstrips.com), used the
[ScreenGrab](https://addons.mozilla.org/addon/1146) add-on for Mozilla Firefox
to take a screenshot of the website, and uploaded it to the project node.
Although, this automatically focused the crop on the centre of the image, whereas I wanted to crop from the top and left of the image - showing the site's logo and header.
I created a View to display the published projects, and an ImageCache preset to
create the thumbnail image by scaling and cropping the image to a size of
200x100 pixels.
I installed the [ImageCrop](http://drupal.org/project/imagecrop) module, which add a jQuery crop function to the standard ImageCache presents. I removed the original Scale and Crop action and replaced it with a Scale action with a width of 200px.
Although, this automatically focused the crop on the centre of the image,
whereas I wanted to crop from the top and left of the image - showing the site's
logo and header.
I installed the [ImageCrop](http://drupal.org/project/imagecrop) module, which
add a jQuery crop function to the standard ImageCache presents. I removed the
original Scale and Crop action and replaced it with a Scale action with a width
of 200px.
I then added a new 'Javascript crop' action with the following settings:
* Width: 200px
* Height: 100px
* xoffset: Left
* yoffset: Top
- Width: 200px
- Height: 100px
- xoffset: Left
- yoffset: Top