Working+with+images


 * //The following tutorial illustrates how images are used in Drupal. Follow these steps to understand the basics of manipulating images within the CMS. You are on your own as to how you choose to implement images (or not use them at all) within the CV assignment. These skills will become more important within the final assignment as you will inevitably have to deal with images then.//**


 * Adding and Image field to the CV content type**

First we will add an image field to our CV content type and see how we use image styles to control it.

1. Navigate to Structure >> Content Types and click on 'manage fields' for the CV content type 2. Click on 'select a field type' over 'type of data to store' in the 'add a new field' row. Select image and enter headshot in label and field – click on 'Save' 3. A screen will open up, we're not worried about access here so ignore these options and just click on 'save field settings'. //Note: You could set a default image, so say if we were working on adding the image for profile pictures for a social network – we could have it display a GIF of a person to display if no image were added.//



4. A screen will open up with a lot of issues – the good news is we don't care about most of these. We could use these options to streamline our image submission workflow. So you could change what file formats are accepted, point them at a specific directory (useful if you are dealing with thousands of images on a massive site), you can set maximum and minimum image sizes (this can be very useful, say you are making a slideshow later in the semester. If that slideshow is 640x480 you probably don't want to accept images *smaller* than that). You can also set a maximum upload size (if storage/disk space is an issue), and enable an alt field (see [|this page] for information on why alt fields are useful). Also, scroll down and note the 'number of values' selector – you could have any number of image slots associated with a a content type. **For the time being – just click on save settings.**

5. You'll be bounced back to the manage fields interface. Click on 'Save'

//So we've got an image field, let's test it out...//


 * //Adding an Image and changing how it is displayed//**

1. Navigate to your CV page and hit 'edit' 2. Now you should have a little uploader widget attached. Download [|this image], and then plug it into this widget and hit 'upload'. //A thumbnail will appear to indicate that the upload has been successful.// 3. Save the node – and ignore a 404 error if you get one afterwords (I did).

Navigate to your CV Page, you'll see your headshot but unfortunately it was an ugly label attached to it, additionally – it is just displaying the image at the original size. What if we wanted to make rules as to what sizes images were displayed at? //Let's change make some changes.//

5. Navigate to Structure >> Content Types and click on 'manage display' in the CV row. 6. Notice the 'headshot' row – as is the case with other elements (we learned this last week) we can turn off the label by changing that dropdown selector to so do that first. 7. Now, click on the greyed out gear icon at the right edge of that field. The below screen will open up... ...this selector is responsible for image styling within the CV content type. At the moment, it simply displays the image as we uploaded it. For the moment, change it to 'thumbnail'. 8. Click 'Save' and navigate back to your CV page. //Your headshot is now a tiny thumbnail. But how do we control these settings?// 9. Navigate to Configuration >> Image Styles and click on 'edit' beside thumbnail. Note the 'effect' that is applied – a scale that changes the largest of the two dimensions (in this case width) to 100px.

//Thumbnail, medium and large are the basic image styles that ship with Drupal. We're going to make a custom one now to change our headshot.//

10. Navigate back to the image styles page and click on 'add style' – set your style name as 'headshot_format' and click on 'create new style'

11. First, say we want to make the image black and white. Click on 'select a new effect' and select 'desaturate' and 'add' – note the preview on the right. Now, add a new effect – select 'scale and crop' and click 'add'. Set the height to 150px and width to 200px. Click on 'update style'.

Now, navigate back to Structure >> Content Types – click on 'manage display' for the CV type. Click on the gear icon for the image and change the image style to 'headshot_format'. Save the content type. Now all images in the CV content type will be processed to the specifications we set up. Visit your CV page again to confirm these changes have been made.

12. Now, let's move the image to the top of the content type so it appears above the objective. Navigate to Structure >> Content Types and click on 'manage display' beside CV then put 'headshot' above 'objective'. Click on 'Save'. Return to your CV page and confirm the changes have been made.

Congrats you've now learned how to use images in Drupal! This seems mundane, but by setting up workflows for manipulating images you can do some pretty sophisticated designs.

Some examples:
 * Make custom image styles for the node view and teaser view of a piece of content in Drupal. So You have a page view that features a short index of posts with teasers and small images for viewers to browse... and then when the click through to the post bigger images are used.
 * You could set up small rows or inline galleries of images within a post. Just add multiple image fields, use a style that is very small and style the margins/padding that you want. (note: don't confuse this for an actual photo gallery, or slideshow – which we'll work on in later weeks).

By using image styles to process images you can have users upload high quality images, and then let the site process them. This way if your design or image styles need to be used later, the site can just batch process new images at the appropriate resolutions.

To explore image styles in drupal further try the following:

1. Install the [|ImageCache Actions] module – you can use it to round corners, do color shifting, text overlays (with a separate module) and watermarks. It is fun to play with and will make more sense when we look at jQuery slideshows/sliders later in the semester. 2. One approach to your CV assignment would be to make a thumbnail for each education or employment content type and then serve that in the view. You just need to make an image field in one of the content types, set up an appropriate style and then 'add an existing field' in the other content type. Add an image (or images) to each bit of content, edit your views to include them (you will need to add the fields within the view interface) 3. Images can be a content type unto themselves. Try making an image content type and then serving the images as views within blocks. You will need to be mindful of how much screen real estate they will require (e.g. the main content block in 960 with one sidebar activated is 700 px.. so you could have a grid view of three images at approximately 220px each with generous padding). You could also make rules as to which views appeared in a block (setting a filter to the titles of specific images, or—more logically—using taxonomy, which we'll introduce tomorrow). 4. Extending on #3, you could download a slideshow module of some sort – you should probably hold off on this though, as that will be a tutorial-assisted exercise later in the semester.

//Just as a final disclaimer, you do not need to use images in your CV assignment – but you might like to and this tutorial provides you with the basic skills. This exercise is dry though, in order to really learn about images you need to think about them and massage them towards a specific goal. Like all of the things you've learned in the past few weeks, this will become second nature once you start working on the final assignment.//