Tip:
Highlight text to annotate it
X
Alright, let's look at inserting images into a page. When you insert an image, you've got
an option of putting in an image that sort of runs that full 450 pixel width at the very,
I would recommend putting it at the very top, or you've got the option of inputting narrower
images that would just be inserted into the copy and the copy would wrap around it, either
flowing to the left or flowing to the right, and again we're optimizing for that 450 pixel
column under the assumption that we're going to have some type of blocks over there in
the right column and again we can talk a little bit more about how we place those blocks here
in a minute. So let's start off with inserting an image at the very top, okay, and again
I know it's 450 pixels wide and I want it to be at the very top of the page so I'm simply
going to put, I'm going to put a return and put my cursor at the very top and I'm going
to go down here to image upload and I'm simply going to browse for an image. Okay, again
I have a pre-defined image at 450 pixels. We're sizing our images ideally at a 16 by
9 aspect ratio, which is equivalent of what a video's going to be and widescreen at, you
know, 16 by 9, and the reason we do that is we have the option of plugging in video into
pages as well so in terms of if you've got media on multiple pages and people are clicking
back and forth, I think having a consistent, uniform size for that so that that page doesn't
really bounce back and forth between media types of different depths or different heights.
I think it's going to be a little bit more consistent and a little bit more user friendly.
Certainly you have the option of cropping an image and putting it, making it deeper
but of course the deeper you size it the more it's going to push your content down further
down the page, again assuming you're putting it at the top. Okay, so I've selected though
this 450 pixel image. I'm going to open that. I'm going to hit the upload button, and I'm
going to have a couple of different style options. Now I'm going to pick original image
which is maybe a little bit of a misnomer or maybe not as clearly labeled as we might
want, but the intent with that is that I can run it kind of full size up to 450 pixels,
okay. It's not going to have any styling, any preset styling, so that's why we really
want to position it at the top or in the middle of a line break. So, I've got a description
here which is really for my benefit, you know, who is this, what's going on, where was it
taken, when was it taken. Somebody comes back in behind you, they'll have more information.
Alternate text is key for accessibility. Instead of having that file image name, which was
450px.jpeg or something along those lines, we actually for people whose who have a sight
impairment of some sort or using screen-reading software, when they come in and use that software,
it's going to read out the source code to them and read out the content of the page.
Well if there's no alternate text field assigned to that image, it's just going to read out
the file path or the file name for that, for that image, 450px.jpeg which was not going
to mean anything. So we want to put something descriptive, it's Golden Eagle Welcome Week,
students are at The Rock, etc. etc. Title is just going to be a small piece of text
that when you hover over that image, it's going to appear. So let's do that real quick.
I'm just going to abbreviate for the sake of time with the video, and I'm going to insert
that and wherever I've left my cursor is where that image is going to show up. Okay, and
then let's save that and see how that looks then on the public side. Okay, and this is
kind of a good example of why we might want to be logged in on one browser and logged
out on another. I'm going to switch over here real quick where I'm logged out and now if
I scroll down, I can actually see that I've got my page header, I've got my image, and
it looks like I might an extra space there. Maybe I didn't need to have that inserted.
I've got my block and then I've got my content here.