Carousel Image Slider

The ISU WordPress theme has a built-in image carousel that can be accessed by using a shortcode in your page or post content.

The shortcode would appear like so:

 [ isu_carousel ids="0001, 0002, 0003" ] ... be sure to remove the extra spaces around [ ] if copying this example 

The id numbers referenced in this shortcode are assigned by WordPress to images when they are uploaded to the media library. See screenshot below….

Slider captions appear like the screenshot below…

 

Meta Slider plugin

Getting Started
Getting Started

The College of Engineering has purchased a developer license for the Meta Slider Pro plugin, an easy to use image slider.

If the plugin is not already activated on your site, you’ll need to activate both the Meta Slider and Meta Slider – Pro Addon Pack.

To get started, once the plugin is activated, select the Meta Slider Pro tab in the Dashboard, then create a new slideshow or edit an existing slideshow.

Slideshow options

There are 4 different slider options available. At the time of this writing, it is recommended to use the Flex Slider option, as this is the only one to offer a ‘play/pause’ option, which is required to make the slider accessible for viewers with disabilities.

slideshow options
Slideshow options

Width and Height
If you’re using the default CoE Department Theme, a width of 1152px will span the full width of the theme. To span the main content area, with the primary sidebar to one side use 750px.

Effect
With the Flex Slider option selected, only the Fade and Slide options are available for a transition effect.

Theme
Dependent on the type of slide content being added (images, posts, youtube videos, etc.).

Arrows
Checkbox on on/off. ‘Previous’ and ‘next’ slide options for navigation.

Navigation
Different from Arrows, this navigation appears below the slideshow content. At the time of this writing, it is recommended to use either the Dots, Filmstrip or Hidden, the Thumbnail option does not offer an ‘Alternate Image Text’ for the thumbnails themselves.

Thumb Width and Height
Controls both Thumbnail and Filmstrip image size.

Advanced Settings

Most of the options can be left at their default settings. The exception may be the Slide delay and Animation speed controls for how fast the slider changes between content.

add remove slides
Add and remove slides

Adding Content to the slideshow

There are several content options when adding a new slide. Image, Vimeo, YouTube, External URL, Post Feed and Layer Slide.

Image slides can be added from the media library or uploaded, be sure to fill in the ‘Alt text’ field of the image to provide an a description of the image to the visually impaired and those using screen readers.

Vimeo, YouTube and External URLs only require a url location.

Post Feed content can be setup to use the featured image and title of a post as the slider content. The post title will appear as an overlay on the featured image that has been selected for the respective post. The location and look of the title can be controlled by creating a new theme in the Theme Editor and modifying the Caption settings.

  • By default the Caption Template for Post Feed content is set to show the post’s title, date/author, and a ‘Read more..’ link going to the post’s url. An html edit window is available to modify and style this caption. Actual location of the caption is controlled in the Theme Editor (see heading below).
  • The Taxonomies tab allows you to control which Post Categories or Tags that the posts populating the slider are pulled from.
  • The Display Settings tab allows you to control the number of posts to show in the slideshow as well as how they might be organized (by publish date, random, etc.)

Theme Editor

The theme editor can be used to customize the captions, arrows and navigation of your slide show. Once a theme has been created, you can apply it to your slideshow in the Slideshow option’s Theme dropmenu selector.

usageAdding the Slideshow to a post/page or widget

Copy and paste the slideshow’s unique shortcode id to the page or post you’d like to add it too, or add it to a widget area via the Meta Slider widget option.

Google Doc Embedder

From the WordPress Plugin Directory:

“Google Doc Embedder lets you embed several types of files into your WordPress pages using the Google Docs Viewer – allowing inline viewing (and optional downloading), with no Flash or PDF browser plug-ins required.”

 

PLEASE NOTE: If your documents don’t seem to load completely, try logging out or logging in to your Google account. It seems that a stale login can interfere with Google’s viewer, where an active login (or no login at all) will not.

 

Useage

Upload your media to the media library and copy the url of the file. Screenshot.

Place your cursor on the page where you’d like the doc viewer to appear and click the Google Doc Tool to add the media file. Screenshot.

Please note, that this inline viewing does not work with older versions of Internet Explorer (v. 7 and below). It has been tested successfully on the iPad.

Examples below:

PDF (Adobe Portable Document Format)

DOC (Microsoft Word)

PPT (Microsoft PowerPoint)

 

ADOBE PDF

