International SOS Australasia - Using the Page Editor in Sitecore/media/group... · Web...

International SOS Confidential 12-Sept-2014

Using the Page Editor in SitecoreVersion 1.6

International SOS

Table of Contents1. Sitecore Basics..........................................................................................................................................5

a. Logging In..............................................................................................................................................5

2. Accessing the Page Editor from the Content Editor..................................................................................6

a. The Page Editor Ribbon.........................................................................................................................6

b. Using the Navigation Bar.......................................................................................................................7

c. Locking a document in the Page Editor.................................................................................................8

d. Unlocking items in the Page Editor.......................................................................................................9

3. Creating a new Page Using the Page Editor..............................................................................................9

a. Inserting a page....................................................................................................................................9

4. Webpage Duplication..............................................................................................................................10

5. Versions of a page...................................................................................................................................11

a. Adding a new Version.........................................................................................................................11

b. Comparing Versions............................................................................................................................12

c. Delete a Version – NOTE: Only users with this permission will have this capability...........................13

5. Un-publish a page...................................................................................................................................14

6. Deleting Content.....................................................................................................................................15

a. Deleting an Item.................................................................................................................................15

7. Archiving Content...................................................................................................................................16

8. Modules and Components......................................................................................................................16

a. Adding a component to a page (from the page editor).......................................................................16

b. Editing a module.................................................................................................................................19

9. Managing Content in the Page Editor.....................................................................................................22

a. Editing a Simple Text Field..................................................................................................................22

b. Editing a Rich Text Field Directly on the Page.....................................................................................23

c. Inserting a link within the rich text editor...........................................................................................24

d. Anchor Tags........................................................................................................................................25

1. Creating an Anchor Tag on a page...................................................................................................25

2. Linking to a Named Anchor from within the same web page.........................................................26

3. Linking to a Named Anchor from with another web page..............................................................26

e. Inserting a “bucket item” within the rich page text editor..................................................................27International SOS Confidential 12-Sept-2014

f. Inserting an Image within the rich page text editor............................................................................28

g. Uploading an Image or File from the rich text editor..........................................................................29

h. Editing a Rich Text Field in the Rich Text Editor..................................................................................32

i. Editing a Media item within the Rich Text Editor................................................................................32

j. Editing the Link in an Image within the Rich Text Editor.....................................................................33

i. To change the link in an image:......................................................................................................33

ii. Changing the Image........................................................................................................................34

k. Modifying an Image’s Appearance......................................................................................................35

10. Adding a video to a page from the Rich Text Editor............................................................................35

i. Adding a New Video........................................................................................................................36

ii. To add an existing video..................................................................................................................40


Document Revisions

Version Date Author Changes1.0 05 Jun 2014 J. Hirst Initial document1.1 23 June 2014 J. Hirst Added Module instructions1.2 07 July 2014 J. Hirst Added instructions for publishing modules.1.3 09 July 2014 J. Hirst Added instructions for versioning1.4 24 Aug 2014 J. Hirst Added instructions for adding videos1.5 26 Aug 2014 J. Hirst Amended video instructions1.6 12 Sept 2014 J. Hirst Added how to archive content, adding anchors


1. Sitecore Basics

a. Logging In To log in to Sitecore:

1. Enter the URL http://ecms.intlsos.com/sitecore/login2. Enter your user id – Important you need to add isosecms\ to your user name.

Example: isosecms\joycehirst3. Enter your password.4. Select “Content Editor” From the options and click Log In to start working on your

site


2. Accessing the Page Editor from the Content Editor

1. From the content tree, click on your site and then click on “home”

2. From the Ribbon at the top of the page select “Publish” and then click on “Page Editor”

3. The Page Editor version will open on your home page

a. The Page Editor RibbonWhen you are in the Page Editor, the ribbon is displayed at the top of the web page. If you have been given full access to all functionality in the Page Editor, you have access to all five tabs in the ribbon, each with its own collection of commands.

At a minimum, you can expect to see the buttons shown in the following screenshot at the top of the web page.

When you are in “Edit” mode, there is always a Save button in the top-left corner.


Make sure you have the Navigation Bar checked so you can easily move around the site. Click on the “View” tab to access this feature.

b. Using the Navigation Bar

1. Click the down arrow to the right of the item and a drop down of pages will be displayed and select the page you want to see.

2. That page title will now be displayed in the menu path. Click on “Go” and the page you selected will be displayed.


