Welcome to editing for the DSA!

Please add our Teams Chanel "DSA Web Editors" to your Teams pages for occasional updates and information.

Typical Image Sizes for DSA Web Photos:

WxH @ 500kb or less

Type

Standard:

Suggested image dimensions: 1200px x 400px (300ppi)
Maximum safe image file size: 1MB
Target file size: 250KB - 500KB

Mobile:

Suggested image dimensions: 740px x 417px
Maximum safe image file size: 500KB
Target file size: less than 125KB

Hero Block

2250x750 (300ppi & 1000kb for best resolution)

Slider Announcements

200x140

News & Blog Post

360x160

Program & Service Photo

Image Optimization Resources: 

 

The file system (figure 1) is where website file assets are stored.  These are the primary images and documents (pdf, doc/docs, etc…).  A folder has been created for each department/organization/office and within each such folder, there are at least two subfolders: images and documents.  In some cases, related files have been organized under additional subfolders (for example for some programs or services).

To be able to add an image or a document to a web page, first upload the file to the file system under the correct folder.  Please always remember to select the correct folder before uploading a file. 
*Please review image optimization standards above in order to reduce your file size before uploading images.

Figure 1

Figure 2

  1. Log in to the site and type /imce from the homepage to get to the file system, i.e. studentaffairs.unt.edu/imce.
  2. On the left window pane of the file system (see figures 1 and 2), select your folder and then the correct subfolder (images, documents).
  3. Click upload at the top left of the file system (see figure 2).
  4. Click browse on the pop-up dialogue and locate the file to upload. 
  5. Click upload on the pop-up dialogue to upload the file.
  • All lower case letters (no caps)
  • A hyphen instead of a space or underscore

Accessibility

Intro to Accessibility: webaim.org/intro
Learn Accessibility for Web: web.dev/learn/accessibility
Website Evaluation Tool: wave.webaim.org
Accessibility Examples: https://www.w3.org/standards/webdesign/accessibility
Contrast Checker: https://webaim.org/resources/contrastchecker/
UNT Color Contrast Grid Checker: https://identityguide.unt.edu/unt-color-contrast-grid 
JAWS Keyboard Shortcuts:https://webaim.org/resources/shortcuts/jaws 
UNT Identity Guide Accessibility Requirements: https://identityguide.unt.edu/build-your-project/web-email-social-media/accessibility-requirements
DSA Digital Accessibility Guidelines: /accessibility

Visio Accessible Org Charts:: https://www.youtube.com/watch?v=Hmyz6cFAogM

 

Images

  • Titles: Good practice to save the web optimized photo with a descriptive, simple title before uploading to the IMCE.
  • Ex: Correct Title for Web: yellow tulips  Incorrect Title: IMG00645_5412_Tulip.jpg
  • Alt Tags: Same as “correct” title, or even more descriptive. Don't put “photo,” the screen reader says “Image” after the alt tag text. Remember to be descriptive- instead of just “flowers” think of what you see in the photo.
  • Captions: Important on all images and photos, even if you have information in the body of the page.
  • Links: Advanced Option- Set Advisory Title, this will explain what the link goes to instead of what is linked. For example: If you have the number 30 linked to our 30 department programs, you would want it to say “30 department programs” instead of “30 link” For this case, you would just need to put “department programs” in the advisory title. It will read” “30 department programs.”

PDFs

Both Image & PDFs

If you want to use a flyer in the body of your page.  See the following:

  • If your flyer is a PDF:
    Convert your PDF to an image and place in the body.
    Link the image to the accessible PDF
  • If your flyer is an Image:
    Add some descriptive text in the body.
    Add a “printable” pdf version below the image, or link the image to a pdf.
    Be descriptive in your alt tags and caption.

Accessible Org Charts: To ensure the DSA organizational charts are accessible to all users we will require a text version as the primary means of displaying a department's organization chart/structure on the DSA public-facing websites. An accessible PDF depicting a more graphical version of the chart may also be included as an option, but it must be tested for accessibility.

Adding a Calendar Event

All events are added on the website via widget from calendar.unt.edu. Please enter the department as "group" and the DSA as "department" when adding your event.

A small block display of the event will automatically show up on the department's homepage once the event is added.

If your department doesn't already have a department event widget showing on their homepage, please reach out to dsaweb@unt.edu for setup.

Adding a Post (for blogs and news)