[gview file=”http://wordpress.engineering.iastate.edu/wp-content/blogs.dir/1/files/2011/11/ISU_CoE_StrategicPlan.pdf” height=”775″ width=”600″]

 

MICROSOFT WORD DOCUMENT

[gview file=”http://wordpress.engineering.iastate.edu/wp-content/blogs.dir/1/files/2011/11/sample.doc” height=”775″ width=”600″]

 

MICROSOFT POWERPOINT

[gview file=”http://wordpress.engineering.iastate.edu/wp-content/blogs.dir/1/files/2011/11/2011-08-31-Convocation2.pptx” height=”450″ width=”600″]

Events Manager Plugin

The Events Manager plugin is a replacement to using WordPress ‘Posts’ and ‘The Future is Now’ plugin, that allows future date postings, for event listings.

PLEASE NOTE:

  • Old WordPress Post events are not automatically transferred to this new Events Manager, events will need to be recreated with this new plugin. At the College level, we elected not to transfer old events.
  • Once the plugin is activated, it automatically creates a page titled ‘Events’ to list events on. You’ll want to make sure any links in your navigation point to the new location, once activated, or in the settings page for this plugin another page can be selected to list events.

PLUGIN SETTINGS

Settings – recommended getting started settings

  • General Options
    • Use dropdown for locations? No, at the college level we have alot of different venues. If you have just a few at the dept level, you could set to ‘yes’
    • Use recurrence? Yes.
    • Enable bookings? No.
    • Use Categories? Yes.
    • Event Attributes? No.
    • Default Location: None set
    • Default Location Country: United States
    • Event Attributes: None set
    • Show some love? No
  • Events Page
    • Events Page, default is to select ‘Events’
    • Show events page in lists? Yes.
    • Display calendar in events page? No. (can still add calendar widget to sidebar)
    • Disable title rewritting? No.
    • Event List Limits: 20
    • Are current events past events? No
    • Show events search? No
    • Default event list ordering: Order by start date, start time, then event name; All Ascending
    • Event list scope: Future event
  • Events Format (code in red, I’ve modified to fit our theme better)
    • Events page title: none (adding a title doesnt work well with our theme)
    • Default event list format header:
      <table cellpadding="0" cellspacing="0" id="current-events" style="margin-top:15px;"><thead><tr><th id="event-time" width="150" align="left">Date/Time</th><th id="event-description" width="*" align="left">Event</th></thead><tbody>
    • Default event list format:
      <tr><td valign="top"> #_{m/d/Y} #@_{- m/d/Y}<br/> #_12HSTARTTIME - #_12HENDTIME</td> <td valign="top"<div style="margin-bottom:12px;"> <strong>#_EVENTLINK</strong><br/><i>#_LOCATIONNAME</i></div></td></tr>
    • Default event list format footer: </tbody></table>
    • No Events message: No events
    • List events by date title: Events – #j #M #y
    • Single event page title format: none (default, conflicts with our theme)
    • Default single event format:
      <h1>#_NAME</h1><div style="float:right; margin:0px 0px 15px 15px;">#_EVENTIMAGE</div><p><strong>Date/Time</strong><br/>Date(s) - #j #M #Y #@_{ \u\n\t\i\l j M Y}<br /><i>#_12HSTARTTIME - #_12HENDTIME</i></p><p>    <strong>Location</strong><br/>#_LOCATIONLINK</p>#_NOTES{has_bookings}<h3>Bookings</h3>#_BOOKINGFORM{/has_bookings}<p><a href="http://www.engineering.iastate.edu/events/">back to Events list</a></p>
  • Calendar format: Default settings
  • Locations format: Default settings
  • RSS feed format: Default settings
  • Maps and geotagging: Default settings
  • Booking and Ticketing Options: Default settings
  • Booking Email Templates: Default settings
  • Event Email Templates: Default settings

EVENT LISTINGS

 

USING SHORTCODES FOR CUSTOM PAGES

It is possible to display an events list for a specific category(s) on a page using shortcodes. For example, if you have both seminars and events categories and would like to display those lists on separate pages. You could simply create a new page for seminars and add this shortcode, No Events, where the number is the category id. Pick and choose categories with comma separation, e.g. No Events.

events categories screenshot

 

 

Hiding the Page Title: EmbedIt Plugin

Custom Fields Box
The Custom Field Box is located on the Post/Page Edit Screen.

Add the following code to a custom field:

<style>
.entry-title {display:none;}
</style>

ADD the custom field title as HTML1 (or 2, 3, etc., depending on the number of embed codes you have on that page). Finally add this shortcode to the very top of the page content edit window.

[ HTML1 ]    (without the spaces)