3. When you are editing an item, you can click the Toggle Ribbon button (located in the

upper right corner of the ribbon) to temporarily hide the ribbon and give yourself some more space to work with or to view a less confusing layout. Click the Toggle Ribbon button again to display the ribbon.

c. Locking a document in the Page Editor

1. Using the preview button select the page you would like to edit.

2. From the “HOME” tab, Click Lock to manually lock an item before editing it.

When you lock an item, it is noted in the My Items button on the ribbon. In the following screenshot, the user has locked one item:

If you have locked and edited numerous items, and maybe lost track of them all, you can see which items are locked by you if you click My Items in the Edit group.


3. When you have finished editing the item, remember to unlock it so that other users can edit it.

d. Unlocking items in the Page EditorYou must remember to unlock items that you have locked so that other users can edit it.

1. Click on “My Items” from the “Home” tabThe My Items box will open

2. Select the times you want to unlock and then click the “Unlock” button. NOTE: if you want to unlock all of your pages, click on the “Unlock All” button.

3. Click “Close” to complete the process.

3. Creating a new Page Using the Page Editor

As a content author, you can create a new page and insert it into the web page where you want it displayed.

a. Inserting a page

1. Navigate to the page that you want to edit.

2. Click the EDIT button at the top of the page

3. On the ribbon, click Insert Page to open the Insert Page dialog box.


4. Select the type of item that you want to insert. In this example, you insert a Basic Content page.

5. In the Item Name field, enter the name of the page that you want to insert.

6. Click ok to create the new page. It will be added to the tree.

When you create a new item, it is automatically locked to prevent other users from editing it. Now you can edit the item by adding text, images, sidebar text, and so on.

7. When you are finished editing the new item, click Save and then Unlock to make the item available to other content authors.

4. Webpage DuplicationSitecore allows content editors to duplicate existing web pages. This is useful when you want to create numerous pages based on the same basic information or layout.

1. Navigate to your content folder.

2. Select the page you wish to duplicate and right click on the file. You will see a pop-up menu .


3. Select “Duplicate” within this menu to create a second copy of the original file.

4. Enter the name of the new page in the box and select ok.

5. The new web page will then be visible in the files pane of the CMS.

5. Versions of a pageWhen you are making minor spelling changes to a page it is advisable to make those in the existing version. However, when major changes are required, a new version of the page should be created. This is also a way to creates updates prior to their release so you can have them ready for production.

a. Adding a new VersionNOTE: THIS MUST BE DONE THROUGH THE CONTENT EDITOR SECTION OF SITECORE


1. Go to the content tree and select the page

2. In the upper right corner of the page click on the number with the arrow

3. At the lower left corner of the pop up slect “add version”. The page will refresh and you will now see the subsequent number at the top right.

4. This newer version will not be published until it has passed through the workflow.

b. Comparing VersionsWhen you have more than one version for a page you can easily see what changes have been made to the newer version.

1. From the Content Editor section select “versions” from the top ribbon and then select “compare”


2. You will now see a side by side comparison of the 2 version. (changes will be highlighted in Blue)

3. If you have more than 2 versions you can compare those by selecting the version in at the top of the pop up.

4. When you have completed your review click on the “OK” button at the bottom of the page.

c. Delete a Version – NOTE: Only users with this permission will have this capability.

1. From the content editor section of sitecore, select the version of the page you wish to delete.

2. Select “Version” from the ribbon and then “remove”

3. You will be asked to confirm your action. Click “OK” to confirm.


Your selected version will now be deleted. NOTE: These can be recovered through the Sitecore recycle bin.

5. Un-publish a pageUn-publishing a page will prevent it from displaying on the website. Conversely, because it was not deleted, republishing a page will display it on the site. Note that if a parent page contains a “+” next to it in the Content Tree, the pages contained beneath it will also be hidden.

1. Select the page to be hidden form the content editor

2. In the review section, click Edit to lock the page

3. From the Ribbon select Publish >click on the “Change” icon

4. The Publishing Settings widow will display. Click the Item tab near the top left of the window.


5. Uncheck the box labeled Publishable (this will uncheck or deselect the box)

6. Click the OK at the bottom right of the window

7. Publish the page

8. Several warning messages will display within the Warning section of the Content Tab:

9. “This items will never be published because its “Publishable option is disabled.”

10. If published new, the selected version will not be visible on the Web site.

6. Deleting ContentContent authors also need to sometimes delete items and content from time to time. This is a very simple task in the Sitecore Page Editor. NOTE: Only users with special permission have this capability.

a. Deleting an Item

To delete an item from the Page Editor:

1. Navigate to the item that you want to delete.

