Deep Dive “Media Library”

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

!

! of !1 [email protected]

mailto:[email protected]

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.

!!! of !2 [email protected]


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

5. Click on the folder where you would like to upload the image(s) to.

!


Media Library Content Tree


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”



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

!!!! of !5 [email protected]


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



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 !!!!!!!!!!!!!!!!!!!!!!!!



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.



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.


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”


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” !!!!!!!! of !10 [email protected]


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.

!!!!!!! of !11 [email protected]


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”

!!!!!!!!! of !12 [email protected]


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.



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



(Note: By default images are 100% across the section they are in.)

!!!!!!!!!!!!


100%


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



http://drexel.edu

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.

Examples: !<img alt="" class="float-left" src=“/ImageLocation” />


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

*Automatically 50% width !!Text Wraps around image


<img alt="" class="percent-30" src=“/ImageLocation" />

!<img alt="" class="float-left percent-30" src=“/ImageLocation" />

5. Once your class has been added click the “Accept” button at the far bottom right of the window to accept the changes.


*30% width !!Text DOES NOT Wrap around image

*30% width !!Text DOES Wrap around image


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.

!!!!!!!!!!!! of !19 [email protected]


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

!!! of !20 [email protected]


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

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> !


<figure> <img src=“the-image.jpg”> <figcaption>Image Caption</figcaption> </figure>


To do this with Our example it would look like this.

!!5. To accept the changes press “Accept” at the far bottom right.

!!



6. Make sure to click “Save” at the top left of Sitecore to save your changes.


!!!!!!!!!!!! of !23 [email protected]


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



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



Deep Dive “Media Library”

Documents

Transcript of Deep Dive “Media Library”