Images: Your Best Friends and Worst Enemies.A curry.virginia.edu Web Tutorial by John Rhea (434) 243-1961, jr9xc@virginia.edu

TermsFront-end: n. The public facing side of the website, i.e. the pretty part where things look awesome.

Back-end: n. The place where you can add content, make changes, and where all the magic happens. You have to log in to view/create/change content (Expression Engine).

Image FormatsThe best image formats to use are Jpeg, Gif, and Png. These are all widely used and supported by nearly every major browser.

jpeg or jpg Works best on photographsUses lossy compression to reduce file size (i.e. loses quality)Does not support animation or transparencyDoes not up-size well

gif Works best on vector art or images with lots of solid colorsUses lossy compression to reduce file size (i.e. loses quality)Supports animation and transparencyDoes not up-size well

png Works best where quality is more important than file sizeUses lossless compression to reduce file size (i.e. no quality loss)Supports transparency (better than gif, but doesn’t work in IE6)Does not support animationDoes not up-size well

Image SizeMost images on the Curry site should be square. Preferable sizes are 220 x 220, 240 x 240 or 120 x 120, but these exact dimensions are not required in most cases. It is best to crop the picture before uploading it so that you have more control over how it looks.

Cropping/resizing before uploading also helps reduce load times. If you upload a giant image to the server and resize it to teensy-tiny, the page still has to download the giant image, even if it looks teensy-tiny on the page. If you crop/resize it to be teensy-tiny before uploading it to Expression Engine, the page only has to download the teensy-tiny version and the page as a whole loads faster.

You can crop photos in programs like Photoshop, Photoshop Elements, Gimp, iPhoto, Picasa, MS Paint and more.

Getting an Image onto the Site

The Easy WayIf there’s an image button ( or ) in the field where you want to add an image, first click where you want the image to appear, then thank your lucky stars and click the image icon.

Houses (The Easiest Way) For a house icon

The upload box will look something like this:

Click the Upload tab [ ]

The Upload tab should look like this:

Click on Browse [ ] Find the file you’ve already cropped/prepared for uploading. Then click Send it to the Server [ ] After the server does some magic it will show you a preview of how your file will

look in relation to text. The “Lorem ipsum” text is called placeholder text and gives a general look and feel for the way a block of text will flow without knowing exactly what the text will be.

Under Alternative Text (Note: this is not your favorite band name or edgy passages from Twilight) please add text that describes what is in or what happens in the image. This enables anyone who uses a screen reader to better enjoy and understand the website. It’s also great for improving search engine optimization.

You can leave all other options alone. Click OK [ ]. By default the system will align the image to the left of the page and have the text flow around it.

If you want to go rogue and format it differently, you can, but we’ll discuss your rebellious nature later (Jump to Custom Formatting or Silencing the Rogue in You)

Otherwise you’ll click OK [ ] and the image will appear in the field. The preview you see in your field will be similar, but not exactly like the final

product on the front end. If it looks something close to what you want, go ahead and click Save Revision or Submit [ ] and check the front-end page.

If the s p a c i n g is off or some other issue presents itself, continue to fiddle with it in the back end until it looks correct on the front-end.

If fiddling doesn’t fix it or breaks it more, call John at (434) 243-1961 or email him at jr9xc@virginia.edu.

Trees (The Slightly Less Easy Way) For a tree icon

The upload box will look something like this:

Note: If you do this several times while on the same entry the system sometimes goes a little funny and the right side of the upload will look different from what you see above. If that happens just click on the “folder” below Upload File [ ] (in this case Area of Study Images [ ]) and then back on Upload File [ ]. This will reset it and it should then look like it does above.

Click on Browse [ ] Find the file you’ve already cropped/prepared for uploading.

Choose the appropriate location; for example, if you’re uploading a photo for an Areas of Study page use the Area of Study Images folder [ ], if it’s a Static page use the Page Images folder [ ].

Click Upload [ ] The server will chug away for a second, then bodda-bing bodda-boom you’re in like

Flynn. You’ll be asked to Resize the Image or Return to the Publisher, i.e., the edit screen

[ ]. Since you’re awesome, you’ll have already resized the image before uploading it and you’ll just Return to Publish [ ].

You’ll then be asked for Alternative Text:

This text describes what is in or what happens in the image. This enables anyone who uses a screen reader to better enjoy and understand the website. It’s also great for improving search engine optimization.

Once you hit OK [ ] the field will populate with some scary looking code, but your job’s done.

There won’t be any preview so you’ll have to click Save Revision or Submit[ ] and check the front-end page.

If the s p a c i n g is off or some other issue presents itself, continue to fiddle with it in the back end until it looks correct on the front-end.

If fiddling doesn’t fix it or breaks it more, call John at (434) 243-1961 or email him at jr9xc@virginia.edu.