If you want to delete an item, navigate to that item.

If you want to delete a sub-item, navigate to the sub-item in question and not just the link to it that is shown on another item.

2. On the ribbon, click Delete Page to remove the item or section.

Once again, depending on the customizations carried out on your website and the way the Page Editor has been configured, the Delete Page button may be located on the ribbon or at the top of the screen.


3. If you try to delete an item that contains sub-items, a message appears informing you that that the section contains sub-items and that these items will be deleted along with the section.

4. If you want to save any of the items, click Cancel and then move them to another section.

5. Click OK to delete the item and its sub-items.

7. Archiving Content

1. Select the page you want to archive (you don’t have to lock it)

2. Click on the “Review” tab at the top of the page.

3. All the way to the right of the toolbar will be an “Archive” icon. Select it.

4. “Archive Now” will remove your page from the content tree and place it in the Sitecore Archive.

5. “Set Archive Date” will set a date on the page on which it will be automatically archived (good for event-specific pages).

6. “Clear Archive Date” will do exactly that, should you change your mind about archiving.

8. Modules and Components

On most pages you can insert modules (or components).

a. Adding a component to a page (from the page editor)1. Select the page you wish to add a component to.2. Click on the “Edit” button from the page ribbon.3. Click on “Component” button from the page ribbon.


4. The page will refresh and will indicate the areas that you can add the component

5. Click on the area to add the componentYou will be presented with various components that can be added to the page.


6. Select the component you wish to use and then click on “select”7. You will be asked to select a component that has already been created or you can

create a new one.

8. To select one that has already been created, just click on the name of the block and click “ok”. To create a new module, click on “Create New Content”. You will be asked to enter a name of the module, then click “ok”

9. The component will now be added to the page.

IMPORTANT: YOU MUST PUBLISH THE MODULE/COMPONENT FOR THE CHANGE TO TAKE EFFECT. MEARLY PUBLISHING THE PAGE THAT THEY ARE ON WILL NOT UPDATE THE MODULE.

1. From the content editor area go to the Moduleblocks file, Click publish from the top ribbon and then click “publish”. Click “Publish” , then “Publish item” Follow the wizard instructions.


b. Editing a module Once the module is added to the page you can add text, graphics, links etc. (What you can add depends on the component)

1. Editing a “Feature Block Module”

1. Adding a Graphic – NOTE – You need to first add a graphic to this module.

a. Click on the graphic and a set of icons will be displayed. Select the first graphic icon

b. The Select media screen will open. If the graphic you need is already in the media folder, go to that folder and select the graphic and click “Select Media”. If the graphic is new, you will need to add the graphic to the media Library (see section 3.d)

c. When inserting a graphic you need to observe the following orientation rules:

Module Orientation - Vertical Image Width: max 82px for Module size Small, 100% for Module size Large Image Height: Proportional

Using an image with ideal proportions would yield something like below:

Module orientation: Horizontal


Image Width: 100% Image Height: max 100px for Module size Small (smaller is OK), 100% for

Module size Large

Using an image with ideal proportions would yield something like below:

2. To edit the text click on “the areas that say, “No Text in Fields” and enter your text.

For Feature Block, it is also recommended to restrict the length of block title and description (3 lines).

3. When you click on these areas, you will have different options: User the rich text editor Quickly bold/italicize/underline your text Add a link


Here is where you enter the title

Here is where you can enter text for a link

Here is where you enter some text for the visitor to read

2. Editing a List Module

a. To add a heading, click on the top text area and enter your title. You can also enter additional text and sub text. If you do not enter anything, nothing will appear on the page.

b. To add links click on one of the link items

c. For Internal links Select the page you wish to associate to the link. Enter the title that you wish to show in the module For Target – Select “parent” for internal links Enter an “alternate” text that will be displayed when the user hovers over the link


Click “insert link” to complete the instructions Repeat for each link When all links have been added click “OK” at the bottom of

the page Save your changes.

3. Editing an HTML Module

a. Enter a title at the top of the pageb. To enter text, click on the “Rich Text editor” Linkc. The Rich Text editor will open – NOTE: - Follow the instructions in section 3E for adding

text.

9. Managing Content in the Page Editor

a. Editing a Simple Text Field


To edit a simple text field:

1. Log in to the Page Editor.

2. Navigate to the item that you want to edit.

3. In the item, select a simple text field that you want to edit.

4. Edit the text directly on the page. The text field automatically expands to fit the text you enter.

