skip to main content

Site Manager Updates

Site Manager is constantly being updated to improve functionality, fix issues and improve the look and feel of our sites, and it's important that you are always using the latest version. Please take some time to review recent changes and make sure that you know how to stay up to date with what's going on.

Have an idea? Make a suggestion!

2021.06.16 - Toggle section status from Page Sections table

The statuses listed in the Page Sections table on the page editor can now be clicked to toggle a given section between different statuses.  Previously you had to click in to each section, expand the section details by clicking the gear icon, and change the status there.  This could make it tedious to move a new page containing many sections from dev to prod.  Now, you can toggle the status on any section listed in the Page Sections table for a given page.  If current status is Prod, clicking will toggle to Dev.  If Dev, clicking will toggle to Hidden.  If Hidden, clicking will toggle back to Prod.  If the status is Deleted, clicking will change it to Hidden.

Screen shot of typical Page Sections table

2021.06.15 - Default Page Preview Image Now Customizable per Site

Default page preview imageUsing the Page Preview Image photo picker on the page editor, you have been able to specify what photo to use as the preview image when a particular page gets shared on Facebook, Twitter, and other social media.  The default preview image, however, has been hard-coded since we implemented this feature.  No more!  From the site setup page, you can now enter the URL of an image you want to use as the default page preview image for all pages on your site.  We still recommend preview images be sized at approximately 1200x800 pixels.  You can upload an image you want to use as the default on your Images tab, copy the link to the photo there, and paste that into the Default Page Preview Image field on the Setup page.

2021.05.11 - User interface style updates on Edit Section and Edit Page

The Save/Copy/Close buttons on Edit Section and Edit Page used to have a fixed position mid-window near the right edge of the browser.  This was to make it easy to save without having to scroll back to the top of the page.  However, the fixed location of these buttons near the middle of the screen often obscured relevant content beneath.  To improve the user interface, these buttons now stick to the top edge of the browser window when scrolling.  They remain visible but are tucked neatly out of the way. 

We also updated the styling of the section settings boxes to use cards with responsive grid layout for better presentation on narrower display sizes.

2021.04.23 - H2 font family update

We have updated the H2 style default from Montserrat Bold to Source Sans Pro Bold. The default font-color on light colored backgrounds will be #13294B (Navy) and on dark backgrounds it will be #FFFFFF (White). By reducing the variance in font style treatments among our core set of headline and paragraph fonts to a single family (Source Sans Pro), we can provide a more seamless and consistent visual experience. This update will also align us more closely with the direction that campus is taking for web standards.

2021.04.12 - New Video Section

Videos are easier to insert

Inserting video into your pages has meant working your way through the code and making sure you have the right image and video in the right place. There is a new Video section that works similarly to other text-based sections.

Screen Capture of Video Section Showcase

Adding a Video section:
To insert this video section on a page, select "Add new section" from the Section Showcase then choose "Video - I - Hero".

In the Section Editor, add a background image (used for displaying an image while the video loads)and the link to the YouTube video. Then you can change the text just like you would in a Text section. Everything is pre-styled and ready for you to add content.

Edit Section background image and add video

2021.03.01 - Welcome to the lab!

Don't freak out! You might have noticed that the development version of your site may have some differences from the live (production) version of your site from time to time. An example of this occurred recently when some folks noticed changes to elements on their development sites that weren't present on their live sites.

Screen capture from Grainger Engineering Voices demonstrating square corners vs. rounded corners.
Screen capture from Grainger Engineering Voices demonstrating square corners vs. rounded corners.

Screen capture from Grainger Engineering Voices demonstrating rounded corners.

It is correct. Design elements were being trialed. You might be wondering why though. To fully understand, we have to look back at why we chose to develop our own content management system (CMS). There are 3 reasons we chose to build Site Manager. They are 1) the ability to have consistent branding, 2) make it easy for content editors to update the websites, and 3) to be able to quickly develop, test, and implement new features. 

We've actively decided, as a college, we will keep our websites up-to-date in design and user experience to prevent some department sites from appearing outdated. We have a team of talented staff that are constantly working to improve not only the look and feel of one site, but the entire suite of college websites.

While we are paying attention to all the things that make each department/unit unique – including your individual messages, missions, and audiences – we also need to provide a consistent experience for anyone who visits our collective web presence. After all, our websites are marketing tools that must serve their target audience first and foremost.

