Guides-Basic

Google Docs

While you can display a document on your site by uploading it, you may also do so using its iFrame code if it is a Google Doc. Here’s how:

  1. Make sure the document is public
    1. On the view screen of your document, click the Share button on the upper left corner
    2. Click Advanced
    3. Under Who has access, click Change… and select either On – Public on the web or On – Anyone with a link
    4. Click Save, then Done
  2. Get the iFrame code
    1. On the view screen of your document, click File > Publish to the web
    2. Click the Publish button.
    3. Click the Embed tab. From there, you may copy the resulting iFrame code.
  3. Paste the iFrame code into the text editor of the page on Aurora.

Maps

Maps can be a great way to display a location on your site. They allow users to zoom in and out and view the surrounding area without having to leave the page! Aurora supports the embedding of Google Maps. Below are instructions on how to do so.

  1. Go to Google Maps (https://www.google.com/maps)
  2. Enter the location
  3. Click on Share
  4. Click on Embed map
  5. Copy the iFrame code that displays
  6. Paste in the text editor of your page/post

Example

Here's an embedded map to the Student Union:

Text Wells

You may use a well to give your div box an inset effect. To do so, simply give the div a well class.

Normal Well

Sample Code:

<div class="well">Some text goes here.</div>

Result:

Some text goes here.

Large Well

Sample Code:

<div class="well well-lg">This is a large well.</div>

Result:

This is a large well.

Small Well

Sample Code:

<div class="well well-sm">This is a small well.</div>

Result:

This is a small well.

Posts

Both Posts and Pages are used for displaying your site's content. Posts can have categories and tags that are used by Post Widgets and Pages with the Blog Page template when filtering posts to display. In addition, all posts use the default sidebar.

Post Widgets

If you’re trying to display certain posts through a widget, you may notice that you have a few different widgets to choose from, namely Recent Posts, Recent Custom Posts Type Widget, Flexible Posts Widget, and Post Loop. Below outlines what each widget can do and how each differs from the others.

Recent Posts

Recent Posts is the simplest of the post widgets. It automatically displays posts based on when they were created, in descending order. This widget displays each post’s title as a link to that post. You can choose how many posts you want displayed and you’re also given the option to display each post’s creation date.

Recent Posts

Recent Custom Posts Type Widget

Recent Custom Posts Type Widget is a lot more flexible than Recent Posts. In fact, you don’t even have to display your most recent posts, or even posts at all! Recent Custom Posts Type Widget can display Posts, Pages, People, Media, and Meta Sliders. You can filter which posts to display by Author. You can also choose to order the posts by post title, ID, author, creation date, last modified date, randomly, or in no specific order at all. Like Recent Posts you can choose how many posts you want displayed. In addition, you can choose what parts of the posts you want displayed, including the title, body excerpt, date posted, and featured thumbnails. Keep in mind that not every post type has all of these; for example, Media does not have a body excerpt so checking that box would mean nothing.

Recent Custom Posts Type Widget

Flexible Posts Widget

Flexible Posts WidgetFlexible Posts Widget is another versatile post widget, however some of the features do not work when using the widget with Page Builder. This widget is fully functional when placed in a sidebar.

Flexible Posts Widget can display Posts, Pages, Media, People, or Meta Sliders. You can order posts by publish date, modified date, title, menu order, post ID, author, post slug, comment count, randomly, or post ID order. You can also choose to skip over a certain number of posts. You can choose whether or not to display the posts’ thumbnails, and at what size.

In addition to these sorting options, you may choose to filter posts by certain taxonomies or terms, such as by category, tag, format, or group. You can even specify exactly which posts you want to display by listing their IDs. Note that selecting posts based on ID will override any options you may have chosen for filtering by post type or taxonomy/term.

Post Loop

Post Loop can display posts, pages, people, or meta sliders. You can order posts by post ID, author, name, date, date modified, parent, random, comment count, menu order, or post in order. The widget displays the title of each post. In addition, you may choose to display a certain number of posts and filter the posts by tag or by category.

Here are instructions on how to use Post Loop:

  1. Add a Post Loop widget to your Page Builder page
  2. Select the content.php template
  3. Under the additional field add following code to filter by category: &category_name=yourcatname
    • For tags you would use: & tag=yourtagname
  4. Under the Widget Styles section on the right side of the widget, add a class name (anything you want) to the area called Widget Class
  5. Save/Update the page
  6. Add the CSS below to the Custom CSS section of your site
Note: In this example I’ve given my Post Loop widget a class of any-name-you-want
/* ===================== Start Post Loop Template Code ===================== */
.any-name-you-want .entry-content, .any-name-you-want .entry-footer, .any-name-you-want .entry-meta {
    display: none;
}
 
.any-name-you-want h1 {
    border-bottom: medium none !important;
    font-size: 16px;
   line-height:1.5em;
   margin-top:0px !important;
   margin-bottom:0px !important;
}
 
.any-name-you-want .hentry {
    margin-bottom: 0;
    padding-bottom: 0 !important;
}
 
/* ===================== End Post Loop Template Code ===================== */
Note: If you use the Post Loop widget in multiple places and want the same style then you can use the same class name on the widget and it will pick up the custom CSS.

post-loop-example

Post Loop Templates

If you use the Post Loop widget, you’ll notice that it has many options under “Template”. The following are short descriptions of each template and if/how it can be used with Post Loop. Note that not all of these templates will be useful to people using this widget, as some were intended for other areas of Aurora and just happen to have been picked up by this widget.

  • content-az.php
    • (not fully intended for use with post loop but it can be utilized)
    • Returns an a-z listing of all the pages in your site (which can also be achieved with the A-Z Listing page template). You will need to create a category with no posts in it and then define it or else the a-z post loop will pull your most recent post’s content and add an A-Z listing below it.
  • content-blank.php
    • (not intended for use with post loop)
    • Returns posts with no styling.
  • content-featured-image.php
    • Returns the featured image, post date, excerpt and read more link. This is by far the most widely used template.
  • content-home.php
    • (not intended for use with post loop)
    • Same as content-blank except it will not display the content and markup if the post is blank.
  • content-none.php
    • (not intended for use with post loop)
    • Returns errors for the system.
  • content-page.php
    • Returns posts with a title and excerpt.
  • content-person.php
    • (not intended for use with post loop)
    • Returns people for a different portion of WordPress.
  • content-single.php
    • Returns post title, date, excerpt, categories and tags.
  • content.php
    • Returns post title that links to post, date, excerpt, categories and tags.

Post Expirator

Post Expirator is a plugin that allows you to add an expiration date to any post or page. In order to do so, Post Expirator must be enabled in the Screen Options of the post’s edit screen. Scroll down to the box labeled ‘Post Expirator’ on the right side of the edit screen. From there, you must first check the box labeled ‘Enable Post Expiration’ to set an expiration date. After, choose a date and time at which you would like your post to expire and choose what happens to the post upon expiration. You have the following options:

  • Change its status to draft
  • Delete the post
  • Change the post’s visibility to private
  • Update the post’s category:
    • Category: Replace
    • Category: Add
    • Category: Remove

Post Expirator

Be sure to click Update after to save your changes.

Excerpts

Posts can have custom excerpts that show up in place of the full text in post feeds such as search result pages and tag pages. To add or edit a post's custom excerpt, scroll down to the box labeled 'Excerpt' on the post's edit screen. Type the custom text you'd like to show up in the text box and Update the post when you are finished.

SASS Excerpt

In order for these excerpts to show up anywhere, you must have 'Summary' chosen next to Settings > Reading > For each article in a feed, show [Full text, Summary].

Note: If you have 'Summary' chosen, posts without excerpts will also be affected. In post feeds, the body of such posts will be cut off after a certain number of characters rather than displaying in full.

 

Below is an example of what the SASS Tag page looks like with 'Full Text' chosen vs with 'Summary' chosen. The Child Theming with SASS page has an excerpt whereas the Child Theming with CSS page does not.

SASS Tag No Summary
SASS Tag Page: Full Text

SASS Tag With Summary
SASS Tag Page: Summary

Pages

Both Pages and Posts are used for displaying your site's content. Pages have several different templates that you can choose from which determine how its content is displayed and even what content is displayed. In addition, each page can have its own in-page menu and its own sidebar. Pages can be hierarchical and if a page has a parent, breadcrumbs will display at the top of it if this feature is enabled.

To create a page, you can either hover over + New on the top menu and click on Page or you can click on Pages in your dashboard and click Add New.

Media Library

Media consists of the images, video, recordings, and files that you upload and use in your website. You can get to the media library on your Dashboard through Media > Media Library. On the Media Library page there are two possible views: List view and Grid view. List view will show fewer items at one time but displays some details alongside the media thumbnails whereas Grid view displays only thumbnails and can therefore fit more media on the screen. You can also filter by media type or by date of upload.

Media library list view

List View

Media library grid view

Grid View

Media is typically uploaded and inserted into the content when writing a post or a page. However, you can also add media by clicking the Add New button at the top of your Media Library (or going to Media > Add New from your Dashboard).

Short File URLs

You can alter the URL pattern for your media files by going to SettingsMediaShort.

Video Tutorials

Images

Finding Images

Don't just search Google Images and grab something. Make sure you are using something you paid for, something you shot, or something from the public domain. You run the risk of getting yourself, your department, and the university in trouble. Read more: Copyright, Fair Use.

Some useful websites to check:

Prepare Images Before Uploading to Aurora

If you don't have access to Photoshop, try using the following free software to edit images.

Tips for Saving Space

Each website on Aurora comes with a 1 GB storage limit and a file size limit of 100 MB. If your site has a lot of images or other media, you might find some of the below tips for saving space useful.

Edit Images Before Uploading

If you edit images in Worpdress, it appears as if you’ve done the correct thing of resizing and cropping the image down. However, the WordPress image editor is non-destructive, which means it keeps the original in the Media Library, and then creates a duplicate for the new edited version. Instead, try one of the following software to reduce the image size:

  • GIMP
  • Fotor
  • Photoshop (Go to Image > Image Size, and choose a resolution of 72px, and if your width is larger than 1200px, you’ll want to reduce that as well. Then, use the File > Save for Web… option to compress the image into a JPG. This process can compress a print quality image by as much as 99%.)

Export Screen Versions of PDFs

Adobe Acrobat Pro, which is free to all UConn students, faculty, and staff starting in fall 2015 with Skybox, allows you compress the size of a PDF.

Go to File > Save as Other… > Reduced Size PDF.

Export Screen Versions of Office Documents

Programs like Word and Powerpoint have options for saving smaller versions of the original document.

ZIP Files

If you have a large number of files that people will commonly want to access together, you can bundle and compress them into a single ZIP file for additional storage saving.

Off-Site Storage

For sites with truly massive storage needs, it may be necessary to keep files on another web server and link to them. When inserting an image or linking to a document, rather then browsing the Media Library, you would just enter the URL of the file on the other server. If you require this setup, contact webdev@uconn.edu about obtaining an account.

Video Tutorials

IFrames

Aurora has limited support for the use of iFrames. For security reasons, UITS must be extremely cautious in what domains to trust not to infect the many hundreds of websites that use Aurora. Currently, Aurora only permits the use of iFrames from the Google.com domain. This allows for the inclusion of:

  • Google Maps
  • Google Calendars
  • Google Docs, Spreadsheets, Presentations, and Drawings.

Using IFrames

IFrames must be entered in the text editor, not the visual editor. Pasting an iFrame into the visual editor will do nothing but display a lot of raw HTML code on your webpage.

This is an example iFrame code, taken from the Google Maps iFrame shown below:

<iframe src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Homer+Babbidge+Library,+Fairfield+Way,+Storrs,+CT&amp;aq=0&amp;oq=homer+&amp;sll=41.782143,-72.236374&amp;sspn=0.293388,0.600128&amp;ie=UTF8&amp;hq=Homer+Babbidge+Library,&amp;hnear=Fairfield+Way,+Storrs,+Connecticut&amp;ll=41.806595,-72.251727&amp;spn=0.006295,0.006295&amp;t=m&amp;output=embed" width="100%" height="250" frameborder="0"></iframe>

<small><a style="color: #0000ff;text-align: left" href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Homer+Babbidge+Library,+Fairfield+Way,+Storrs,+CT&amp;aq=0&amp;oq=homer+&amp;sll=41.782143,-72.236374&amp;sspn=0.293388,0.600128&amp;ie=UTF8&amp;hq=Homer+Babbidge+Library,&amp;hnear=Fairfield+Way,+Storrs,+Connecticut&amp;ll=41.806595,-72.251727&amp;spn=0.006295,0.006295&amp;t=m">View Larger Map</a></small> 

For directions on getting your iFrame code, click the following tutorial links:

Examples

Google Maps

View Larger Map

Google Calendar

Google Docs

Google Slides