5. When you are finished editing the text, you can start editing another text block or click Save to save the changes and exit editing mode. You can also click Close to close the item. If you have made any changes on the page (and they have not been saved), you will see the following prompt dialog box:

b. Editing a Rich Text Field Directly on the Page

A rich text field gives you more control over how the text appears on the web page. To edit a rich text field:


1. Click a rich text field and Sitecore displays your options in a floating menu (note: some boxes will not have this option, based on the type of module)

2. To edit the text in the Rich Text Editor, click the Edit Text button.

3. To edit the text directly on the page, just click the line that you want to edit and start typing. When you edit a rich text field directly on the page, you can not only edit the text but also format it. You can make the text bold, italic, and underlined, or insert a link or an image.

c. Inserting a link within the rich text editorYou can add a link to the following:

An internal page A media item (graphic, video etc) A files (example - A PDF)

1. Select some text to insert a link to and click the Link button.

2. In the Insert a Link dialog box you can find the item you want to link to by:

Navigating through the content tree on the Internal Link tab.

Navigating through the Media Library on the Media Items tab to link to an image or a file (example: word document).

Note: If you have many items in your library, you can use the “Search” feature for the item on the Search tab.


3. When you have found the item that you want to link to, click Link.

d. Anchor Tags The anchor tag is essentially a tag that you can attach to a word or a phrase (exactly like you would a normal internal or external link), except it brings readers down to a different section of the page as opposed to another webpage. You’re essentially creating a unique URL within the same page when you use this tag. Consider the following example:

If you click on any of the headings in the “contents” box, it will jump you right down to that section without you ever having to leave the page or scroll down to find it.

1. Creating an Anchor Tag on a page

1. Open a page and put it in Edit mode. Next, launch the rich text editor. Highlight the text which will serve as the special anchor link and then press the “Hyperlink Manager” button.


2. Next, switch to the “Anchor” tab and supply a name for your named anchor tag. Click the OK button.

2. Linking to a Named Anchor from within the same web page.

1. Highlight the text which will serve as the link and then click the “Hyperlink Manager” again. This time, instead of going to the anchor tab, you will note that your anchor tag is under the “existing anchors” dropdown box. Select the appropriate option; save your page and publish – your anchor link should now be functional.

3. Linking to a Named Anchor from with another web pageNamed anchors can be linked to from other web pages, but you will not have access to the same dialog box featured above. In this case, it is critical that you know the name of the named anchor, including how it is or is not capitalized.

1. The first step is to create a standard link to the destination web page using either the internal linking tool or the external linking tool within Sitecore.

2. Highlight the freshly-created link and click the “Hyperlink Manager” (external links button). Please do this even if your link is going to an internal web page.

3. Notice that the field labeled “URL” contains a link already. Click inside this box to introduce the cursor, and then use the right-arrow key on your keyboard to move the cursor to the very end of the URL.


4. Next, type “#” after the “.aspx” of your link, and then add the name of your named anchor tag. (See below). Click OK, Accept, then Save, submit, and approve and publish your web page to launch your new link.

e. Inserting a “bucket item” within the rich page text editor

1. Select some text to insert a link to and click the Link button.

2. Click on the “search” tab:

3. At the search screen enter the name of the item and click the magnifying glass icon:


4. From the results go to the right side of the screen within the template section and select the area:

5. Select the country from the list and click on the “link” Button:

6. Click “Save”

f. Inserting an Image within the rich page text editor

You can insert various types of media into the item. These could be animations, film clips, sound files, and so on.

To insert an image into the area that you are editing:

1. Click the Insert Image button.


The Insert Media Item Dialog Box opens.

2. Select the image or media item that you want to insert from the Media Library tab or do a search for the media item on the Search tab. (note: Select items From the Pandemic or Upload folder.)

3. Click Insert to insert the image into the area.

g. Uploading an Image or File from the rich text editorIf the media file that you want to use is not available in the Media Library, you must upload it to the Media Library. To upload an image or file to the Media Library:


1. In the Page Editor, click the Insert Image button

Sitecore opens the Insert Media Item dialog box

2. In the Insert Media Item dialog box, click Upload to open the Upload a File dialog box.


3. In the Upload a File dialog box, click Browse to locate the file that you want to use. Select the file and click Open to upload the item to the Media Library.

4. Sitecore opens the Content Editor, from where you must lock the item before you can edit the item and save it.

5. Exit the Content Editor to return to the Insert Media Item dialog box. Now you can choose the item that you just uploaded and click Insert to create a link to the new item. If you click Cancel, the Insert Media Item dialog box closes, but the new item remains available for later use.


