Adding a new Extension program page

1. Before logging into the Web Asset Management System, create a Word document that includes:
   1. A short program description – this gives end users a quick summary of what the program is about. Limit 670 characters including spaces (approximately 100 words).
   2. A long program description – for most programs, this is the program’s main webpage. It can include details about the program’s activities, upcoming classes, accomplishments and achievements, impact statement, history, etc.
2. Using Firefox, log into the Web Asset Management System.
3. Click Extension Programs.
4. Click Add New Program.
5. Add the program title.
6. Copy-Paste your short and long descriptions with no formatting; you can reformat afterward. WARNING: Microsoft Word is weird and failure to remove formatting may break accessibility, which means your publication may not be approved for posting to the website.
   1. Keyboard shortcuts:
      1. Windows: Ctrl + Shift + v
      2. Mac: Command + Shift + v
   2. To preview, click Save at the bottom left of the page, then within the Edit Program page, click Preview in the button ribbon at the top.
   3. CLICK SAVE CHANGES AT LEAST ONCE PER HOUR – the system will kick you out if you appear “inactive” for an hour, and it doesn’t recognize typing or formatting in the Long Description box as being active. The button is at the bottom of the page.
   4. The University-required annual training for people who create, edit or post content online will help you in making the webpage version of your publication accessible. Log into wcl.unr.edu to take the training online or visit Teaching & Learning Technology's website to enroll in an in-person session.
7. Add keywords
   1. List your keywords left-to-right in order of priority and importance.
   2. Include words that a general audience might Google.
   3. Include common misspellings of keywords.
   4. Include words that might be used in-house, such as jargon and acronyms.
   5. Include last names of program leaders and contacts, including common misspellings.
8. Select all relevant website areas – this lets your program show up on related pages.
9. Optional: If your program does have a separate website, you can add the website’s link to the Outside Link section.
   1. If the somewhere else on the web is an Extension website (e.g. livingwithfire.info), it must be accessible.
10. When the page looks the way you want, Click Submit for Review at the bottom right of the page. The communication’s team will receive an email asking them to review your submission for ADA compliance. If it passes, they will allow the program to show up on the website. If not, they will let you know that changes need made.

Adding images

Accessibility, ADA compliance and why we cannot use images containing text

Because of the funding the University receives, we are bound by federal law on accessibility to make sure everyone is able to experience the content on our site. A recent legal agreement between the University and the Office of Civil Rights in Washington, D.C. also obligates us to make our site content accessible. Plus, Extension’s purpose is to help people, including people who have an ability difference.

Alternate text, also known as alt text, helps people with visual impairments who use screen readers; however, not everyone with a visual impairment uses a screen reader. So, adding alt. text to an image with text on it will still leave some people with disabilities unable to experience the content on our site.

The accessibility checker that is used to monitor the University’s compliance with the legal agreement has a manual check in place that causes every single image to be examined for text. If an image without text cannot be found, the University’s placeholder image for missing visuals will automatically show up.

Preset images

Preset images show up with program titles and descriptions throughout the website There are three preset image types for a publication: content blocks, banners and thumbnails. Content blocks and thumbnails are required for a program page to be approved to show up on the website. However, after the initial approval, they can be updated without needing to contact the communication team. For more information on preset images, see How to add images to a scholastic work.

Embedded images

Some programs have images embedded in the webpage. These images will be added into the Long Description box after the text has been copy-pasted and reformatted.

How to embed an image into the long description of the program

Images must be jpegs that are no wider or taller than 586px. They can be smaller.
Tip: Check out LinkedIn Learning for videos on how to prepare images for the web.

1. Place your cursor where you want the image to appear.
2. Click the Image icon found in the second row of formatting buttons – the box with mountains.
3. Click Upload, the third tab across the top.
4. Click Browse and select your jpeg image.
5. Click Sent it to the Server. This will automatically bounce you back to the Image Info tab.
   1. This will also give your image a url. If you save this url, then you can embed the image in other programs and publications on the website without having to re-upload it.
6. Add alt text. Make sure it’s a brief and literal description of the photo, tying it to the program if possible (e.g. “two 4-H girls doing backflips,” “Master Gardener taking grape-inspection notes on a clipboard” or “peaches on a tree”).
7. Delete the numbers in the Width and Height fields, leaving them blank. This keeps the image from getting distorted on tablet and mobile phone screens.
8. Make sure words don’t touch the image by adding values to the HSpace (horizontal padding) and VSpace (vertical padding) fields.
9. If you want the image to float to the right with text filling the left side change the “Alignment” to right. The opposite will occur if “Alignment” is set to the left.
10. Click OK.
11. To edit your image, click the image and click the Image icon. Repeat until the page looks like you want it.
    1. To preview, click Save on the bottom left of the page, then within the Edit Program page, click Preview in the button ribbon at the top.
12. When the page looks the way you want, Click Submit for Review at the bottom right of the page.

Editing an existing Extension program page

1. Follow steps 1-3 for Adding a new Extension program page.
2. Find the program you want to edit in the list. Click Edit in the left column.
3. Make edits using steps 5-10 for Adding a new Extension program page as a guide, plus any steps for embedding photos.
   1. To preview, click Save on the bottom left of the page, then within the Edit Program page, click Preview in the button ribbon at the top.
4. When the page looks the way you want, Click Submit for Review at the bottom right of the page.

Adding a calendar widget to an existing Extension program page

