Hi there! Welcome to OSU Drupal Droplets
this is Joe Fenn with Oregon State
University's Web and Mobile Services and
today we are going to further explore
the Media module and its integration
into CKEditor.
We are going to embed an existing image.
So here we are on our test page and we
need to get in it. Click Edit to get into
our edit form and once we're inside here
I'll just scroll down. Now, you want to
make sure that your text format reads
Full HTML and it does. That gives us
these extra buttons that we have up here.
We'll click into the text editor and
we're just gonna be a little clumsy here
and just embed an image wherever. So once we get our cursor placed we'll click the
Add Media button we'll open up the Media
Browser and we have a few options here.
So, we can upload a new image but we
don't want to do that. We want to embed
one that exists already, so we can either
click on where it says "Library" or
actually even click on where it says "My
Files" and this will show you all the
files that you own. So, let's go ahead and
pull in this picture of this cat. Click
on that then click Submit and now we're going to have some options for resizing our
image. So, notice it's a pretty big image.
I'm gonna go ahead and just change this
to 400 wide and see? It shrinks it up
quite a bit. We have some
alignment options, okay? So if we choose
"None" it will automatically move over to
the left and be an inline type of image.Iinstead let's go ahead and choose a left
alignment, and this will float everything
up around it, so it might be a little bit
messy when we do this. Remember, this is just a test page. When we come down here
we can change the Alt Text if we want.
Remember, Alt Text is what a screen
reader uses to tell a visually impaired
person what's
going on in the picture. We can also add
Title text, so if we do this I'll show
you what happens once we're done. And, if we want to, we can also apply a link. So
I'm going to make us a link to the
Oregon State University homepage, then
click Submit. Notice it's a little bit
messy here. That's okay. We'll scroll down
and we'll hit Save, and there is our left
floated image. Notice that when I hover
and hold our text pops up...here is a
little tooltip. So, that's our Title text
that we added in and then if I click the
picture it will take me to the home page
that we linked to. And that's pretty much
it for embedding an existing image using
the Media module and CKEditor.
This has been Joe Fenn with Oregon State
University's Web and Mobile Services and
I look forward to seeing you in future
tutorials.
