They can be accessed at: 3&retain- filters=1

Transcription

1 DRUPAL 7/LUGGAGE TRAINING This is a condensed version of the step- by- step tutorials found online. The online tutorials also include videos. They can be accessed at: 3&retain- filters=1 Or by going to: and clicking on the Luggage Category in the Hamburger Menu. 1

2 TABLE OF CONTENTS Logging In... 3 Setting Up Your Public Profile... 4 Using the Content Editor The Paste Button... 8 The Table Button... 9 The Horizontal Line Button Text Formatting Button The Quote and List Buttons The Link and Unlink Buttons The Header Dropdown The Format Removal Button The Image Properties Button The Bottom Bar Creating an Announcement Creating a News Article Creating an Page Add a Summary Creating a Resource Creating an Event Creating a Webform Form Component Descriptions Adding Images Editing Your Image with the Content Editor Linking to Your Image Uploading Files Linking to Your Document Embed a Video Change URL Path Settings Creating Your Own URL Alias Scheduling Content Publish and Unpublish Content Edit Content Delete Content Changing Who Can Log In

3 LOGGING IN Go to the website, adding login to the end of the URL: name]/login This will take you to the Single Sign- On screen where you can enter your Net- ID and password. You will be redirected to the homepage of your site after you login. You can tell you are logged in when you see the red (or black) bar at the top of the page with options for content editing. The options in the top bar might look different; depending on what privileges you have on your site. 3

4 SETTING UP YOUR PUBLIC PROFILE Click on the link in the top bar that says My Public Profile. It will bring you to a page that has some minimal information about you that we got from the ISU directory when you signed in. Your job is to build this profile. Click the edit tab just below your name to edit your profile. Start by filling out the required fields. There are only a few of them. The first is your name. Next is the field called Tags, you may use as many or as few tags as you like. The position field is your official position at Extension and Outreach. You can add more than one if you hold more than one appointment. 4

5 Next up is the People Category. You should fit into at least one, but can select more than one if you fit in both. Your Area of Expertise should be a very short phrase describing your sub discipline. Now you have finished all of the required fields. Scroll to the bottom and click the save button. There are several optional fields you can also add to your profile. Profile Picture: Find a headshot and save it to your computer. Under profile picture, use the Browse button to find your picture. Once you ve found your picture and selected it, click the upload button. 5

6 You should now see a thumbnail image of the picture you chose. Please fill out the Alternate Text and the Title fields. The Education field should be self- evident. The Biography field should be used to introduce you to the person who is looking at your profile for the first time. The first sentence or two should succinctly tell what you do for the institution. After that you are free to talk about your research, your history, the special approach you have to your job, etc. The CV field will take a PDF of your CV should you want to share that. The Website field is a place to link to other examples of your web presence. You might want to link to your Twitter page if you are active on Twitter in a professional capacity. 6

7 Check the location fields to make sure that your address and phone are correct. If one of the specific fields below the Location field: Student, Faculty or Non- ISU People fit your position click to fill in the relevant information. When you are done filling out all of the optional fields that you want, click the Save button at the bottom of the page to save your profile. 7

8 USING THE CK EDITOR CK Editor is the text editor that Luggage uses. An explanation of each button and their functions follows. THE PASTE BUTTON On the left side of the top bar of the CK Editor, the first two buttons are two little clipboards; one has a T on it and the other a W. These buttons are the paste buttons. We recommend that you use the clipboard buttons to copy and paste text because they strip out any unneeded formatting. If you want to copy text from a Word Document, you will use the W clipboard. When you click on the clipboard icon, you should get a dialog box that looks like this: 8

9 Click ok and the text should be in the body of your CK Editor. The other past button, the T clipboard, should be used to copy and paste text from another website. THE TABLE BUTTON The next button in the top bar is the table creation button. This button allows you to create tables to organize data so that it is more readable to users. When you click on the table button, you will be shown a dialog box full of options for customizing your table. NOTE: Some of these options will not be available, even if they appear to be present in the text editor box before you save. We will only cover the features available for use. 9

10 Probably the most important setting when creating a table is the number of rows and columns. You will find this on the left side of the dialog box, as highlighted below: Your other option when creating a table is making the top row and/or first column into a header. 10

11 You can also format the text within a table as you see fit. The text inside of a table has the same limitations as body text. THE HORIZONTAL LINE BUTTON If you need to separate your content, then you may want to use the horizontal line. To use the horizontal line break, simply click on the button. The line break will be inserted into your body text where your cursor is. If your horizontal line is on the last or the first line of your text editor, you can hover your mouse over it. A red dotted line with an arrow symbol should appear. You can click on that to add a carriage return after your horizontal line. 11