1. Visit events.unr.edu. 
2. In the right sidebar's Share Events box, click the Widget builder link.
3. In the Template dropdown, select Default. (Other selections are not accessible and must not be used.)
4. In the Number of Results field, type 50. This is the maximum number of results that the widget can display.
5. In the Days Ahead field, type 365. This is the maximum number of days that the widget can display.
6. Configure the widget to display only the events related to your program by doing one of the following:

    

   1. In the Department dropdown box, select the office, topic or program for which you are building this widget, OR
      1. You must tag this department on every program event that you post to the calendar. If you don't, the event won't be pulled by the widget onto the program page.
   2. In the Keywords and Tags box, enter a keyword related to your program.
      1. The keyword must be unique enough that no other Extension or University program would use it. If the keyword is not unique and it is used by other Extension or University programs, their events will be pulled by the widget onto your program page.
      2. You must enter this keyword on every program event that you post to the calendar. If you don't, the event won't be pulled by the widget onto the program page.
   3. In the Content Must Match dropdown, select At least one place, group, keyword or tag, and one filter item.
   4. In the Widget Type dropdown, select List. (Other selections are not accessible and must not be used.)
   5. In the Style dropdown, select Classic. (Other selections are not accessible and must not be used.)
   6. Click Preview Widget. A new browser tab will open. It will show which upcoming events your widget will pull.
      1. If an event should appear here, but it doesn't, check that it's been posted to the calendar. Then, check that it's been tagged with the correct department or keyword. There is a delay from when you post or update an event to when the widget code will show it. You may have to wait awhile and press refresh a few times. If that doesn't work, check that none of the widget builder's Excluded Content boxes are completed. If that doesn't work, try different Content Must Match selections.
   7. Once you get the preview to pull events like you would like it to, click Generate Embed Code. Keep this window or browser tab open.
   8. Using Firefox, log into the Web Asset Management System.
   9. Find the program to which you want to add a calendar widget in the list. Click Edit in the left column.
   10. In the Long description buttons, click Source. This will show you in the text of the Long description box all of the code and content on your program page.
   11. Highlight all of the text in the Long description box, copy it and paste it somewhere safe. The database does not save backup copies of your program webpage. You want to have a copy to restore if adding the widget doesn't go as planned.
   12. Click Source again. This will show you the look and content of your program page.
   13. At the end of the content there (you may have to scroll down in the box), click into the box and type in the box the heading for your calendar. For example, Upcoming Events.
   14. Use the Long description buttons' Format dropdown box to set the appropriate heading level for the heading of your calendar.
   15. Click Source again. Keep this window or browser tab open.
   16. On your other window or browser tab that you kept open from Step 7, click in the Widget Embed Code box, highlight all of the code there and copy it.
   17. On your program website window or browser tab that you kept open from Step 15, scroll all of the way down to the end of the content there below your calendar heading from Steps 13-14. Paste the widget embed code. It should look something like this.

       <div title="localist-widget-70628945" class="localist-widget"></div><script defer type="text/javascript" src="https://events.unr.edu/widget/view?schools=reno&days=31&num=50&container=localist-widget-70628945&template=modern"></script><div title="lclst_widget_footer"><a style="margin-left:auto;margin-right:auto;display:block;width:81px;margin-top:10px;" title="Widget powered by Localist Event Calendar Software" href="https://www.localist.com?utm_source=widget&utm_campaign=widget_footer&utm_medium=branded%20link"><img src="//d3e1o4bcbhmj8g.cloudfront.net/assets/platforms/default/about/widget_footer.png" alt="Localist Online Calendar Software" style="vertical-align: middle;" width="81" height="23"></a></div>

   18. Delete this part of the code that you just pasted:

       <div title="lclst_widget_footer"><a style="margin-left:auto;margin-right:auto;display:block;width:81px;margin-top:10px;" title="Widget powered by Localist Event Calendar Software" href="https://www.localist.com?utm_source=widget&utm_campaign=widget_footer&utm_medium=branded%20link"><img src="//d3e1o4bcbhmj8g.cloudfront.net/assets/platforms/default/about/widget_footer.png" alt="Localist Online Calendar Software" style="vertical-align: middle;" width="81" height="23"></a></div>

   19. To preview, click Save at the bottom left of the page, then within the Edit Program page, click Preview in the button ribbon at the top.
   20. CLICK SAVE CHANGES AT LEAST ONCE PER HOUR – the system will kick you out if you appear “inactive” for an hour, and it doesn’t recognize typing or formatting in the Long Description box as being active. The button is at the bottom of the page.
   21. When the page looks the way you want, Click Submit for Review at the bottom right of the page. The communication’s team will receive an email asking them to review your submission for ADA compliance. If it passes, they will allow the program to show up on the website. If not, they will let you know that changes need made.
       1. One ADA compliance issue common with calendar widgets are events with the same name. If you have multiple events with the same name, enter them on the calendar as one event that repeats, not as separate events. If that's not appropriate for your event and you must enter them as separate events, then customize each event's title so that no two are the same.

Published by: Kozsan, T., Andrews, A. and Moore, R., 2019, How to create or edit an Extension program page, Extension | University of Nevada, Reno

An EEO/AA Institution. Copyright © 2024, University of Nevada Cooperative Extension.
A partnership of Nevada counties; University of Nevada, Reno; and the U.S. Department of Agriculture