h. Editing a Rich Text Field in the Rich Text EditorYou can also edit rich text fields in the Rich Text Editor.

1. Select the rich text field that you want to edit.

2. Click Edit Text icon to open the text in the Rich Text Editor.

3. In the Rich Text Editor you can:

Insert and delete links to other parts of the website and to external websites. Insert pictures or other media items. Insert symbols into the text. Paste text from Microsoft Word into the item. Find and replace text in the item.

4. If you prefer editing the text in HTML format, click the HTML button to view and edit the item in that format.

5. Click Accept to save your changes and close the Rich Text Editor.

i. Editing a Media item within the Rich Text EditorYou can also use the Page Editor to edit any media items that are displayed on the website. W hen you select an image, you are presented with some additional options. Note that the options that are available to you vary depending on the installation and your access rights.

You can:

Select the image to be displayed.

Modify the appearance of the image

Remove the image.International SOS Confidential 12-Sept-2014

j. Editing the Link in an Image within the Rich Text Editor

You can only edit links on images placed in Rich Text or Word fields, and only if you open the text

editor. From either the Rich Text Editor or the Word Editor you can:

Change the link by inserting a new one

Remove the link

i. To change the link in an image:

1. If the image is a link, click Insert Sitecore Link.

The Insert a Link dialog box opens on the Media Items tab.

2. Click the Search tab to search for the content item you want to link to.

3. If you want to link to a media item, click the Media Items tab and navigate through the media items tree.


4. If you want to link to a page on your website, click the Internal Link tab, and navigate through the content tree.

5. Click Link.

NoteYou can only link to another item in this website and not to another website.

ii. Changing the Image

To change the image that is displayed in the image field:

1. In the Page Editor, select the image that you want to change.

2. Click the Choose an Image icon to open the Media Browser dialog box.

The Media Browser dialog box opens on the Search tab and Sitecore immediately searches for all the items available in the Media Library.

3. If you want to manually find the image that you want to use, click the Browse tab.

4. Select the image that you want to use, click OK, and the new image is inserted into the image field.


k. Modifying an Image’s Appearance

1. In the Page Editor, Select the image

2. Click Modify Image Appearance to open the Image Properties dialog box.

3. In the Alternate Text field, enter the text to be displayed when you move the mouse over the image.

4. In the Dimensions section, specify the dimensions that the image should be displayed in – if they differ from the actual size of the image.

5. In the Space section, specify (in Pixels) how much space should be placed around the image. Click “OK” when completed.

10. Adding a video to a page from the Rich Text Editor

1. In the Page Editor, select the area that the video will be placed. Click on the Rich text editor. The Rich Text Editor box will be displayed.

2. Select the area where you wish the video to appear and click on the “Embed Media” icon.

3. You will now see the wizard screen. NOTE: you can skip this page by clicking on the check box. Click NEXT.


i. Adding a New Video

1. Follow steps 1 through 3 at the beginning of this section. Select “Upload Media Item” form the tab

2. The “Select Media Item” box will be displayed. From the accounts list select the area that the video should be associated with and then click on “Add Files”


3. Select your video and then click on Open. NOTE: Video name is case sensitive so it should be in all LOWER CASE. Also, the preferred format for videos is MP4.

4. Click the “Start” button


5. You should receive a confirmation message that the file has been successfully loaded. NOTE: You must publish the account associated with the new video before it can be used on a page.

NOTE: After loading the video you need to add the following using the content editor

Thumbnail URL – This is a graphic representing the video if the visitor’s browser does not support the format. Click “Browse” to add the graphic. Important: The height of the graphic MUST equal the height of the video.

Optional: Alternative URL – Enter the alternative URL where you have placed this video (Youtube Vimeo, etc). This is done in the event that a visitor’s browser is not compatible with the associated video.


ii. To add an existing video

1. Follow steps 1 through 3 in the previous section. Select the video from the list. To search for a specific video, use the search bar at the top. NOTE: videos will have the following icon:

2. When you find your video click on it and then click “NEXT”.


3. The Properties Screen will be displayed. Here you can change the width and height of the video. NOTE: At this time there is only one player. After making your changes click on the “Finish Button”.

4. The video will be added to the RTE. Select “Accept” and the SAVE.

NOTE: The video will not be displayed on the page until you select “preview”


International SOS Australasia - Using the Page Editor in Sitecore/media/group... · Web...

Documents

Transcript of International SOS Australasia - Using the Page Editor in Sitecore/media/group... · Web...