2017-07-10 21:28:39 +00:00
<!DOCTYPE html>
< html class = "no-js" lang = "en-GB" >
< head >
< title > Using ImageCache and ImageCrop for my Portfolio | Oliver Davies< / title >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2017-07-21 17:44:18 +00:00
< meta property = "og:url" content = "https://www.oliverdavies.uk/blog/2010/04/28/using-imagecache-and-imagecrop-my-portfolio/" >
2017-07-10 21:28:39 +00:00
< meta property = "og:title" content = "Using ImageCache and ImageCrop for my Portfolio" / >
2017-07-12 06:22:51 +00:00
< meta property = "og:image" content = "https://www.oliverdavies.uk/assets/images/me-precedent.jpg" / >
2017-07-10 21:28:39 +00:00
< meta property = "og:image:height" content = "327" / >
< meta property = "og:image:type" content = "image/jpg" >
< meta property = "og:image:width" content = "327" / >
2017-07-12 06:22:51 +00:00
< link rel = "stylesheet" href = "https://www.oliverdavies.uk/assets/css/main.css" >
2017-07-14 22:11:03 +00:00
2017-07-10 21:28:39 +00:00
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=57" sizes = "57x57" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=114" sizes = "114x114" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=72" sizes = "72x72" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=144" sizes = "144x144" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=60" sizes = "60x60" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=120" sizes = "120x120" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=76" sizes = "76x76" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=152" sizes = "152x152" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=160" sizes = "160x160" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=96" sizes = "96x96" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=32" sizes = "32x32" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=16" sizes = "16x16" >
< / head >
< body class = "" >
< nav class = "navbar navbar-inverse navbar-fixed-top" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#navbar" aria-expanded = "false" aria-controls = "navbar" >
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
2017-07-12 06:22:51 +00:00
< a class = "navbar-brand" href = "https://www.oliverdavies.uk/" > Oliver Davies< / a >
2017-07-10 21:28:39 +00:00
< / div >
< div id = "navbar" class = "collapse navbar-collapse" role = "navigation" >
< ul class = "nav navbar-nav" >
< li class = "" >
< a href = "/" > About< / a >
< / li >
< li class = "" >
< a href = "/experience" > Experience< / a >
< / li >
< li class = "" >
< a href = "/testimonials" > Testimonials< / a >
< / li >
< li class = "" >
< a href = "/talks" > Talks< / a >
< / li >
< li class = "active" >
< a href = "/blog" > Blog< / a >
< / li >
< li class = "" >
< a href = "/contact" > Contact< / a >
< / li >
< / ul >
< / div > < / div >
< / nav >
< div class = "container" >
< div class = "row" >
< main class = "col-md-9" >
< h1 > Using ImageCache and ImageCrop for my Portfolio< / h1 >
2017-07-11 17:57:51 +00:00
< p class = "posted text-light" > 28th April 2010< / p >
2017-07-10 21:28:39 +00:00
< p > 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 < a href = "http://popcornstrips.com" > Popcorn Strips< / a > which I built for a friend earlier this year as an example.< / p >
< p > I created a content type called 'Project' with a CCK ImageField called 'Screenshot'. I created a project called < a href = "http://popcornstrips.com" > Popcorn Strips< / a > , used the < a href = "https://addons.mozilla.org/addon/1146" > ScreenGrab< / a > add-on for Mozilla Firefox to take a screenshot of the website, and uploaded it to the project node.< / p >
< p > 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.< / p >
< p > 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.< / p >
< p > I installed the < a href = "http://drupal.org/project/imagecrop" > ImageCrop< / a > 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.< / p >
< p > I then added a new 'Javascript crop' action with the following settings:< / p >
< ul >
< li > Width: 200px< / li >
< li > Height: 100px< / li >
< li > xoffset: Left< / li >
< li > yoffset: Top< / li >
< / ul >
< p class = "tags" >
Tags:
2017-07-12 06:22:51 +00:00
< a href = "https://www.oliverdavies.uk/blog/tags/drupal" > drupal< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/drupal-6" > drupal-6< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/cck" > cck< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/imagecache" > imagecache< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/imagecrop" > imagecrop< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/imagefield" > imagefield< / a > < / p >
2017-07-10 21:28:39 +00:00
< div class = "post-pager is-flex" >
< div class = "is-half" >
2017-07-21 17:44:18 +00:00
< a href = "/blog/2010/04/05/style-drupal-6s-taxonomy-lists-php-css-and-jquery/" >
2017-07-10 21:28:39 +00:00
« Style Drupal 6' s Taxonomy Lists with PHP, CSS and jQuery
< / a >
< / div >
< div class = "is-half text-right" >
2017-07-21 17:44:18 +00:00
< a href = "/blog/2010/05/06/conditional-email-addresses-webform/" >
2017-07-10 21:28:39 +00:00
Conditional Email Addresses in a Webform »
< / a >
< / div >
< / div >
< div class = "about-author" >
< h2 > About the Author< / h2 >
2017-07-12 06:24:51 +00:00
< img src = "//www.oliverdavies.uk/assets/images/me-precedent.jpg" alt = "Picture of Oliver" class = "img-circle" >
2017-07-10 21:28:39 +00:00
< p > Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a Senior Developer at < a href = "https://microserve.io" > Microserve< / a > and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.< / p >
< / div >
< / main >
< div class = "col-md-3" >
< div class = "panel badges text-center" >
2017-07-21 17:44:18 +00:00
< a href = "https://assoc.drupal.org/membership" title = "I’ class = "is-block" >
2017-07-10 21:28:39 +00:00
< img
2017-07-21 17:44:18 +00:00
src="//www.oliverdavies.uk/assets/images/badges/da-individual-member.png"
2017-07-10 21:28:39 +00:00
alt="Drupal Association Individual Member"
2017-07-21 17:44:18 +00:00
width="200"
/>
2017-07-10 21:28:39 +00:00
< / a >
2017-07-21 17:44:18 +00:00
< div class = "is-flex align-items-center" >
2017-07-10 21:28:39 +00:00
< img
2017-07-21 17:44:18 +00:00
src="//www.oliverdavies.uk/assets/images/badges/acquia-d8-developer.png"
alt="Acquia Certified Developer - Drupal 8 Exam Badge"
class="is-2"
/>
2017-07-10 21:28:39 +00:00
2017-07-21 17:44:18 +00:00
< img
src="//www.oliverdavies.uk/assets/images/badges/acquia-d8-back-end.png"
alt="Acquia Certified Back End Specialist - Drupal 8 Exam Badge"
class="is-2"
2017-07-10 21:28:39 +00:00
/>
2017-07-21 17:44:18 +00:00
< / div >
2017-07-10 21:28:39 +00:00
2017-07-21 17:44:18 +00:00
< a href = "http://conference.phpnw.org.uk/phpnw17" class = "is-block" >
2017-07-12 06:24:51 +00:00
< img src = "//www.oliverdavies.uk/assets/images/badges/phpnw17.png" alt = "" >
2017-07-10 21:28:39 +00:00
< / a >
< / div >
< div class = "availability panel panel-default" >
< div class = "panel-heading" > Availability< / div >
< div class = "panel-body" >
< p >
< i class = "fa fa-thumbs-o-up text-warning" > < / i >
Currently have limited part-time capacity
< / p >
< p >
< i class = "fa fa-thumbs-o-down text-danger" > < / i >
Currently no spare full-time capacity.
< / p >
< / div >
< / div >
< div class = "latest-posts panel panel-default" >
< div class = "latest-posts__heading panel-heading" > Latest blog posts< / div >
< ul class = "list-group" >
< li class = "post list-group-item" >
2017-07-13 21:19:23 +00:00
< span class = "post__title" >
2017-07-21 17:44:18 +00:00
< a href = "/blog/2017/07/13/publishing-sculpin-sites-with-github-pages/" >
2017-07-13 21:19:23 +00:00
Publishing Sculpin Sites with GitHub Pages
< / a >
< / span > -
< span class = "post__date" > 13th July, 2017< / span >
< / li >
< li class = "post list-group-item" >
2017-07-10 21:28:39 +00:00
< span class = "post__title" >
2017-07-21 17:44:18 +00:00
< a href = "/blog/2017/06/09/introducing-the-drupal-meetups-twitterbot/" >
2017-07-10 21:28:39 +00:00
Introducing the Drupal Meetups Twitterbot
< / a >
< / span > -
< span class = "post__date" > 9th June, 2017< / span >
< / li >
< li class = "post list-group-item" >
< span class = "post__title" >
2017-07-21 17:44:18 +00:00
< a href = "/blog/2017/05/20/turning-drupal-module-into-feature/" >
2017-07-10 21:28:39 +00:00
Turning Your Custom Drupal Module into a Feature
< / a >
< / span > -
< span class = "post__date" > 20th May, 2017< / span >
< / li >
< / ul >
< / div >
< / div >
< / div > < / div >
< footer class = "container" >
< p class = "copyright" >
© 2010-2017 Oliver Davies. Built with < a href = "https://sculpin.io" > Sculpin< / a > .
< / p >
< div class = "meetups" >
< h2 > Things that I organise< / h2 >
< ul >
< li class = "meetups--drupal-bristol" >
< a href = "http://www.drupalbristol.org.uk" title = "Drupal Bristol" >
2017-07-11 06:34:02 +00:00
< img
2017-07-12 06:24:51 +00:00
src="//www.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg"
2017-07-11 06:34:02 +00:00
alt="Drupal Bristol logo"
>
2017-07-10 21:28:39 +00:00
< / a >
< / li >
< li class = "meetups--drupalcamp-bristol" >
< a href = "http://www.drupalcampbristol.co.uk" title = "DrupalCamp Bristol" >
2017-07-11 06:34:02 +00:00
< img
2017-07-12 06:24:51 +00:00
src="//www.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png"
2017-07-11 06:34:02 +00:00
alt="DrupalCamp Bristol logo"
>
2017-07-10 21:28:39 +00:00
< / a >
< / li >
< li class = "meetups--phpsw" >
< a href = "http://phpsw.uk" title = "PHPSW" >
2017-07-11 06:34:02 +00:00
< img
2017-07-12 06:24:51 +00:00
src="//www.oliverdavies.uk/assets/images/meetups/phpsw.jpeg"
2017-07-11 06:34:02 +00:00
alt="PHPSW logo"
>
2017-07-10 21:28:39 +00:00
< / a >
< / li >
< / ul >
< / div >
< / footer >
2017-07-12 06:22:51 +00:00
< script src = "https://www.oliverdavies.uk/assets/js/site.js" > < / script >
2017-07-10 21:28:39 +00:00
< script > ( function ( i , s , o , g , r , a , m ) { i [ 'GoogleAnalyticsObject' ] = r ; i [ r ] = i [ r ] || function ( ) { ( i [ r ] . q = i [ r ] . q || [ ] ) . push ( arguments ) } , i [ r ] . l = 1 * new Date ( ) ; a = s . createElement ( o ) , m = s . getElementsByTagName ( o ) [ 0 ] ; a . async = 1 ; a . src = g ; m . parentNode . insertBefore ( a , m ) } ) ( window , document , 'script' , '//www.google-analytics.com/analytics.js' , 'ga' ) ; ga ( 'create' , 'UA-11967257-1' , 'auto' ) ; ga ( 'send' , 'pageview' ) ; < / script >
< / body >
< / html >
