• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Home
  • Overview
  • Faculty Theme
  • Request a Site
  • Working with WordPress
    • Design Options
      • Front Page Layouts and Widgets Areas
      • Widget Areas (Sidebars)
      • Content Types: People, Publications, Research, Facilities, and Courses
      • Footer Contents
    • Theme Settings
    • Editing
      • News section
      • Forms
      • The Whitepaper template
    • Page Redirects
    • Google Analytics & Verification
    • Feedburner (and other RSS analytics services)
  • Resources

COE WordPress Sites

Texas A&M University College of Engineering

Slideshows (Soliloquy)

Photo slideshows can be placed on your home page, in a post or page’s content, or in any widget area.

The Soliloquy Slider plugin is activated by default. The link to the Soliloquy administrations screens is near the bottom of the administration menu on the left. Go to Soliloquy → Add New to create a new slideshow.

PHOTO: Sv2—Title Your Gallery

The first thing you want to do is give your slider a title, such as “Creating Your First Slider“. Once you have set your title, let’s start uploading some images! Select the Click Here to Insert Slides from Other Sources button to get started. A lightbox display will open that will allow you to insert images from your Media Library. If you need to add images to your Media Library first, click the Select Images button or drag and drop your images into the image upload box.

Sv2—Select Desired Images

Once your images are uploaded, you can click on the Insert Slides into Slider button. Now, you screen should look similar to the screenshot below.

Sv2—Edit Image Metadata 01

From this screen, hover over the images. You will notice that you can drag and drop them in order. Simply click and drag an image to a different location to sort your slides. The slide order will automatically be updated for you.

If you click on the blue Info icon a lightbox will open, allowing you to edit each individual slide’s metadata. Available options in this screen include:

  • Title
  • Alt Text
  • Hyperlink
  • Open Link in New Tab?
  • Caption (accepts HTML content)
  • Load in Lightbox?
  • Schedule Slide?
    • Start Date
    • End Date
  • Thumbnail

You can include an alternative thumbnail image by adding it’s URL to the Thumbnail input field, or by pressing the Choose Thumbnail Image button to select an image from your media library.

Soliloquy - Edit Metadata Screen

Image captions can accept any type of HTML, including (but not limited to) iframe, h1 and form tags. This gives you the ultimate ability to transform your sliders into anything imaginable.

Adjusting Slider Settings

Click the Config tab to review the slider’s settings. Here you can adjust the speed, position, and transition style.

Sv2—Config 01

Publishing and Using the Slider

Click on the Publish button to make your slider active, and then visit a post or page edit screen OR the widgets screen.

In a widget

Drag the Soliloquy widget into the sidebar (widget area) you wish to use. The Featured Content sidebar is intended for slideshows; anything you place here will appear full-width above your content and primary/secondary sidebars.

Choose the appropriate slideshow name from the widget’s dropdown and press the Save button. Visit your site, and you should see your new slideshow front and center.

In a post or page

At the top of the editor, you will find a button that says “Add Slider”. Click on that button to bring up a lightbox where you can select to insert a slider into your post or page. Once you have chosen the one you created (“Creating Your First Slider” if you have followed this tutorial all the way through), click on the button to insert the slider. Save your post or page and check out your updated site!

Advanced: Customize Your Slider with CSS

Soliloquy allows you to customize your slider with CSS. You will notice in the screenshot below, a container where you can input your CSS. It is important to note that the beginning of your CSS coding must begin with the unique slider ID number automatically generated when you created the slider. In the case below, my custom CSS should begin with #soliloquy-container-46 {"Your custom CSS here";}. Go ahead and add any custom CSS you desire!

Sv2—Custom CSS

Need Help?

Contact the COE WordPress Help Desk with questions.

  • Email: wp-engr-helpdesk@tamu.edu

Ready for a Site?

Request a Site

© 2016–2023 COE WordPress Sites Log in

Texas A&M Engineering Experiment Station Logo
  • College of Engineering
  • Facebook
  • Twitter
  • State of Texas
  • Open Records
  • Risk, Fraud & Misconduct Hotline
  • Statewide Search
  • Site Links & Policies
  • Accommodations
  • Environmental Health, Safety & Security
  • Employment