Typepad Knowledge Base
Index Typepad Status Login Need additional help?

Post Carousel

The Post Carousel adds a slideshow of the latest posts to the top of your blog. Photos from the most recent posts will rotate through the carousel.

The Post Carousel can be added at Design > Content. Click the pencil icon next to the Post Carousel module to configure the module. After choosing your settings, click OK and Save Changes to update your blog. If you are using an Advanced Template Set for your design, click here to get the template tags.

Add Post Carousel

Tip: Set up a test blog to configure the Post Carousel before applying the module to your blog. The Post Carousel is not available when previewing design changes, and a test blog allows you to see the design in progress.

You have several settings which you can adjust for the Post Carousel. For more details and tips for each option, click the option in the list below to jump to the corresponding section in the article. If you have already configured the module, skip to the tips for adding images to posts.


Basic Options

Carousel Basic Options

Maximum number of posts to display in carousel

Set the maximum number of posts the carousel will rotate through. If you have fewer posts than the maximum number set available to be included, only the posts available on the blog or in the selected category will be included in the carousel.

The option to display only 1 post is available if you don't want the slideshow effect but do want to highlight the latest post on your blog or in a set category.

Type of carousel

Fade - The carousel rotates to the left and right and fades from one post to the next.

Vertical - The carousel rotates up and down. The option to display an excerpt of the post is not available with a Vertical carousel. Below is an example of a vertical carousel with navigational arrows.

Vertical Carousel with navigation arrows

Horizontal - The carousel rotates to the left and right. Multiple photos can be displayed horizontally in the carousel at a time.

Horizontal Carousel settings

For example, a horizontal carousel with 2 posts and the the post title below the post looks like:

Horizontal Carousel with 2 photos

Restrict to a category

Select a category of posts which you want to include in the carousel. The carousel will only display posts assigned to the selected category. Only one category can be selected.

Tip: If you want to include posts from more than one category, create a new category specifically for posts you wish to highlight. For instance, you could create a category called Featured and assign any posts you wish to include in the carousel to that category.

Exclude carousel posts from blog listing.

By checking this option, any posts included in the carousel will not be in the list of recent posts below the carousel on the front page.

Please note the number of posts set to display at Settings > Posts must exceed the maximum number of posts set to display in the carousel. For example, if you opt to display 3 posts in the carousel, the number of posts set to display on the index pages needs to be at least 4.

If you are restricting posts by category, the posts in the category will be excluded from all blog indexes.

Advanced Options

Click Show Advanced Options to reveal additional carousel settings.

Title Position

Choose where to display the title of the post and whether or not you wish to display an excerpt of the post. Excerpts available with Fade and Horizontal carousel types.

The post excerpt will be the Excerpt added to the post. If an excerpt is not entered, the excerpt will be pulled from the beginning of the post.

Auto start

Choose to have the carousel start rotating automatically or not. Yes: Posts will begin rotating when the front page is loaded and continue to rotate. No: Reader will need to initiate the change of photos in carousel.

Pause button

When auto start is set to Yes, a pause button can be included to pause the rotation of posts in the carousel.

Arrows

Display arrows to navigate to the next or previous post in the carousel.

Pager

Display pager buttons on the bottom of the post to allow reader to choose which post to display in the carousel.

It is recommended to include one of the navigation options above in carousel to give readers the freedom to jump to or go back to a post.

Time for display

Select the time each post will display in the carousel before rotating to the next post.

Time for transition

Select the time for transition between each post in the carousel.

Force height

Select a height for the carousel. If you do not set a height, the size of the image added to the post will determine the height, and the carousel size may change with each post if the image heights vary.

Thumbnail width

If a height is selected, the width of the thumbnail image can also be set.

Keep in mind if a height or width is set, photos may be cropped in the carousel.

Tips for Adding Images to Posts

  • The first image uploaded to the post is the one picked up for use in the Post Carousel. This means that the image for the post in the carousel may not be the first image displayed the post.
  • Original images should be at least 1024px wide. Smaller images are not included in the carousel due to distortion.
  • For best results, each post should include one image. If an image is not included in the post, a filler image is displayed in the carousel for the post.
  • Photos added should be large and clear with a good height to width ratio. Avoid very tall, narrow images and very short, wide images.
  • The orientation of the photos should remain consistent. i.e. Use all vertically orientated photos or use all horizontally orientated photos. The height of the carousel will adjust for each photo if a height is not set when using photos with different orientations.
  • Only images uploaded using the Insert Image tool are available to be included in the post carousel. Images uploaded to the File Manager or linked from other sources (i.e. Flickr) included in the post will not be eligable for the post carousel.

Other Details of Note:

  • The Post Carousel module is available for all pre-made themes and custom themes created with the Theme Builder.

Advanced Template Set Template Tags

If you are using an Advanced Template Set design, you will need to include the below template tags in your templates.

Before the closing tag in the Main Index Template add:

<script src="//code.jquery.com/jquery.js"></script>
<script src="/.shared/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.bxslider').bxSlider({
mode: 'fade',
adaptiveHeight: true,
auto: true,
captions: true,
pause: 6000,
speed: 1000,
pager: true,
controls: false,
autoControls: true,
autoControlsCombine: true
});
}); </script>

For multiple horizontal slides, you'll also want to include:

maxSlides: 1,
minSlides: 1,
slideWidth: 0,
slideMargin: 0,

For additional descriptions of these options, see the bxSlider options.

Place the below code in your template where you would like the slider to display:

<ul class="bxslider">
<MTEntries lastn="3">
<li><a href="<$MTEntryPermalink$>"><MTEntryPhoto><img src="<$MTEntryPhotoURL$>" title="<$MTEntryTitle$>" /></MTEntryPhoto></a></li>
</MTEntries>
</ul>

You can set Lastn and the MTEntries category to limit the display to a set number of posts &/or a specific category.

To the head section of your templates, add the code:

<link rel="stylesheet" href="<$MTStaticWebPath$>themes/common/bxslider.css" type="text/css" media="screen" />

<style>
.bx-caption {
bottom: 0;
background: rgba(0, 0, 0, 0.55);
}
</style>

The above code needs to go between <head> </head> in the templates.

Updated 17 April 2019

You may also want to check out these other articles:

  • Looking to create a new design? See the Choose a Theme article.
  • For details on designs which are ideal for viewing on mobile devices, check out the responsive themes, Snap and Sol.
  • If you are looking to create a photo album, see the Photo Albums article.