340 likes | 491 Views
Content Tree > Everything has its place. Within Sitecore, all content and data is stored in it’s content tree . Keeping a highly structured organization is key to an optimized solution . Here is how the content tree is set-up. Starting point for all Sitecore Content.
E N D
Content Tree > Everything has its place. • Within Sitecore, all content and data is stored in it’s content tree. Keeping a highly structured organization is key to an optimized solution. Here is how the content tree is set-up. Starting point for all Sitecore Content Site Folder – Each site within Sitecore will have its own folder Home page for the Endicott site. All site pages will be children of this node. News area where all news articles will be stored. Site error pages. System node for the ECM. Do not use. Legacy content migrated in from the old Endicott Web Site. Settings – For admin use only, but will be visible to editors. Place to store all components used within pages. For example, items to be shown in the right-rail. The directory Structure in this folder will be created automatically. Legacy content migrated in from the old Endicott Web Site.
Site Data > Keeping all the pieces in order. • Each web site within the Sitecore environment will have a site-data folder. Here is where all page level components will be stored. The folder structure of the site-data area will mimic the structure of the site. • Components for a given page should be stored within its respective folder under site-data. • The folders are generated automatically when the item is created under the home node in the content tree. • The goal is to organize the various pieces of content into a manageable structure so that when editing a page it is immediately known where all of the content for the page exists.
Page Types > 31 Flavors. • There are a variety of page types that can be created within each site. Below is the current list of page types. During this initial entry these are expected to be modified.
Components and Page Editor • To add a component via Page Editor, go to the View tab and check the Designingcheckbox to enter Designing mode. • Next, simply click the Component button under the Home tab. • You will notice that grey Add to here icons now show up throughout the page. These are the locations in which you are able to add various components.
Components and Page Editor (continued) • Upon clicking one of the Add to here icons, a list of insertable components will be shown in a pop-up window titled Select a Rendering. Pick the desired component and click Select. • For further instructions on adding components, search this document for the proper component and follow the directions listed there. NOTE: In Page Editor, use Designing mode when adding components, setting associated content, and moving componentsaround on a page. Use Editing mode when editing the content of an existing component.
Data-Sources > Existing and New • After adding a component, you are able to choose between Select Existing Contentor Create New Content. • If Select Existing Contentwas chosen, select the appropriate content in the tree and hitok. • When choosing Create New Content, namethe new content, selecta location where the content will be saved, and then click ok.
Creating Data-Sources > Branches • To createcontent / data-sources from a branch using contenteditoryou must follow these steps. • *In this example we will be using the InterestingInfoBranch.* • InContentEditor, navigate to the appropriate folder within site-data. • Rightclickon that same folder, click on Insertand select InsertfromTemplate. NOTE: Be sure to save your work often by clicking the floppy disk button in the top left corner of the page editor toolbar.
Creating Data-Sources >Branches (continued) • Click the browse tab, locate and click on the BranchInterestingInfo template within the Branches node, give your item a name, and click Insert. • You will now seeyour new content / data-source neatly organized within your tree. • The parentitem holds your categoriescalled InterestingInfoCategory, and your categorieshold your • text items called InterestingInfoItems. • You must now editthe itemsthat were created by clickingon the children items and changingthe data in the fields. You can also editthe name that appears in the treeby clickingon the item and hitting F2on your keyboard or rightclicking the item and clicking Rename. InterestingInfoCategory InterestingInfoItems NOTE: See the Interesting Info slide for more information on adding this component.
Creating Data-Sources >Branches (continued) • If a secondcategory needs to be created, select the parent item, rightclick the item, click Insert, click InterestingInfoCategory, give the item a name, and click ok. • Your new item will show up in the tree and you may now add children items to it. • The processof adding children to categories is the same as the steps above. Select a category, right click it, click on Insert, choose InterestingInfoItems, • give it a name, and click ok. NOTE: Be sure to change the default data. This can be done within “Content Editor” or “Page Editor.”
Feature Box > Picture, Title, and Text • The Feature Boxis a small component that uses a Picture, Title, and RichText of your choice. • After adding this component to your page click inside the edit box so the Feature Boxedit buttons become visible. • Clicking the blue box with the checkmark brings up a new window where you will add content within the editable fields. NOTE: You will not see an image edit frame until an image is added to the component. This is the intended practice for this component
Feature Box >Picture, Title, and Text • Be sure to edit all fields appropriately. • To change or insert a Link, click on one of the Link buttons and follow the instructions on the insert link slides. • Be sure to edit the Text field by clicking one of the Textbuttonsabove the field and entering your text or html. • To change or insert an Image, click the browse button and follow the instructions on the insert image slides • After all of your content is entered hit ok. • Save your work by clicking the floppydisk icon in the topright corner of page editor.
Resources • The Resources component is simply a styled list of links with a customizable heading. It can be placed in the right column of a three-column layout. • Once you add the component to a page, go into Editing mode. You can easily change the heading by clicking on it and typing directly onto the page. • You can add links to the list by clicking on an “empty” area of the component. Upon clicking, a new toolbar will pop up. • Next, click the blueboxwith the checkmark to add links to the list.
Resources (continued) • In the next window, click the Editbutton to open the Select Items window • You can add items to the list (in the right pane) by double clicking them in the left pane, or selecting them and clicking the right-facing arrow. • When you are finished, click OK, then click OK again and save the page.
Social Media Buttons > Follow Us • Once the component is added to the page you will need to click the whitespace next to the title to bring up the edit buttons. • Click the blueboxwith the checkmark to open the content editor window. • To add or edit a link, click on the Insert External Link above the Social Media title and fill the URL field with your Social Media Profile link. • You can also edit the Title of the component by changing the text in the Title field. NOTE: If a field is left blank the button will not appear on the page.
Social Sider Bar > Twitter Feed • Once the component is added to the page you will need to click the whitespace to bring up the edit buttons. • Click the blueboxwith the checkmark to open the content editor window. • Fill-in all the fields in order to allow the component to pull in the Twitter posts. NOTE: If a field is left blank the component will not appear on the page.
Featured Events • The Featured Events component allows you to take a calendar feed from Active Data Exchange and have it display as a sidebar widget in the right column of a three-column layout. • To get this component working properly, first make sure you have an up-to-date Events script from Web Development. • Next, enter Designing mode in Page Editor and click the blue Component button. Click an appropriate Add to here icon. • Next, select FeaturedEvents and create new content for it.
Featured Events (continued) • After entering Editing mode, the newly added component should now look like this. • To add a title to this component click the white text on the grey background and type your desired titledirectly onto the page. • Next, click on the whitespace below the text fields. • You should see a toolbar titled Events. Click the blueboxwith the checkmark to content editor window for this component. • In the window that pops up, we can now add the Active Data Exchange script to the component.
Featured Events (continued) • The field you need to edit is called EventsJavaScript. • To add your script, first click the Edit HTML button. • The new window that pops up contains a text box where you will paste your events script. • After pasting the script, click Accept, then click OK, and save your work. • The page should refresh and, and assuming your script is valid, the list of events will now appear in the new component. • You can also edit the title (at the top of the component) and the link (at the bottom of the component).
Events (Home) • This slide covers the Eventscomponent on the home page. For the details of adding an events script to this component, please see the Featured Events slide. • To take advantage of the RSS feed option in Page Editor, go into Editing mode and click on an empty area in the Events component. • Once again, the Events toolbar will appear. Click the blue box with the checkmark to open the same window that you used when you added an events script. • This time, edit the RSS Feed field. Click Insert External Link and then paste the URL of the desired RSS feed (from Active Data Exchange) into the URL text box. • Click OK, then click OK again. Save the page, and now the RSS icon will link to your chosen RSS feed. NOTE: The event script on the home page will not run in page editor. Switch to preview mode to validate the feed.
Featured News • The Featured News component allows you to manually select a list of news articles for display in the right column of a three-column layout. • Enter Designing mode in Page Editor and click the blue Component button. Click an appropriate Add to here icon. • Next, select FeaturedNewsand create new content for it. Once the component appears on the page, click Save.
Featured News (continued) • Next, you will be able to select the articlesyou want to appear in the news listing. Enter Editing mode and click an empty area on the newly added component. • A toolbar will appear, with a title of News. Click the blue box with the checkmarkto bring up a new window. • This window has one field, called FeaturedArticles. Click the Edit button to view the TreeListthat will allow you to select your articles.
Featured News (continued) • In the left pane of this window you can select an article, then either double-click it or use the blue right-facing arrow to move articles to the right pane. • Articles that appear in the right pane of this window will appear in your listing, unless they have an expirationdate that has already passed. • When finished, click OK, then OK again. Now save your page and your selected articles should appear in the component. • You can also edit the title (at the top of the component) and the link (at the bottom of the component).
News (Home) • This slide covers the News component on the home page. For the details of selecting articles to display within this component, please see the Featured News slide. • An additional feature of the home News component is that the first article in the list gets featured, with largertext and a thumbnailimage. • The home News component also has an RSS icon in the upper-right corner. This icon allows you to link to a NewsRSSfeedthat can be created within Sitecore. • If you want to change the RSSfeed for this component within Page Editor, go into Editing mode and click on the RSS icon. This will open a Link toolbar. Click the link icon on the left to choose an RSSfeedfrom the Sitecore content tree. NOTE: See the Content Author’s Cookbookfor information on creating a Sitecore RSS feed.
Tabbed Component • The Tabbed Component allows you to add two tabs with either Featured Events, Featured News, or Recent News. • Enter Designing mode in Page Editor and click the blue Component button. Click an appropriate Add to here icon. • Next, select Tabbed Component and create new content for it. Once the component appears on the page, click Save. NOTE: Only this component or the Featured Events component can be used at a time.
Tabbed Component (continued) • Enter Editingmode to add text to the title of each tab. Be sure to saveyour work after making the changes. • Enter Designing mode in Page Editor and click the blue Component button. Click an appropriate Add to here iconthat is within one of the associated tabs. • Next, select one of the proper Event/News Components and follow the steps above for creating them. Once the component appears on the page, click Save. • HINT: When adding the proper component to the second tab, first select the tab to make it active before entering into design mode.
Announcement Bar >Title and Text • The Announcement Bar is a component that is used to display special announcements. It can be added to any page type. • When you add an Announcement Bar to a page and create new content, it will appear like this in Editing mode. • Notice that both fields contain the message No text in field. You can click on either field and begin to add text directly onto the page. NOTE: When both text fields are empty, the Announcement Bar will be invisible outside of Page Editor. If the page is published in this state, site visitors will not see the bar at all. This allows you to leave it on the page for future use, and to add or remove content as needed.
Galleries > Add Videos and Images. • There are five gallery styles to choose from. #1 through #4are good choices for displaying both Images and YouTubevideos, while #5 is best for Images. • Galleries can go in the center column of a three-column page, or the right column of a two-column page. • To add a gallery in Page Editor, click the Component button and choose an appropriate Add to here icon. • In the Select a Rendering dialog, choose which gallery style you would like to use, then click “Select”.
Galleries (continued) • In the Select the Associated Content window, you can select existing gallery content or create new gallery content. • After selecting the content for the new gallery and clicking OK, click the Save icon in Page Editor. • If you created new content, the gallery will now appear on the page with a couple of sample slides that you can edit, add to, and further customize. • If you enter Editing mode and click a blank area on a gallery, a toolbar will appear. Clicking the green plus sign edit button will allow you to add more slides to the gallery.
Interesting Info > (continued) • Each category and text item can be ordered, added, deleted and edited to your liking by clicking on the appropriate buttons. • In page editor, make sure the Editing button on the View tab is checked. • Clicking the outer most edit box shows the Category edit buttons. • Clicking the inner edit box allows you to edit the text items. • The greenplus button brings up a new window that allows you to add a new textitem. Name your item and press ok. • The bluearrows allow you to sort your categoriesortextitems. • The redX will delete the item in the edit frameyou • have selected. NOTE: Hovering your mouse over each button gives a brief description of what that button will do.
Recent News • The Recent News component lists a collection of news articles in reverse chronological order. The articlesthat display will vary, depending on several settings which you can edit. • Upon adding a Recent News component to the right column of a page and setting the content for it, you can edit those settings within Page Editor by going into Editing mode and clicking on an empty area within the Recent News component. • At this point, a toolbar titled Recent News will pop up. • Click the blue box with the checkmarkto open a window that allows you to edit the Recent News settings.
Recent News (continued) • The Tags field allows you to set the tagsthat you want to use to filter news articles. • The ShowArticlesWithOneTagfield will tell Recent News to display allarticlesthat contain at leastoneof the tags in the above Tags field. If this box is left unchecked, Recent News will only display articles that contain all of the tags in the Tags field. • The NumberOfArticlesfield determines how many articles the component will display. If the field is left blank or has a value of less than 1, the number will default to 5. • The MoreLinkfield lets you create a link which will appears at the bottom of the component. It can be used, for example, to link to further news listings for your section or department. NOTE: If an article’s expiration date has passed, it will not display.
Rich Text • The Rich Text component can be placed in the right column of a three-column layout, and allows you to add custom content. • As you can see in the example screenshot, this component can contain multiple lines of text and images. Beyond that you can style and format your text in various ways. • In addition, if you want to use customHTML for display on a page, this component will allow you to do so. • Once you have added a new Rich Text component to a page through Page Editor, you will see an empty bordered component with text inside of it that reads [No text in field].
Rich Text (continued) • To edit the content of this component, go into Editing mode. Now you can click on the text and immediately begin editing it. • If you would like to have more options in terms of styling the text, addingimages, or manipulating markup, click on the far left icon in the toolbar that appears. • You can now edit the text in this window, using the various buttons to add features and styles to your text. • Note that the Design tab is selected by default when you open this window. If you select the HTML tab, you can add markup directly to the text area, which can then be rendered on the page (within this component). • When you are finished, click Accept and make sure to save the page.
Rich Text with Title • The Rich Text with Title component is a specialized, left-column version of the standard Rich Text component. It allows you to enter a pre-styled Title and multiple lines of text with whatever formatting you choose. • If you have added the component to a page without using existing content, you will be presented with two fields that read No text in field. • Just go into Editing mode and you can immediately enter text in each of the these areas. Just make sure to click Save when you are finished! • This component is perfect for displaying things like office hours or contact information.