Skip to content

***How do I add a carousel (slider) to my page?

← Previous WordPress Themes


Carousel's are a great way to highlight recent news and marketing campaigns on your website. They're also pretty easier to create, but do take a bit of preparation time for each slide.

Terminology

Carousel: 

A carousel is also called a slider. You've seen these in use on many sites on the web including Georgia State's homepage for years.

Slide:

A slide what you call each frame or page/post highlighted in the carousel.

Creating the Carousel:

As always, you can generate your columns through the carousel tool 

in the text editor. With that tool you can choose the color of the carousel and the the type of transition that will be used between slides.

The code:

This is the code for a carousel: 

[carousel class="COLOR" transition="TRANSITION-TYPE"] [/carousel]

There are two attributes involved:

  • class: determines the color of the carousel. Color choices include: gunmetal, light, dark, pantherblue, bluesteel, skyblue, desertsand, morningmist, cosmicblue, mulberry and spearmint.
  • transition: determines how the current slide transitions into the next. Transition choices are fade and slide. 

Usage example:

[carousel class="pantherblue" transition="fade"][/carousel]

Creating Slides:

Slides require a bit more work, but not too much more. Let's go through the basics of what you will need to make a slide.

Required Components:

  1. A page or post to link to. An external page is not recommended, but is possible to link to. 
  2. An uploaded image for the slide.  Images can be found in the Digital Asset Library. The image size depends on where the carousel is. The sizes are below:
    1. Homepage carousel that extends beyond the standard page width: 1280px by 360px
    2. Homepage carousel that matches the page width: 960px by 360px (980px by 360px when using department theme)
    3. Article pages: 620px by 300px
  3. A title for the slide. This is the headline for the slide. 
  4. An text excerpt for the slide. This is a short teaser or description of where the slide links to.

Required Skills:

You will need to be able to crop a photo using Adobe Photoshop or a similar tool. For training, please contact the Exchange. They offer classes on a regular basis for all faculty and staff. 

Getting It into the Carousel:

Adding your slide is just a matter of adding a bit of code. We are still in the process of adding a button to the text editor and more to make adding slides even easier, but for now you will need to add each slide by hand.

The Code:

This is the code for a slide.

[slide id="page/post-id" attachment_id="image id" alignment="where the text box shows" title="the slide's title"]My slide's excerpt[/slide]

There are 5 attributes involved.
  • id: The id tells the slide which webpage it should link to. You can find the id of the page or post by looking at the list of all pages (or posts) under the respective page or post menu. All you need is the number.
  • attachment_id: The attachment_id tells the slide which image to display. You can get the image's id by finding it in the media library's index.
  • alignment: This controls where the text block appears. You can have it appear in any of the 4 corners of the slider: topright, topleft, bottomright and bottomleft are your options.
  • title: This is the title of your slide. It should relate to the headline of what you are linking to, but should not be so long that it takes up more than two lines with one line being the goal. 
  • The Excerpt: This isn't an attribute, but it is the content between the open and close slide codes. Any text that appears here will be the excerpt for the slide.

Usage Example: 

[slide id="111" attachment_id="1234" alignment="topright" title="This is my news."]You really don't want to miss this![/slide]

Putting It All Together

The [carousel] and [slide] tags were designed to work together. [carousel] is the container while [slide] is the element. There isn't a limitation to how many slides can be in a single [carousel], but the more you have the longer the page will take to load and the less likely a visitor will be to see all of your slides. In other words, keep your slides limited to 2-4 per carousel and consider changing them out on a regular basis. 

Final Code Example:

[carousel class="gunmetal" transition="slide"]
[slide id="111" attachment_id="1234" alignment="topright" title="This is my news."]You really don't want to miss this![/slide]|
[slide id="121" attachment_id="1844" alignment="bottomleft" title="This is my OTHER news."]You shouldn't have missed this![/slide]
[/carousel]

How do I make a carousel extend to beyond the page (Super big image):


You can use the immersive or extended width carousel by using the tag under your carousel.  Place  under your carousel in the html mode of the text editor window. This will only work on pages using the homepage template and will not work with sites using the College Template. Please adjust your slide images to be 1280px by 360px in size.

Additional Information:

Additional information on this topic can be found in the Communication Toolkit.


Feedback and Knowledge Base

(thinking…)