12 TEXT FORMATTING BUTTONS The basic text formatting options: bold, italic and underline are located in between the subscript button and the quote button. NOTE: The underline format will not be available, even if it appears to be present in the text editor box before you save. To bold or italicize your font, simply select the text you want to format and click the bold or italic button. 12

13 THE QUOTE AND LIST BUTTONS The quote button is located between the underline button and the bulleted list button. It is useful when you want to indent part of your text. When you click on the quote button, the text in the CK Editor will be indented. However, the styling will change when you save the page. Here is what the quote looks like in the CK Editor: 13

14 After you save the page, your quote will look like this: If you need to offset a list from the rest of your content, you have two options: a bulleted list and a numbered list. Here is where the list buttons are located in the CK Editor: 14

15 To make a list, highlight the text and press the bulleted or numbered list button. THE LINK AND UNLINK BUTTONS The CK Editor will automatically link web addresses and s that are in the text box. The link and unlink buttons are useful for embedding links. To embed a link in the text, highlight the area you want the link in. 15

16 Next, click on the link button: A dialog box should pop up. Enter your URL into the dialog box. The will automatically be trimmed: Press Ok and the link should be embedded in the text. 16

17 To link to a page on your own website, follow the same instructions above, but before clicking ok in the dialog box to save the link, we are going to change the protocol. Above, we left it as but for a link on your own website we will need to change it to <other>: You will also notice that we do not include the full link to the page on the URL field. Instead of typing: extension.iastate.edu/[site- name]/people, we remove the main URL; extension.iastate.edu/[site- name] and just put /people. To unlink text in a page, simply highlight the part of the text that is linked and click the unlink button. The blue or purple text indicating a link should disappear. The unlink button is only clickable when a link is highlighted. THE HEADER DROPDOWN Sometimes, the content on your page has varying amounts of importance. If you have a title, for example, you want your users to be able to see it easily. While you could just bold the text, using headers is great for optimizing your webpage for search engines. 17

18 The header dropdown is found in between the link button and the text formatting removal button: To make your text into a header, simply highlight the text you want to make into a header and select the header size from the drop down. There are two sizes of headers available: header 3 and header 2. Header 3 is slightly smaller than header 2. The header tag transforms the entire paragraph that is highlighted, even if it is partially highlighted. You can fix this by inserting a return after the text you want as a header. Then, put your cursor in the paragraph you just made and change the text back to Normal in the dropdown box. 18

19 THE FORMAT REMOVAL BUTTON Sometimes, you need to remove all of your formatting. Maybe you accidentally made the entire page into a header. Or maybe you accidentally bolded random parts of your news story. Either way, the remove formatting button is a useful tool in the CK Editor arsenal. This is where the format removal button is located: Using the format removal button should be intuitive now, after learning how to use all the other buttons. First, highlight the text with the formatting you want removed. Next, click the format removal button. 19

20 It's that easy! One thing to note: the format removal button will not remove tables, special characters, horizontal lines, quotes, bulleted lists, numbered lists, or links. It does remove bold, italic, underline, and header formatting. THE IMAGE PROPERTIES BUTTON The last useable button in the CK Editor toolbar is the image- formatting button. If you click on an image and then click on the image- formatting button, you will be able to alter the properties of that image. First, let's find where the image formatting button is located on the CK Editor toolbar: If you click on that button while an image is selected, this dialog box will appear. 20

21 At the top of the image properties box is a text box labeled "Alternative Text." This box is usually populated when you upload the image. It is read by screen readers and search engine robots, and it is the text that appears should the image ever break. The "Alternate Text" field is the same text field that you can find in the file information when your image is uploaded. If you enter text there, you will notice 21

22 that it is the same as it is in the image properties dialog box. In this example, the text in the screenshot above is the same as in the image information below: Now, let's talk about the most prominent feature of the image properties dialog box: the preview box. This will show you what the image looks like within a body of text. You can preview the image's size, alignment, and horizontal or vertical space, as it will appear in your body text. Here is where the preview box is located: Next to the preview box, you can find the image resizing settings. Here you can change the image's height and width: 22

23 If you change the image height and width, its new size will be shown in the preview box: As you can see, the image became larger than in the other previews. Now, let's look at the two buttons next to the height and width. One of them is a little lock and the other is a circular arrow: 23

24 When you are adjusting the size of your image, it is important to make sure the lock is in the "locked" position. It is the button that maintains the aspect ratio of the image. If you resize your image without ensuring the aspect ratio is locked, your image will probably look stretched, such as in the image below: 24

