Demosphere Tip of the Week: Content Rotators and Image Sizing

Content rotators are a great way to to showcase articles, pictures, and videos on your website in a slideshow type fashion.  This week we’ll explore the different settings and features available for content rotators as well as some tips on using correctly sized images to keep your website looking sharp!

Content Rotators:

To add a new content rotator to your Demosphere website, go to the page where you’d like it to appear and click the green “Add Content” button in the desired content area.  Next, select the “Content Rotator” type on the dialog to add your rotator onto the page:

Content Rotator

After selecting the “Content Rotator” button a new screen will appear where you can configure the settings for the rotator.  Assign the rotator a title and adjust various options for the rotator under the Display Options tab.  Please see below for information on the different rotator display options:

  • Transition Interval:  Set the number of seconds each piece of content will be displayed before cycling to the next piece.
  • Responsive vs. Basic Rotator: A responsive rotator will adapt content in the rotator to be best displayed across varying screen sizes (e.g. a smart phone vs. a laptop screen).  A basic rotator will not do this and might look out of place when viewed on a mobile device.  For this reason, we recommend always using the responsive rotator type and it is the default setting when adding a rotator.
  • Height:  Set the maximum height (in pixels) for the rotator.  This can be helpful when you want the rotator to be within certain size limits on your website for design purposes.
  • Display Nav Bar:  Toggle on/off the navigation circles in the top left corner of the rotator that convey which piece of content is currently displayed on screen.  It also allows the user to jump to a different piece of content by clicking on one of the empty circles.
  • Size Images Based on:  This setting allows images to be sized based on the width or height when in the rotator.  We recommend trying both ways to see what works best for your design layout and personal preferences.  Choosing the Height option will keep the full height of the image in place while adding some padding to the width so the image does not get skewed from its original dimensions.  Choosing the Width option will keep the full width of the image while shaving some of the top/bottom of the image to keep the original dimensions in place.  For additional details, please see the image sizing section below.
  • Show Article Summaries: Toggle on/off an overlay of text from the beginning of an article.
  • Thumbnail Options: Choose to have thumbnails for the content in your rotator on the bottom, left, or right side of the rotator.  You can also choose to have no thumbnails as well.

Content Rotator

Once the options are set up and the rotator is saved, you are ready to add content to the rotator.  Hover your mouse over the empty rotator and click the green plus sign to add a new article, image, or piece of raw code content.  Once a piece of content is added to the rotator, you can move, edit, or delete the content by clicking on the orange folder icon while your mouse is hovering over the rotator:

3

Image Sizing:

One of the easiest way to ensure a professional looking website is to upload and display images that have appropriate dimensions.  Let’s say you have an area on your website that is wide but not very tall.  If you were to upload an image that was tall but not wide into this area, it would not fit very well.  The system would either zoom in on the image to fill up the width of the area or add padding to both sides of the image so it fits:

4

However if an image is uploaded to this same area that has roughly the same width it will displayed in a much more appealing manner.  The image will not have to have any padding added or be zoomed in to fit the area’s dimensions:

5

This brings up the question of “How do I know the dimensions of an area on my website?”.  If you are using the Chrome browser, you can right click on a content area and choose the ‘Inspect’ option.  This will bring up the developer console as well as show the dimensions for the area you are inspecting:

6

In this example, we can see that the content area is 847.5 pixels wide, so you’d want to have your images be ~850 pixels wide.  The height of the content area can vary depending on the height of the image, so the image height can be flexible in this case.

If you don’t have Chrome as your browser, most modern browsers have similar developer features for inspecting a website.  You can also use trial and error to upload an image, see how it looks, and try another image in its place to see if it works better.  Keep in mind you’ll want to use an image with the same general dimensions or shape as the content area you are adding the image into.  If the area is tall and narrow, use an image that is also tall and narrow for the best appearance possible!

Lastly, there are several tools and applications you can use to help you manipulate your images. Our favorite free online resource is pixlr.com/express – give it a try!

The following two tabs change content below.

Joe Reist