The Hard WayWhen you don’t see a tree or a house all is not lost, although it’s a bit harder. The steps above combine uploading the image and placing it where you want it on a page. In these directions we’ll upload it first then using a bit of scary code we’ll put it where you’d like it to be.

As always, because you’re awesome, you’ve already cropped the image to the size you want and prepared it for its new life as a website graphic.

In the back end you’ll need to go to the File Manager [ ] located under the Content Menu [ ]

Note for Internet Explorer users: If the drop down menu doesn’t appear when you click on Content [ ] you may need to use Firefox, Safari, or Chrome to access Expression Engine.

The File Manager is a giant list of all the images and other files (e.g. pdfs and docs) available on the server. It’s broken up by folders (directly analogous to the folders into which you could have put images in the “tree” icon section)

On the right hand side should be a toolbar. Note. Wait until it has collapsed to look like the image below. If you don’t wait it will get confused and throw out errors.

Once it looks like the above, click on File Upload [ ]

Click on Browse [ ] Find the file you’ve already cropped/prepared for uploading (because you’re

awesome). Choose the appropriate location e.g. if you’re uploading a photo for an Areas of

Study page use the Area of Study Images folder [ ], if it’s a Static page use the Page Images folder [ ].

Click Upload [ ]

It will show you a spinning wheel as it uploads the file, but the wheel doesn’t always turn off when it should.

So after about 30 seconds look in the folder you uploaded the file to or search the page using your browser’s page search functionality (Firefox: Cmd-F on a Mac, Ctrl-F on a PC; other browsers will vary)

Once you’ve found it click on the title.

It should look something like this in your browser (although possibly, not so cute or lamb filled):

Copy the URL from the URL bar. In this case it will be: http://curry.virginia.edu/uploads/aosImages/ChubbyLamb220x220.jpg

Now that we have the location of the file on the server, we need to go to where you want to place it. So find that page in the back end.

In the field you want to use, click on Source [ ] The nice text will change to scary code. It will also take you to the top of the field. If

you can see it, click somewhere close to where you want the image. Once we put the code in though you can move it around to where you want

Here’s what you would type to insert a chuddy little lamb onto your page:

For your image, type:

Click on Source [ ] again and all will once again be right with the world. You should now be able to see your image in the field. If it’s not in the right place,

click and drag it to where you want it. If you can’t see it or there’s a blank box, you may have typed something wrong. Click on Source [ ] again, and retry. If you still have problems, call John at (434) 243-1961 or email him at jr9xc@virginia.edu.

<img src=”http://curry.virginia.edu/uploads/aosImages/ChubbyLamb220x220.jpg” />

<img src=”[COMPLETE URL OF YOUR IMAGE HERE]” />

You can also go to the image properties screen by double clicking the image or by right clicking and choosing Image Properties [ ]

You can then add alternative text or make other changes to the image If the s p a c i n g is off or some other issue presents itself, continue to fiddle with it

in the back end until it looks correct on the front-end. If fiddling doesn’t fix it or breaks it more, call John at (434) 243-1961 or email him

at jr9xc@virginia.edu.

Custom Formatting (or Silencing the Rogue in You)Although in most cases you should just leave the default formatting, you can make small modifications to it. These are however limited to the House method (the Tree and The Hard Way require more coding than this tutorial can cover).

Go to the image properties screen (if you’ve already uploaded a photo simply double click it or right click and choose Image Properties [ ])

Here you can manipulate several things. It’s important to note that modifying anything besides the height/width will pull the image out of the default styling, meaning it won’t align to the left side of the browser window or have its default spacing.

I recommend editing the width and height in whatever program you use to crop the file but if you need to test several sizes you can do that here.

Avoid upsizing the photo whenever possible. This will make the image blocky/pixelated.

The lock [ ] locks the aspect ratio so that modifying one number will modify the other, keeping the image at the same ratio so it won’t get stretched or squashed.

The circular arrow [ ] resets the width and height to the files actual size. Border adds a black border to the image. The number you put in corresponds to the

size of the border. A 1 will give a 1 pixel border, a 10 will give a 10 pixel border, etc. HSpace adds space to the left and right of an image so that text won’t abut to it

directly. A 1 will add 1 pixel of space on each side, a 10 will add 10 pixels to each side, etc. Usually 5 to 10 is plenty.

Similarly VSpace adds space to the top and bottom of an image. Again a 1 will add 1 pixel of space on each side, a 10 will add 10 pixels to each side, etc. Usually 5 to 10 is plenty.

Alignment lets you send the image to the left or right of the content area. Generally you should just use this to send an image to the right, because an image will be sent to the left by default. (This left alignment will NOT send it to the exact left of the page like default, but will send it to the left about 20 pixels from the edge.)

If/when you have questions or problems: call John at (434) 243-1961 or email him at jr9xc@virginia.edu.