25 Sometimes, you may want the image at its original resolution. You should be wary, however, because sometimes the image may be far too large to put the original size on the page, such as in the example below: Instead of leaving the image size at such a large resolution, I resized it back to 100 x 75. Let's move on to image padding. Below the image width and height, you will find text boxes for HSpace and VSpace: 25

26 Image padding is whitespace added to the horizontal and/or vertical area around an image. It prevents the text from running into the image if it is in line with the text (this process will be described later in this tutorial). You can see an example of HSpace and VSpace in action below. Next, below HSpace and VSpace you can find a dropdown called "Alignment." This will affect the alignment of the image in your body text. The default is not set, which does not make the body text flow around your image: 26

27 However, if you set the alignment to left or right, you will notice that the body text wraps around your image: The last thing this tutorial will cover is the link tab that can be found at the top of the image properties dialog box. 27

28 You will notice that it is linked to the people page of the site this image is located on. This link box operates almost exactly the same as the link button in the CK Editor toolbar. So in the same way, if you want to link to a page on your website, you will need to remove the URL before the first backslash (/). Now you should be well on your way to adding images to your pages! THE BOTTOM BAR HTML Element Examiner Let's start on the left side of the bottom bar. If you create a new page and look in the lower left hand of the body text editor, you will probably see a word and a letter, like in the example highlighted below: If you know HTML tags, you will recognize them as the body tag and the paragraph tag. The lower left- hand corner of the text editor shows which HTML elements are in the text you have your cursor on. If you click on one of these tags, you will notice that each tag's element will get highlighted. If you click on "body," the whole body text box will be highlighted. Similarly, if you click on "p," the whole paragraph will be highlighted: 28

29 You may be asking yourself why this is useful. If you have formatting that is making your page look strange, knowing which tags are being used would help tremendously. Also, if you are trying to get rid of linked text, you can see if there is a space with the link tag (which is an "a") in your paragraph. You can also use it to discover the element referenced by a tag. In this example, I didn't know what "span" referred to, so I clicked on the tag in the bottom bar: Span is a special HTML element that is tied to specific CSS styling. In this case, span refers to the spell checker. Text Box Resizer The other utility that comes in the bottom bar is the text box resizer. Are you creating content that requires you to see all of your body text to edit it effectively? If the answer is yes, then the text box resizer will come in handy. It is located on the right side of the bottom bar. Using the text box resizer is very simple. Click on the arrow that is highlighted above and drag the text box up or down until it is the size you desire. 29

