!
!
Deep Dive “Media Library”
The Media Library is where all Images and documents are stored on Sitecore. The
editing of content (Content Editor) is separated from where you upload images (media
library) for organization and control. When inserting images please make sure to first
upload and approve for publication before inserting pictures into your Section.
!
!
Uploading an Image into Sitecore
When inserting images into Sitecore it is important to first upload your images through
the Media Library. Without doing so can cause various issues with seeing the image as
well as formatting.
!
1. Click on the “Media Library” selection at the bottom left of the Sitecore
window.
!
websupport@drexel.edu
215-895-0202
! of !26
1
2. Once in the media library you will see a “Content tree” on the left similar to the one
in the Content Editor
!
3. Click on the “+” next to the “Images” Folder to expand the list.
!
!
websupport@drexel.edu
215-895-0202
! of !26
2
4. Scroll down till you find the same folder name of the site you are working on. The
Media Library content tree is organized similarly to the the Content editor.
!
Media Library
Content Tree
5. Click on the folder where you would like to upload the image(s) to.
!
websupport@drexel.edu
215-895-0202
! of !26
3
5b. (Optional) You can also create a folder inside the folder you have selected. In the
main panel you will see three options available to you.
!
5c. To add a new folder click on the “New Folder” option.
5d. You will get a pop up asking what you would like the folder to be called.
!
5e. Type in the name of the folder you would like to add and Click “OK”
websupport@drexel.edu
215-895-0202
! of !26
4
5f. You will now see that “New Folder” on the left column of Sitecore in the Media
Library Tree.
6. To upload an image to the selected folder click on the Upload File button
!
!
!
websupport@drexel.edu
215-895-0202
! of !26
5
7. A new window will appear. Click on the “Choose File” Button to browse your
computer for the image you would like to upload.
8. When you click on “Choose File” button you will see a browser for your
computer. Locate the file on your computer that you would like to upload into Sitecore.
9. Click on the Image to select it.
!
10. Click “Open” to confirm your selection.
!
!
!
!
websupport@drexel.edu
215-895-0202
! of !26
6
11. The Sitecore Upload window should still be open once you “open” the image from on
your computer. (If you are having trouble try minimizing your windows till you locate
this upload window. If you click on the main Sitecore window at this point it will be
greyed out. This will stay greyed out until you Upload or Cancel) You will see the name
of the file listed.
!
12. Click on the “Upload” button to upload the image.
!
!
13. You will now see your image in the main section of Sitecore, similar to how you
would see your page content. You will see a red error however under the “Alt” section
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
! of !26
7
!
A Brief Understanding of “Alt Text”
Alt Text was created as placeholder text for an image. If an image cannot be displayed
the Internet browser will display text instead of the image to show what should have
been there.
!
This is also very important for Accessibility. Someone going through a website who
is blind or cannot see images will be using a “Screen Reader” This program reads the
website to them so they can understand the elements on the website. For images the
Screen Reader would read the “alt text.” If you had a picture of a dog and the Alt text
“Picture of a dog named Gloria” The person using the website would understand what is
being displayed.
!
14. To add Alt Text click on the “Lock and Edit” link at the top of the page to unlock
the image for changes.
!
!
!
websupport@drexel.edu
215-895-0202
! of !26
8
15. Once unlocked click on the “Alt” Field and type in information that matches
the image.
!
!
!
!
!
!
!
!
!
16. Click “Save” at the top to save your changes.
!
!
!
websupport@drexel.edu
You MUST follow the next steps before going back to the
Content Editor. Your image will not appear if you do not
“Approve for Publication”
215-895-0202
! of !26
9
17. Click on the “Review” tab at the top of Sitecore.
!
!
18. In Review Click on
!
!
19. You will be asked to input a comment. This is optional. This note is for a Manger to
approve the content you are posting to the site.
20. Once done click on “OK”
!
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
! of 26
10
!
Inserting and Image into your Sitecore Website
!
Now that our image is uploaded let’s insert it into our website.
!
1. Make sure you are in the “Content Editor” To do so Click on the “Content Editor”
Tab at the far bottom left of Sitecore.
2. Locate in the Content Tree the page you are looking to insert the image. Click on the
page to select it.
!
3. If your page is locked. Click on the “Lock and Edit” option at the top of the
page. If not continue to step 4.
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
! of 26
11
!
4. Scroll down to the “Content” section of your Site and click on the “Show Editor”
option above “Body”
5. Click where you would like your picture to appear in your Body. For our
example we want to add a picture right before the text “Curabitur ligula nisi”
!
!
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
! of !26
12
6. Click on the Image icon at the top bar.
!
!
!
!
!
7. A new pop up will appear. Locate on the Media Library Content Tree the folder where
you uploaded the image to. Click on it to select it.
!
8. Once found Click on “Insert” at the bottom right of the Window.
websupport@drexel.edu
215-895-0202
! of !26
13
9. The image will appear in the body of your content. Click on “Accept” at the bottom
to approve the changes.
!
!
10. Click “Save” at the top left to save your changes to the page.
!
!
websupport@drexel.edu
215-895-0202
! of !26
14
(Note: By default images are 100% across the section they are in.)
100%
!
websupport@drexel.edu
!
!
!
!
!
!
!
!
!
!
!
215-895-0202
! of !26
15
Image Classes
!
Images by default are set up to show at 100% of the width. This is to keep a consistent
look across drexel.edu. To change how an image is viewed on the page a class needs to
be added to tell Sitecore specifics on how to display the image.
!
In a websites structure each element can be given a “class”. This class has information
on how the resulting item will be viewed. To do this you must be looking at the code
rather than the normal editor.
!
!
These directions assume that you already have an image in your site.
If you do not please first insert an image and then follow these
directions.
1. In the Content Editor choose the “Edit HTML” option
!
2. In the HTML Editor you will see the code markup that creates your website. In it you
will see a line that looks similar to <img width="200px" height="200px"
src="my-image.jpg" /> (See highlighted code below).
websupport@drexel.edu
215-895-0202
! of !26
16
3. To add a class first delete the width and height items from the image. The example
would then look as it does below.
4. Add one or more classes to the image by inserting
class=“INSERTCLASSOPTIONHERE” into the img code.
!
Class options
float-left - The float-left class pushes an image to the left
allowing other elements (usually text) to wrap around it
and reduces the image to 50% of it's parent container.
!
percent-30 - The percent-30 class reduces the size of
the image to 30% of the width of its parent container. The
"percent" classes can be applied in multiples of 5 from
"percent-5" to "percent-95".
!
Examples:
<img alt="" class="float-left" src=“/ImageLocation” />
*Automatically
50% width
!!
Text Wraps
around image
websupport@drexel.edu
215-895-0202
! of 26
17
!
<img alt="" class="percent-30" src=“/ImageLocation" />
*30% width
!
!Text
DOES
NOT Wrap
around image
!
<img alt="" class="float-left percent-30" src=“/ImageLocation" />
*30% width
!!
Text DOES
Wrap around
image
5. Once your class has been added click the “Accept” button at the far bottom right
of the window to accept the changes.
websupport@drexel.edu
215-895-0202
! of 26
18
!
6. Make sure to click “Save” at the top left of Sitecore to save your changes.
7. To see the result of your classes Click “Display” under the Review tab at the top of
Sitecore.
!
!
!
!
!
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
! of !26
19
Adding Captions to Images
!
Adding captions to images requires the Sitecore User to go into the HTML editor of a
page to change code to make the image display differently.
!
These directions assume that you already have an image in your site.
If you do not please first insert an image and then follow these
directions.
!
1. In the Content Editor choose the “Edit HTML” option
!
2. In the HTML Editor you will see the code markup that creates your website. In it you
will see a line that looks similar to <img width="200px" height="200px"
src="my-image.jpg" /> (See highlighted code below).
!
!
websupport@drexel.edu
215-895-0202
!
20
of !26
3. Delete the width and height attributes of the image. If you have any classes
please skip ahead to step 8 to see how to add classes to figures.
!
4. To add a caption you will need to add code that creates a “Figure” around the image
and a caption (figcaption)
!
General Markup
<figure>
<img src=“the-image.jpg”>
<figcaption>Image Caption</figcaption>
</figure>
You start the entire setup with an opening tag, <figure> which tells Sitecore and a web
browser you want to create an item called a figure.
!
Next you need to add another opening tag called <figcaption> which tells Sitecore and
a web browser what the figure caption should be. Right after this type in what you would
like to appear as caption text.
!
To tell Sitecore that we are done we need to add closing tags. To finish writing caption
text type in </figcaption>
!
To finish the figure type in </figure>
!
websupport@drexel.edu
215-895-0202
! of 26
21
!
To do this with Our example it would look like this.
!
!
5. To accept the changes press “Accept” at the far bottom right.
!
!
websupport@drexel.edu
215-895-0202
!
22
of !26
6. Make sure to click “Save” at the top left of Sitecore to save your changes.
7. To see the result of your classes Click “Display” under the Review tab at the top of
Sitecore.
!
!
!
!
!
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
!
23
of !26
8. To add classes to a figure you would need to have them be applied to the figure rather
than the image. Open the HTML editor in Sitecore to see your figure and caption.
9. Add your class to the figure object rather than the img. In the example there is an
added float-left and percent-30 class.
!
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
!
24
of 26
!
!
10. To accept the changes press “Accept” at the far bottom right.
!
!
!
!
!
!
11. Make sure to click “Save” at the top left of Sitecore to save your changes.
!
websupport@drexel.edu
215-895-0202
!
25
of !26
12. To see the result of your classes Click “Display” under the Review tab at the top of
Sitecore.
websupport@drexel.edu
215-895-0202
!
26
of !26