A small block display of the post will automatically show up on the selected department's/organization's homepage.

  1. Log in to the site.
  2. Click on Add content at the top left of the Drupal 7 menu bar (see figure 3).
  3. Select Post from the drop-down list.
  4. Under Title input the title of the post.
  5. If you have an image for the post, click on SELECT MEDIA, and then Browse on the pop-up dialogue.  Locate the file to upload and click Submit.  The image will be attached to the post you are creating.  NOTE: uploading an image directly into the file system following the steps in I above will not work here.
  6. Under Body, input content for the post.
  7. Under Posted for, select the appropriate department or organization.  NOTE: This is what allows the post to be displayed on a department's/organization's homepage.
  8. Click Save.

    1. Log into the site.

    2. Click on Add Content at the top left of the Drupal 7 menu bar.
    3. Select Image Galleries from the drop-down list.
    4. Enter the title of the Image Gallery
    5. Under the body, add some details about the gallery.
    6. Scroll down to Gallery Images.
    7. Add photos by selecting the Choose File button and selecting the photo you want to add.

      Note: Refer to image optimization for web in order to reduce your file size before uploading:
    8. Click Open, and then Upload to add the photo to the gallery.
    9. Repeat 6 and 7 until all the photos you want uploaded have been uploaded.
    10. Scroll to the bottom and select Save to save the Image Gallery.
    11. All Galleries must have the url updated to connect to your department/special initiative for continuity and analytic purposes. Notify dsaweb@unt.edu that the gallery has been created and where you would like it placed

  • Staff profiles will automatically show up under the staff profile page for the selected department/organization.

    1. Log in to the site.
    2. Click on Add content at the top left of the Drupal 7 menu bar (see figure 3).
    3. Select Staff Profile from the drop-down list.
    4. Under Title input the person's full name, along with titles.  This will appear on the profile.
    5. Input prefix under Name Prefix, if there is one.
    6. Input first, middle and last names (under First Name, Middle Name and Last Name).
    7. Input suffix under Name Suffix, if there is one.
    8. Input the person's position title under Position Title.
    9. Input email, phone and location if desired (under Email, Phone, and Location).
    10. Input bio content under Bio if there is one.  NOTE: this is intended to be a few lines.
    11. Under Dept/Org (ER), select the appropriate department or organization.
    12. If your department/organization uses a staff category, select one under Staff Category.
    13. If your department/organization uses a display order for staff profiles, input a number under Profile Display Order.  NOTE: Profile Display Order starts at 0.
    14. Click Save.

  • Figure 4

     

    To edit content on a page, first, log in to the site and navigate to the page. Once on the page, click on the dark gray tab labeled “edit” on the right side of the browser window. This will open up the page in edit mode which will look like a form with multiple fields. The number and type of fields will vary depending on the type of content being edited (event, staff profile, post, program/service sub-page etc…).

    The content of a page will be found within the “Body” field (figure 4). At the top of the “Body” field are three rows of buttons providing various options for editing the content. The most frequently used ones are described below. All icons discussed below are indicated in figure 4.

    Final Note
    The content region contains a template (code) that controls the style and layout of content. Deleting the entire content, for example by doing select all (CTRL+A) and then deleting, will also delete the template. Any content added afterward will not be displayed properly. Therefore, when deleting text, it is best to first select the text and then delete.

     

    1. Numbered List

      To create a numbered list, select the text first and then click on the numbered list icon. Alternatively, click on the numbered list icon to begin creating a numbered list. To change the numbering style (decimal, roman, alphabet) right-click anywhere on the list and select Numbered List Properties. On the pop-up window, select numbering style under Type. To start the list at a specific value input the value under Start. Click OK when done.

    2. Bulleted List

      Similar to #1 above, but will create a bulleted list. The style of bulleted lists can be modified just like numbered lists via the steps given above in #1.

    3. Quote

      A block of text can be turned into a quote which has a special formatting and style. To create a quote, select the text and click on the quote icon. Alternatively, click on the quote icon and type in the text.

    4. Image

      Images can be inserted anywhere on a page. Before doing so, image files must first be uploaded to the file system. Refer to the documentation titled “Drupal 7 Website File System” for steps on uploading images to the file system.

      Note: Refer to image optimization for the web in order to reduce your file size before uploading.

      To add an image to a page, first, click on the image icon. On the pop-up window, click on Browse Server to open the file browser. Use the left pane of the browser window to navigate to the location of the image and then select the image to be added by double-clicking on it on the right pane. Back on the pop-up window, the URL field should now contain the path for the selected image.  NOTE: Input a percentage value for Width and leave Height blank. Typically we use 100% for the whole width of the screen.  Doing so will ensure that the image stays within the page, maintains its aspect ratio and automatically adjusts when the browser is resized. Before you are finished make sure that you add ALT Text in the alt field for every image. Click OK to complete inserting the image. The image should now be visible inside the “Body” field.

      To replace an existing image, simply double-click on the image to open the pop-up window. Follow the steps above to select the replacement image.

    5. Table

      To insert a table, first, click on the table icon. This will open a pop-up window containing table properties. Specify the number of rows and columns. Select the type of header if necessary. For a table with no borders, set Border Size to 0. A table has a default width of 500 px. Change this to a percentage value to create a table that will adjust automatically when the browser is resized. We typically use 100% to fill the whole screen. When done setting the properties, click OK. The table is now ready to be filled with text.

      To modify an existing table, right-click anywhere on the table. On the pop-up window, select Row, Column or Cell to make modifications (add/delete rows etc…) to any of the three properties.

      To change the individual Cell Properties - right click on the cell, click on cell on the drop-down menu and click on Cell Properties to open a pop-up window. Click on Choose next to background Color to determine the color of the background for that cell. Click on Choose next to the Border Color, and select white to delete the borders of the cell if needed.

      Delete Table - right click and select delete table to delete the table altogether.

      Select Table Properties to open the pop-up window described above and modify the table (headers, border size, etc…).
       
    6. Iframe (video)

      Video can be added to a page in one of two ways: using a YouTube link or using a video file which must first be uploaded to the file system (refer to step 5 above). To add video to a page, click on the Iframe icon. In the pop-up window, under URL input either the YouTube link or, if using a file, the path to the file. Specify the width and height and click OK.

    7. Text Style

      Options available for styling text (see figure 4):

      • B - Bold
      • I - Italicize
      • U - Underline
      • S - Strikethrough
      • X2 - Subscript
      • X2 - Superscript
      • Tx - Remove all text styling and revert back to default
    8. Headers

      To create a header text, first, select the text and then select a header size (h1 to h6) from the drop-down list. Alternatively, select a header size from the drop-down list and type in the text. Select “Normal” for default text size. On all sites, page titles use header size h1 and section headers in a page use h3 and h4.

    9. Font Size

      Font size for text on a page is automatically set to a default size (16 px). In certain cases, if there is a need to create text with a font size smaller or larger than the default size, select a size from the drop-down list. For readability and styling reasons, fonts should not be smaller than 12 px or larger than 20 px.

    10. Expand Editor Window

      Click on the expand editor window icon to expand the editor to full screen. Other fields of the page (including the Save button) will not be visible. Click on the icon again to get out of full-screen mode.

    11. Link

      Any text on a page can be turned into a link. To do so, select the text and click on the link icon. In the pop-up window, under URL, input the URL, here we try to use "relative" links if we are linking within the site, (the "other" option, not https://) you do not need the before your link in this case you would just put whatever comes after. If linking to a document or image on the file system, click on Browse Server to open the file browser and navigate to the file. Double-click on the file to select it. Back on the pop-up window, the URL field should now contain the path to the selected file. Click OK to complete.

      To create an email link, which will automatically open up an email software (Outlook) when clicked, select the text which typically would be an email address and click on the link icon. In the pop-up window, under Link Type, select E-mail from the drop-down list. Input the email address under E-mail Address. The Message Subject and Message Body fields are optional. Click OK when done.

    12. Remove Link

      To remove a link and turn the text back to default, simply select the link and click on the remove link icon. The text will revert to Normal style (no underline, text color should be black).

    13. Buttons- Advanced>Stylesheet Classes
      • Foundation
        • “button success” is the green button
        • “button success expand” is the expanded green button
        • “button alert” is the red button
      • Additional Buttons for UNT

        (Must be added within the source code.)

  • Back to Top

     Adding a Page

    Typically there are two types of pages you will be creating, a "Basic", or "Generic" page and a "Programs-Service Subpage" All pages are very similar, but "Generic" pages are for any content and "Program-Service Subpages" are related to specific program or services related to your department. "Basic" Allow for more customization and have separate moveable sections along with the ability to add manual CSS.
  • Log into the site
  • Click on Add Content at the top left of the Drupal 7 menu bar.
  • Select Program-Service Sub-page or Generic Page from the drop-down list.
  • Under Title, input the title of the page.
  • Under Body, input the page content.
  • If available, scroll to the bottom, and select the Department, under Department (ER)
  • If the page will be under a program or service, select the Program or Service under that.
  • Click Save.
  • All pages must have the url updated to connect to your department/special initiative for continuity and analytic purposes. Please notify dsaweb@unt.edu that the page has been created and where you would like it placed.