30 CREATING AN ANNOUNCEMENT The announcement content type is used to present information about events or department news for site visitors (e.g. highlighting a department's accomplishments by showing off new research or displaying faculty awards). Because of the announcement's banner function on the front page, an announcement is often the first thing a site visitor will see. Keep that in mind when creating content. The announcement content type is unique in that most of the fields populated with information when creating an announcement do not appear on the front page. The user must click the banner image to read all of the information you have created. Step 1: Creating an Announcement Using the menu bar at the top of the page, hover over the "Content" tab and select "Announcement" from the "Add Content" menu. Step 2: Add Information to Fields I will start creating an announcement by filling out the required fields. The first is the title. I am going to make the title unique so that search can find the page. The title will also show up as the largest heading on the Announcement page. The next field is titled "Alternate URL." The alternate URL field allows us to link the announcement to an existing page. If we make an announcement about an existing news item, for example, we can enter the URL of the news story into this field and have the announcement banner redirect to that story. 30

31 The next required fields are category and tags. I selected "Economics", which is the best category that best describes my announcement. Multiple categories can be selected by holding down either the command button (on Macs) or the control button (on Windows machines). Tags are descriptive words that enable users to search for pages more easily. They also create a relationship between pages that have similar tags. The body text is the next field. This will contain the main text of my announcement. We can format the text; add images, links and files. Feel free to click on the screenshot to view a larger image. Step 3: Create and Add a Banner Image I noticed that there is a "Caption" field underneath the banner image upload button. The "Caption" field is overlaid on the banner image itself. There is a red star, meaning this field is required. It is the main image that will show on my homepage! 31

32 I am going to use a banner image related to my announcement. Remember: the announcement banner is required. The banner dimensions are 1180px 346px. The upload button can be found here: Now, I am going to look for the banner image on my computer and click on "Open" to upload the banner image. After uploading the banner image, I enter alternate text for screen reader use and a title that will be seen when a site visitor hovers over the image. Click on the image below to view its full size. Step 4: Publish Your Announcement After making sure that everything on my announcement is accurate, I will save the changes. It looks like the default setting on the announcement content type is to leave it unpublished. It appears I have permissions to turn the announcement public by scrolling to the bottom of the page, and clicking on "Publishing options". I checked the "Published" box. 32

33 If you do not have access to this checkbox, you can still publish your announcement by scheduling it for publishing. Enter a date and time for your announcement to be published. If you would like your announcement to only be published for a limited amount of time, you can enter in a date and time for "Unpublish on." Please note that your announcement may not necessarily be published or unpublished immediately at the scheduled time. Step 5: Double- Check Your Content As a good rule, I like to double- check anything that I create to make sure all of the information is accurate; links go to the right destination, and formatting looks correct. Here is my finished front- page banner: 33

34 Here is my announcement page: 34

35 CREATING A NEWS ARTICLE Step 1: Creating Your News Article Using the menu bar at the top of the page, hover over the "Content" tab and select "News" from the "Add Content" menu (Note: my menu may look slightly different than yours): Step 2: Add Information to Fields Start creating your news page by filling out required fields. The first is the title, which is the largest heading on the news page and should be unique so that your news item is more likely to be found in a search: Next, is the News Type field. This is a drop- down list that describes the kind of news item. I selected one item, but you could select multiple. 35

36 The next required fields are category and tags. Choose the category that best describes your news item. Multiple categories can be selected by holding down either the Command key (on Macs) or the Control key (on Windows machines). Tags are descriptive words that enable users to search for pages more easily. They also create a relationship between pages that have similar tags: The body text is the next field. This should contain the main descriptive text of your news story. You can format the text and add images. files or links. Click on the image below to view larger. The search result for News items will show up to 600 characters. Instead of using the 600 character limit, you can choose to create a summary, by selecting the "Edit Summary" link next to the "Body" label above the body text box. By doing this, what is in the summary box will show on search results and not be limited to a certain number of characters. I tend to copy from the body what I want in the summary and put it there. Remember that the summary is not the body, so they should be treated as separate purposes. The summary text editor will appear above your body text editor. Enter a summary of your news story into the box. Remember: the summary text will only appear on the front page and in search results. Here is an example summary of my news story: 36

37 Step 3: Publish Your News After you have finished adding and double- checking your content, it is time to publish your news page. Above the "save" button at the bottom of the page; you should find a menu system that looks similar to the one in the screenshot below. Click on the "Publishing Options" tab and make sure that the box next to "Published" is checked. Then click the "Save" button at the bottom of the page to submit your news item. 37

38 CREATING A PAGE The page content type is for any basic information, such as informative pieces, that do not fall into one of the other content types; announcement, event, news, people or resource. Step 1: Creating a Page Using the menu bar at the top of the page, hover over the "Content" tab and select "Page" from the "Add Content" menu. Step 2: Add Information to Fields To start creating a page, fill out the required fields. The first is the title. Make the title unique so that search finds the page. Next, Choose the Category that your page best fits into and add tags to describe your information. Remember that the Tags text box auto fills as you type, it's important to use appropriate tags repeatedly instead of adding similar but different ones. 38

39 Lastly, enter the body text. When you've filled in the necessary fields and are done adding images, files or videos to your page, Click Save. Add a Summary A summary is used in search results on your site. If you would like more control over what information is shown in the search results, you can use the summary. By default, if you do not enter a summary the text in your page will be trimmed to 600 characters. If you have less than 600 characters in your text, it will use all of the text. To add a summary, edit your page and scroll down to the body text field. Right above the text box, next to the word "Body" are the words "Edit Summary" in red. A new text box will appear called summary, right above the body field. Enter your desired summary in the text box. To collapse the text box again, click on "Hide Summary" at the top left hand corner of the text box. 39

40 CREATING A RESOURCE The resource content type is used for links that are off site. A good example would be a connect session recorded video or a partner affiliated link. This negates the need for landing pages and allows for better tagging and categorization. Step 1: Creating a Resource Using the menu bar at the top of the page, hover over the "Content" tab and select "Resource" from the "Add Content" menu. Step 2: Enter the URL Enter the URL of the offsite link you would like to use. Step 3: Save Scroll down and click the Save Button Step 4: Fill in Fields The next page that comes up will have grabbed the title and description of the URL that you entered. If no title or description is available, these boxes will come back empty and you will need to write your own. In the example URL that I'm using, the title and description were found and included in the text boxes. If you do not like the title and description that were returned, you may edit them now. 40

41 Next, enter the tags and select that category that you wish the resource to be associated with. You will notice underneath the Category box there are three red hyperlinks: Retrieved Raw Metadata, HTTP Request and Metatags, as well as some grayed out boxes. This is the information that was retrieved upon the first save when Luggage went out and tried to access the title and the description of the URL you submitted. You do not need to do anything with these components. Step 5: Save and Review Scroll to the bottom and click the Save button. Your Resource should look similar to what is below, if your site is not currently using the resource screenshot feature, you will not see an image included: 41

42 CREATING AN EVENT The event content type includes a calendar so that site visitors can view events in a list. Visitors can also view events by day, week, month and year. I like to post event pages to the front page so users can easily see upcoming events. Step 1: Creating Your Event Using the menu bar at the top of the page, I hover over the "Content" tab and select "Event" from the "Add Content" menu (Note: your menu may look slightly different): Step 2: Add Information to Fields The first field is the "Title". This is what will appear at the top of my Event page. The title is also the largest heading. Instead of just typing "Introduction", I added "to Luggage" to give the title some uniqueness to help with search. Next, is the "Event Type" field. This is a drop- down list that describes the kind of the event. Each website may have its own set of event types. I selected Seminar. However, to select multiple types use Command key (on Macs) or the Control key (on Windows machines): 42

43 The next required fields are category and tags. Choose the category that best describes your event. Multiple categories can be selected by holding down either the Command key (on Macs) or the Control key (on Windows machines). Tags are descriptive words that enable users to search for pages more easily. They also create a relationship between pages that have similar tags. I selected user guide with tags content types, Drupal 7x, training and site creation: Next, is the date and time of your event. You must enter your event time in the exact format that is given in the event time field: 14 Jan :45pm. Start time is required, but you do not have to enter an end time. If you do not have an end time, make sure the "Show End Date" box is unchecked. I decided to use both the start and end date: Example event with only start date: 43

44 The body text is the next field. This should contain the main descriptive text of your upcoming event. You can format the text and add images or links. I have already listed the title, event date, and event time, so I do not need to list those items again in the description. If you have a lengthy event description, you can add a summary that will be used for search results and the "Event" tab of your website. Step 3: Publish Your Event After adding and double- checking my content, it is time to publish. Above the "save" button at the bottom of the page; you should find a menu system that looks similar to the one in the screenshot below. Click on the "Publishing Options" tab and make sure that the box next to "Published" is checked. Then click the "Save" button at the bottom of the page to submit your event. 44

45 CREATING A WEBFORM Webforms are a powerful tool for making forms such as contact forms, surveys, order forms, etc. that are highly customizable. In this tutorial we will walk through all the aspects of creating a webform. Creating the Initial Webform First, make sure you are logged in. Then navigate to the editing menu in the top red bar. Hover over Content and a drop down menu will appear where you can then hover over Add Content, opening another sub menu. In this sub menu click the option Webform. Once in the Webform page you can now add a title for your webform, select a category that the form should go under, and add relevant tags relating to the topic of your webform. In the body section you can add any content that you wish to appear above the form fields. 45

46 Next you need to save your webform. Scroll down to the bottom of the page and hit the Save button. Customizing Your Webform After you have saved your initial form you can now begin customizing the form to fit your needs. The Webform tab should be automatically selected and your page should look something like the one below. This is where you will add the fields you wish participants to fill out. Make sure you have the Form Components tab selected (it should be automatically selected). Enter in the component name, the type (the different types are explained in detail below), check the required box if you would like the field to be required and then hit the "Add" button. Once you click "Add", you will be taken to a separate screen where you can add additional information for this component; such as a description or default value. Continue until you have added all of your form components. NOTE: Once you have created multiple form components, you can edit in what order they will appear to the user by dragging them below or above each other. Form Components 46

47 Form Component Date The date field is exactly what it says it is. It allows your end user to enter a date of their choosing, but you can customize the time zone, decide whether to show day, month, and year options or to hide any of these options, edit the start and end dates that users will be allowed to enter, and decide whether to enable the pop- up calendar or allow users to enter a date in a textbox field. Form Component The component is where the end user can enter a valid address. Using this component your can select whether the form automatically enters the they are logged in with as the in this form, select a default value that will appear before the user enters their own , select whether you wish to allow for multiple s to be entered into the same field, decide if every entered throughout the course of this form should be unique (meaning some cannot fill it out multiple times with the same ), and enter a placeholder (example address), among other options. Form Component Fieldset The fieldset allows you to group fields together. They can be arranged to be collapsible or not, it's up to you. An important thing to remember with fieldsets it that to actually have fields appear within it, you must drag components you wish to group together under your fieldset component like the example with the Question field set and Answer textbox below. Form Component File The file component allows a user to upload a file. It is best practice to limit the file size and file types (preferably images, PDFs, or Word Documents). For security reasons, do not ask users to upload personal information on document form. Form Component Grid The grid component provides an area where you can have multiple questions, or allow users to provide a rating. This displays like a table. Form Component Hidden The hidden component is probably one you will not need you use. It is not visible to the end user and collects data that can be automatically generated. 47

48 Form Component Markup The markup component can be used for entering a new description or your own text part way through the form. It's really not too useful in most cases. Form Component Number The number component will only accept numeric values and can be displayed as a textbox or as a list. You specify the numeric range. Form Component Page break The page break component allows you to break up your webform into multiple pages. The description you entered in the body section in the initial webform will appear at the top of every page. Form Component Selection Options The selection option component is for creating drop downs, radio buttons, and checkboxes. Form Component Textarea The textarea component allows the user to enter multiple lines of text into a box (like writing a comment). Form Component Textfield The textfield allows that user to enter one line of text, usually a few words and with no formatting. Form Component Time The time component is very similar to the date component, allowing the user to enter a time value. Conditionals Conditionals are very powerful, but are a more advanced feature of webforms. They allow you to use field components you have created and change how or when they are displayed based on data that is entered by the end user. For example: if you have a specific user whose is (john@ .edu) and you want to make sure he fills out the date field, you can set a conditional that will recognize when he has entered his and mark the date field as a required field specifically for him. (see the example below). 48

49 s Under the s tab you can decide who will receive the results of the webform via . If you set it to value " " it will send an to each person who fills out the form, only showing them their own results. If you decide to enter a specific , or multiple s, that person or persons, will then receive the results of every webform filled out. Form Settings The form setting tab allows you to create a confirmation message that will be seen after the webform is filled out. This can be a simple thank you or a link that redirects them to a thank you page. You can also edit who has permission to fill out this webform based on their roles, as well as set up a progress bar, a preview page option, allow users to save the form as a draft, set up automatic draft saving between pages of your webform, close the form when the submission period is over, and several other more advanced options. 49

50 ADDING IMAGES This tutorial will show you everything you need to know about adding images to your content. This tutorial is broken up into four parts: basic image uploading, adding alternate and title text, editing your image with WYSIWYG, and linking to your image. Let's get started! Basic Image Uploading Find the image uploader located below the body text editor: Click on the "browse" button and look for the image you would like to upload. Then select your image. You may want to double check that your images have a compatible file format. Images can be png, gif, jpg, and jpeg. Click "open" to select your image. The filename will be displayed by the "browse" button. Click on the "upload" button (outlined in red below) to upload your image: 50

51 Repeat this process for all the files you would like to upload. Your uploaded images should look like this (click for larger image): Congratulations, you've successfully uploaded your image(s)! You're almost ready to insert them into your body text. Now we're on the last step: adding a description of your image into the "alternate text" and "title" boxes. Alternate and Title Text You will notice that each uploaded image has two text fields: alternate text and title. Alternate text is a description of your image that will be read by screen readers. Good alternate text will describe the medium of the image (e.g. photo, screenshot, chart, etc.) and will give a brief description of the image itself. Example: "Photograph of soybean field." Your title text is the text that your site visitors will see when they hover their mouse over your image. Title text does not have to be as descriptive as the alternate text. Here is the Luggage logo with alternate and title text: Inserting your image into the body text is simple. Click the "insert" button next to the image filename. The image will be inserted at the location of the cursor in the body text editor. 51

52 Now your image should be added to your body text. If you are unsatisfied with the position of your image within the body text, you can click and drag it to a new location in your body text. You may notice that your image has been resized to smaller dimensions. That is because images over 300 pixels wide are automatically resized to have a width of 300 pixels when they are inserted into WYSIWYG. We will go into more detail on this in the next section. Editing Your Image with WYSIWYG Now that you've successfully uploaded and inserted your image, it's time to utilize the image editing settings that WYSIWYG gives you. Before we get started in this section, it should be noted that the WYSIWYG editor only works for images in the body text itself. If you link to an image, it will be shown in its original format. Let's take a look at the available functions by double clicking the image or selecting the little image button in the editor: First, you'll notice that the alternate text you entered in the file information area appears in the first text box in the menu. Next, you'll notice that your image appears in the "preview" box, along with some preview text taken from Lorem Ipsum. Another thing that you may notice is that there are two boxes labeled "width" and "height." Next to these text boxes are two icons: a lock and a circular arrow. The width and height boxes alter the size of your image in the body text: 52

53 If the lock is in "locked" position, it means that altering either the height or the width of your image will maintain aspect ratio. This means that if you change the height, the width will change proportionally. If the lock is in the "unlocked" position and you change the height or width, then your image will not maintain its aspect ratio. Clicking on the circular arrow will revert the image to its original size. Remember: images are automatically resized when they are inserted into WYSIWYG if they are over 300 pixels wide. You can quickly override this by clicking on the circular arrow. Be sure to preview your page with your image on it to make sure that your image is the size that you want Next, there are HSpace and VSpace, which creates padding around your image: 53

54 HSpace is short for Horizontal Space and it controls the padding to the right and left of the image. VSpace means Vertical Space and it controls the padding above and below the image. Most images look best with an HSpace and VSpace of 5. Another function in the WYSIWYG image editor is image alignment. You can choose to either left- or right- align your image: When you change the alignment of an image, your body text will automatically wrap around it. If you align your image to the left or right, be sure to use some HSpace and VSpace or the text will crowd the image too closely. To the left is an example of the Luggage logo with 5 pixels of HSpace and VSpace, scaled to 100x100, and left aligned. The last function in the WYSIWYG editor is the "Link" tab, which you can find at the top of the dialog box. This tab is an easy way to link your image to a URL. Click on it and you will be brought to this view: Next, copy the URL of the site you want to link your image to and paste it in the box. If you want to link to another page on your site, delete your URL up to the first backslash. 54

55 The other thing highlighted in this screenshot option is the ability to change where your link will open. If you choose no options, your link will open in the same window/tab as the website. After you are done using the WYSIWYG editor, click the "OK" button to save your changes. As mentioned above, be sure to double- check your changes to make sure that your image looks nice. Linking to Your Image The last thing left to learn is how to directly link to your image. First, go to where your image is uploaded. The direct link to your image can be found where the filename is, boxed in red in this image: Right click your filename and select "Copy link URL" from the menu. 55

56 If you are directly linking to the original image in your body text, remember to delete the URL up to the first backslash. Directly linking to the Luggage logo image would look like this: With this shortened URL, you can either link to your image by embedding it somewhere in your body text or by linking it an image in your body text. 56

57 UPLOADING FILES Need to add a document to a page? The file types that you can add to your created content are: pdf, xls, xlsx, doc, docx, rtf, ppt, or pptx. Creating a Document Link First, find the file upload section below the body text editor. It should look like this: Click on the "browse" button and look for the file you would like to upload. Next, select the file. Click "open" to select your file. The filename will be displayed by the "browse" button. Click on the "upload" button (outlined in red below) to upload your file: Repeat this process for all the files you would like to upload. After you have uploaded your file, it should look like this (click for larger image): 57

58 An easy way to add your document to your body text is to simply click the "insert" button next to the filename. Adding the file in this manner will look like this: example.docx Customizing the link text to your document You can also embed your file within your body text, though this process takes a little more work. First, right click on the name of your uploaded file. Select "Copy Link Location." Next, find the text that you are going to link the file with. Highlight the text and click the link button in the body text- editing menu: Paste the file link URL into the dialog box, as shown in the image below: 58

59 Then, delete the first part of the URL up to the first backslash, leaving the first backslash. The link protocol should change from " to "<other>," as follows: Be sure to double- check that your link is unbroken and leads to the right file. 59

60 EMBED A VIDEO The video feature is currently only available on the page content type. Should you need this feature with another content type, please contact Extension IT. The video feature works with YouTube and Vimeo. We recommend that all videos used by Extension and Outreach staff be hosted on one of these two platforms. Step 1: Create a Page Your first step will be to create a page. You can do this by going to content in the top red menu bar, hovering over "Add Content" and selecting "page". Step 2: Add Video URL Near the bottom of the page, directly underneath the options to add images and files to your page, you will notice a box that says "Video". Enter the YouTube or Vimeo URL in the "Video URL" text box and the description of the video in the "Description" text box. Step 3: Add Additional Videos If you want to include more than one Video on your page, you can click the "Add another item" button and add as many additional videos as you need. Step 4: Save Scroll to the bottom of the page and hit "Save" Your video will appear at the top of the content of your page. 60

61 CHANGE URL PATH SETTINGS In this tutorial you will learn how to change the URL for a page. Step 1: Navigate to the page you wish to change and click edit. Step 2: Scroll down to the bottom of the page and find the URL path settings option. Automatic URL Alias An automatic URL alias (the check box option for this is automatically selected) will use the title that you created for this specific page. So, if your page has a title of People, your automatically generated URL alias will be Creating Your Own URL Alias To change the URL to a customized alias, uncheck the Generate automatic alias box. This will now allow you access to the text box below that is titled URL Alias. In this text box you can now enter an alternative URL. In this example, I typed team in the box. Now the URL for this page will say NOTE: This does not change your page title, just the URL that the page can be accessed at. 61

62 After changing the URL Alias to your preferred term or terms, hit SAVE and your URL will be updated. NOTE: If using a URL alias with multiple terms, use a hyphen instead of spaces in between the words. For example: "creating- announcements" 62

63 SCHEDULING CONTENT By default announcements (and the banners) are not published. Sometimes, it is desirable to schedule it to be published at a later time automatically. For example, you may want to automatically publish an announcement detailing a new publication that has embargo restrictions that lift at midnight. With the scheduling feature, you can schedule the announcement to automatically get published after midnight. It also works the other way. You can schedule an announcement to become unpublished after a certain date/time. For example, you may have an announcement advertising a lecture. Once the lecture is over, you don't want it to be advertised anymore. You can set it to be unpublished after the event begins or is over. To schedule a content type for publication, you can set the times in the "Scheduling options" vertical tab at the bottom of the announcement form. Note: Publishing and unpublishing on a schedule happens through cron. This means that the publishing/unpublishing will happen on the first cron run after the date/time specified. For example, if your site's cron is configured to run once per hour at the top of the hour and you schedule content to publish at 12:01am, it will not actually be published until the next cron run at 1:00am (59 minutes later than expected). 63

64 PUBLISH AND UNPUBLISH CONTENT Step 1: Make sure you are Logged In Step 2: Edit Tab The checkbox to publish and unpublish content is an option at the bottom of your options under the "Edit" tab. You may not see as many options as listed above, however if have been given publishing rights, you will see the box highlighted above. Step 3: Check or Uncheck the "Publish" Box Step 4: Save 64

65 EDIT CONTENT In this tutorial, we will cover how to edit content. This tutorial uses the pages content type as an example, but each content type will have similar instructions. Step 1: My Content To view content that you created, on the top red bar click on "My Content". To view content that other users have created, click on "Content" on the top red bar. For this tutorial, we will use the "My Content" option for demonstration purposes, but the instructions would be the same for either "My Content" or "Content". Click the title of the piece of content you wish to edit. Or click "Edit" to the right hand side of the content if you've selected "Content" from the top red bar. Step 2: Edit Content Once on the page for your selected piece of content, click on the "Edit" tab that is just under the title. This will take you to a screen just like when you add a piece of content and allow you to change or edit any fields. Step 3: Save Hit the save button at the bottom of the page, and that's it, you've successfully edited your content! 65

66 DELETE CONTENT In this tutorial, we will cover how to delete content depending on your site permission. This tutorial uses pages as the content type, but each content type will have similar instructions. Content Editor Permissions For those with content editor permissions, you will only be able to delete pages or other content you have created yourself. Follow these steps below to delete a piece of content. 1. In the top black or red bar click on My Content. 2. This will take you to a list of all the content you have created. Click on the piece of content you wish to delete. 3. This will pull up the piece of content, click the Edit tab. 4. When in the Edit tab, scroll down to the bottom of the page and there will be a delete button. 5. After you click delete, you will be asked if you are sure you wish to delete this content. Click delete to permanently delete, or cancel if you have changed your mind. (NOTE: Once content is deleted, it is gone forever. You can always unpublish content that you no longer want up on your site if you think you may need to access it later). Content Publisher Permissions If you have content publisher permissions, you will have the ability to delete any content, anywhere within the site. You will also have a couple options you can follow to delete the content. 66

67 Option 1: You can access content that you wish to delete the same way content editors do. Option 2 (published content only): Navigate to the piece of content you wish to delete on the site. From here you can click the Edit tab, scroll down to the bottom of the page, and hit the delete button. When asked to confirm the delete, click the delete option. Option 3: With content that is being compiled into an over arching page, you will see this little gear symbol when you hover over the piece of content. When you click the gear, you will see a drop down menu that has two options: edit or delete. Click Edit to delete the content just like option 2, or just click delete to delete that content. 67

68 CHANGING WHO CAN LOG IN To change who is allowed to log in, use the "Change who may access this site" menu item: Then enter the netid of the person you want to give access to the site and click Submit: After clicking Submit the person's netid will appear in the list of netids with the Account Status set to "future", meaning they have not yet logged in. Optionally, I can assign roles to future users. Generally, site editors for my site will have "content editor" permissions only and most faculty, staff, students who will want to update their profiles, will not have any roles selected, which means they have basic authentication rights. 68