The look and feel of these visual elements are consistent across all of our sites and match the university branding. Changes like the ones highlighted above are suggested, implemented in the development (dev) environment, tested, tweaked, and constantly improved for look, usability, and accessibility. And if those updates don't work, we have the ability to roll those changes back quickly and comprehensively across *all* of our sites at once. When we land on a solid solution, we can implement it quickly across *all* of our sites at once.

This new approach should help all of us continually improve and have fewer opportunities to freak out or be left behind.

2021.02.22 - File upload on modal file browser

When uploading files (e.g. documents, pdfs) you used to have to go to the Files page in the application menu and upload your document there before being able to add a link to it within content.  We have added a file upload directly to the modal file browser now.  In the Insert/Edit Link dialog , simply click the browse icon next to the URL field to open the file browser.  Click the upload icon to the right to expose the file upload field.  Upload your file then click either the file name or the link icon to insert the path to the file into the URL field.

Screen shot of file browser

2021.02.22 - Improvements to image browser

We have released a series of performance and interface improvements to the image browser.  First, we removed the Tag Type filter when we discovered that there has been almost no use of the Usage and NetID tag types.  The book tag type has been replaced by additions to the Usage filter.  You can now filter for images used within a particular book, used anywhere on the site, or not used at all, while also filtering for a specific keyword.  We have also added paging to speed up the display of the image browser when viewing many images.  Only 40 images will display at once now.  To aid in finding particular photos, we also added a search field.  The search will look for an exact match on photo ID, or a textual search within image file name, alt text, or caption text.  To conserve space, the image upload and import from URL fields are hidden until you click one of the icons to the right.  The interface between the modal overlay image browser you get when editing pages or sections is now the same as what you see when you go to the Images page.

Screenshot of image browser

2021.02.22 - Image Cropping Tool

We are very excited to release our new cropping tool for images in Site Manager.  You can access this tool by clicking the crop icon on located below image fields, on the Images page, or by right clicking a photo within content and selecting Crop from the pop up menu.  When the image cropper first appears, you will see the original image and a button to let you create a new crop.  You can resizing the crop box before or after pressing "New".  Once you create a new crop, it will appear to the right along with the original image.  You can select existing crops, modify the crop box size and position.  Don't forget to hit save if you change the crop box on an existing crop.  If you accessed the image cropper while editing a page or section, select the crop you want to use and click the "Use" button.

Screenshot of image cropping tool

2021.02.22 - Dialog box overlay handling improved

We have replaced the jQuery UI Dialog Widget with the Bootstrap Modal Component for handling overlay screens (like the file and image browser).  Bootstrap's Modal handles varying screen sizes, initial positioning, and scrolling content more elegantly.

2021.02.22 - Section thumbnail image field removed from Edit Section

The Thumbnail Image field on the section editor has been removed.  This field was present to allow Site Manager administrators to add a thumbnail image to special sections included in the Section Showcase.  Aside from sections made available via the Showcase, the section thumbnail was never used.  To simplify the user interface and remove unnecessary controls and confusion, the thumbnail field has been removed except on the Site Manager Core site where showcase sections are maintained.

Screenshot of section details illustrating removal of section thumbnail field

2021.02.22 - Close buttons removed

In an effort to simplify the user interface and eliminate confusion over their function, the Close buttons in the upper right corner of the Books, Pages, Sections, Images, Files, Menu, and Setup pages have been removed.  These buttons all closed the site and returned you to the tabular listing of available sites at the root of the Site Manager app.  After observing user behavior, it became clear that often user expectations were that these buttons would close the page you were on and return you to some higher level position within the current site.  If one wants to return to the site listing, then the Sites button at the far left of the application menu is always there.  And navigation between the various site-specific pages (Books, Pages, Sections, etc) is always present in the right half of the application menu.

Screenshot of sitemanager application nav menu

2021.02.03 - Section and Page Default Status

When you copy a page or a section, or you add a new section from a showcase template, the status for copied or new pages/sections has until now been the same as the status of the thing you copied, or it defaulted to "Prod" for new sections added from the showcase.  We have changed this so that copied pages and sections, as well as new sections added from the section showcase will now always have a status of Dev so no surprises will appear on your production sites.

2020.12.15 - Quick link to edit page

In the bottom footer on all SiteManager-powered dev and prod sites, the "Powered by SIteManager" link now points to the edit page within the SiteManager app to facilitate quick access to the editor.

2020.12.07 - Breadcrumb Link Labels

Until recently, the link labels in breadcrumbs were derived directly from the page path.  If a page lives at /abc/def/ghi then the breadcrumb would look like:

Home / Abc / Def / Ghi

