Images: Your Best Friends and Worst Enemies.

keckdonkeyInternet and Web Development

Nov 18, 2013 (3 years and 7 months ago)

59 views

Images: Your Best Friends and Worst Enemies.

A curry.virginia.edu Web Tutorial

by John Rhea

(434) 243
-
1961, jr9xc@virginia.edu

Terms

Front
-
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 lo
g in

to view/create/change content
(Expression Engine).

Image Formats

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



jpeg
or

jpg

Works best on photographs




Uses lossy compression to reduce file size (i.e. loses quality)




Does not support animation or transparency




Does not up
-
size well



gif


Works best on vector art or

images with lots of solid colors




Uses lossy compression to reduce file size (i.e. loses quality)




Supports animation and transparency




Does not up
-
size well



png


Works best where quality is more important than file size




Uses lossless compressi
on to reduce file size (i.e. no quality loss)




Supports transparency (better than gif, but doesn’t work in IE6)




Does not support animation




Does not up
-
size well

Image Size

Most 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 i
t 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/resiz
e 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 Way

If there’s an image button (

or

) in the field where you want to ad
d

an image, first
click where you want the image to appear, then thank your lucky stars and click the image
icon.


Hou
ses

(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 kno
wing 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 happe
ns 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 f
or 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 Re
turn 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 o
r 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 Way

When 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 l
ook
like the image below. If you don’t wait it will get confused and thro
w

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).



Cho
ose 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 fil
e, 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 v
ary)



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. I
n 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.

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

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



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 somethin
g 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.



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 [

] l
ocks 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 borde
r 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 th
e 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. U
sually 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.