If the page at, for example, /abc/def had a name or menu label different than "Def" that name would not be reflected in the breadcrumbs.  We have recently updated the breadcrumb function to show the page title or menu label for each segment of the breadcrumb to better reflect the actual names of parent pages in the navigation hierarchy.  This change will enable better handling of special case capitalization as well as more descriptive page/section titles (e.g. /alumni being labeled as "Alumni & Friends").

2020.10.29 - Link to a page within the site

When linking to files within the site use reletive path links. As an example instead of https://marcom.grainger.illinois.edu/blog, you would insert "/blog" into the link field. Alternatively, you can add a link to a file by:

  1. Selecting the text or image to link.
  2. Select Insert/Edit Link icon.
  3. In the dialog box that pops up, select the path icon.
  4. Select what type of files you want to view. In this example we want to link to Standard Pages Book.
  5. Select the path of your file/page.

 

Insert file from within site
Figure 1: Select text or image to link.

 

Insert/Edit Link
Figure 2: Insert/Edit Link

 

Standard Pages list
Figure 3: Standard Pages list

2020.10.29 - Section Showcase: Add new section and access to examples

Page section and Add new section options

We made some style changes to the interface to make "Preview Section Options" and "Add new section" more obvious.

  1. Preview Section Options will take you to our demo site that has all of the sections demonstrated in-action to help decision-making a little easier for design layouts.
  2. To add a new section click "Add New Section". The Showcase will slide out from the left and present all of the predesigned options from the Section Showcase (see example below). Select the layout to edit and include into a page.

Section Showcase example

2020.10.01 - New styles added to Style Drop-down

When editing a Section, there are new options available from the style drop-down. Use this feature to style text headers, different font sizes, and buttons. A special note, to style text as a button, the text must contain a link.

Section editor style examples 

 

2020.09.08 - Button styles added to toolbar

Button styles have been added to the Toolbar in Sections on the Site Manager editor. Text must be a link for the button styles to work. 

Site Manager button styles

2019.11.20 - Updates to Page editor

(Updated fields highlighted in yellow)

The blue [+] icon used to activate the section showcase panel that slides in from the left edge of the browser has moved down by the Page Sections heading just above the tabular listing of sections included on the page.

2019.11.20 - Creating "Books"

We've added a new step to the content creation process in Site Manager. When you click on your site, you'll land on a new page called Books. To get to your pages, just click on the "Standard Pages" item and everything should work as it did before. This update will:

  1. Enable us to gradually begin incorporating content currently managed via the blog tool directly within Site Manager
  2. Enable us to create different types of pages or non-page content that may require different fields or structure (such as news stories)
  3. Enable us to tag pages/items by topic and query a given book's pages to produce lists of content (such as lists of news stories)

Additional notes on the Edit Page interface:

  • A few of the fields at the top of that page have moved around slightly.  But everything that was there is still there and should be labeled the same.
  • There is a new “external link” field.  This is mostly just used for redirects currently but will become important as we move news lists hosted in the blogtool over to new “news” books in sitemanager. This field will function the same as the external link field in the blogtool; allowing you to post a news item that is simply a link to an article hosted on a third-party site.
  • There is a new “meta description” field.  This field will allow you to customize the meta description for a given page.  By default, if you leave this blank, the page title will be placed in the meta description field.  You may override that by setting a value in this new field.
  • The Body Class field was formerly a text field that required you know the various possible class names you could use.  That has changed to a multiselect dropdown with the available options you can use listed in a dropdown.

2019.10.21 - Slideshow initialization aesthetics

This updated involved setting feature slideshows to start off transparent and then fade in after the slideshow initializes,preventing the often terrible looking rendering you see during the first half second or so before the javascript runs to make raw html be a slideshow. Essentially, we smoothed out the load sequence for large feature slider modules.

2019.10.21 - H2 Style

Slightly reduced size and increased weight of H2s

2019.10.21 - Hero Image Sizing

Updated the responsive sizing of hero images for homepage and landing pages, improving the proportions of these modules and the elements within them (h2, subtitle, button, sliders) at all desktop and mobile browser sizes.

 

2019.10.21 - Interior Subnavigation

Section menus for interior pages have been updated from the horizontal pill-style navigation to a drop down menu inside the page header. This was done to improve user experience and decrease scroll depth on interior pages. Through user testing, we found the pill-style nav to be confusing and unfamiliar; so we have updated to a more familiar and compact "In this section" drop down menu that mirrors the mobile experience. We have also moved the breadcrumbs above the page title in the header space, to more clearly indicate the user's location in the site.