Docs

How to Use the Carousel Section

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
 
(10 intermediate revisions by one user not shown)
Line 1: Line 1:
−
[[category:Draft]]
+
[[Category:Core Sections]]
−
[[File:Carousel-Front-End.png|200px|thumb|right|alt=Carousel|Carousel]]
+
{{#ev:youtubehd|vVuT67m06Z8|600|PLET-2.4: How to use the Carousel Section - PageLines Essential Training}}
−
The Carousel is a powerful section that allows you to easily showcase your posts and pictures. You can use it to display thumbnails of all of your posts starting with the most recent, or you can select specific post categories. When showcasing pictures, a user can easily scroll through thumbnails, click on one, and view the picture in full screen. You can choose between hosting the images on your site using the NextGEN Gallery plugin, or you can display your images on a Flickr.com account. <br /><br /><br /><br /><br />
+
The [[Glossary#Carousel Section|Carousel Section]] is a powerful section that allows you to easily showcase your posts and pictures. You can use it to display thumbnails of all of your posts starting with the most recent, or you can select specific post categories. When showcasing pictures, a user can easily scroll through thumbnails, click on one, and view the picture in full screen. You can choose between hosting the images on your site using the NextGEN Gallery plugin, or you can display your images on a Flickr.com account.  
 +
 
 +
To view some examples of a Carousel, click on our [http://demo.pagelines.com/core/carousel/ Core demo site.]
 +
 
 
==Enable Carousel==
 
==Enable Carousel==
 
There are different ways to set up the Carousel section.
 
There are different ways to set up the Carousel section.
Line 19: Line 22:
 
[[File:Activate-Carousel-on-existing-page.png|200px|thumb|right|alt=Enable on existing page|Enable on existing page]]
 
[[File:Activate-Carousel-on-existing-page.png|200px|thumb|right|alt=Enable on existing page|Enable on existing page]]
 
From your WordPress Administration Panel:
 
From your WordPress Administration Panel:
−
# Select the "PageLines" panel, then "Templates"
+
# Select the "PageLines" panel, then [[Glossary#Template Setup|"Templates"]]
−
# Select the Template Area that you want the Carousel to go
+
# Select the [[Glossary#Template Area|Template Area]] that you want the Carousel to go
−
## If you select the "Page Template area, by default the Carousel will be displayed on every page that is assigned to the Page Template you choose
+
## If you select the [[Glossary#Page Template|"Page Templates"]] area, by default the Carousel will be displayed on every page that is assigned to the Page Template you choose
−
## If you select "Header," "Morefoot," or "Footer" areas, by default the Carousel will be displayed on ''every page'' regardless of the Page Template
+
## If you select [[Glossary#Header|"Header"]] [[Glossary#Morefoot|"Morefoot,]]" or [[Glossary#Footer|"Footer"]] areas, by default the Carousel will be displayed on ''every page'' regardless of the Page Template
 
#Drag the "Carousel" section from the "Available/Disabled Sections" over to the "Displayed Default Page Sections"
 
#Drag the "Carousel" section from the "Available/Disabled Sections" over to the "Displayed Default Page Sections"
 
# The Section Order will save automatically
 
# The Section Order will save automatically
Line 29: Line 32:
  
 
===Hide Carousel on individual pages===
 
===Hide Carousel on individual pages===
 +
Using [[Glossary#Section Control|Section Control,]] you can control whether or not to show or hide an Active section on a page to page basis
 
[[File:Hide-Carousel.png|200px|thumb|right|alt=Hide Carousel|Hide Carousel]]
 
[[File:Hide-Carousel.png|200px|thumb|right|alt=Hide Carousel|Hide Carousel]]
 
From your WordPress Administration Panel:
 
From your WordPress Administration Panel:
Line 92: Line 96:
 
<br />
 
<br />
 
===Flickr===
 
===Flickr===
−
Uses the [http://eightface.com/wordpress/flickrrss/ FlickrRSS] plugin to view images stored on a [http://www.Flickr.com Flickr.com] account.
+
Uses the [[Glossary#FlickrRSS Plugin|FlickrRSS Plugin]] to view images stored on a [http://www.Flickr.com Flickr.com] account.
  
 
<br />
 
<br />
Line 110: Line 114:
  
 
===NextGen Gallery===
 
===NextGen Gallery===
−
Uses an image gallery from the [http://wordpress.org/extend/plugins/nextgen-gallery/ NextGEN Gallery] plugin<br /><br />
+
Uses an image gallery from the [[Glossary#NextGEN Gallery Plugin|NextGEN Gallery Plugin]]<br /><br />
 
[http://downloads.wordpress.org/plugin/nextgen-gallery.zip Download], install, & activate the NextGEN Gallery plugin <br /><br />
 
[http://downloads.wordpress.org/plugin/nextgen-gallery.zip Download], install, & activate the NextGEN Gallery plugin <br /><br />
 
'''Create a Gallery'''
 
'''Create a Gallery'''
Line 118: Line 122:
 
# Enter a name for your new galley
 
# Enter a name for your new galley
 
# Click "Add Gallery"
 
# Click "Add Gallery"
−
#* Remember the new Gallery ID#. You will need to enter it in the [http://www.pagelines.com/wiki/index.php?title=Carousel_section#Carousel_Meta Carousel Meta]
+
#* Remember the new Gallery ID#. You will need to enter it in the [[How to Use the Carousel Section#Carousel Meta|Carousel Meta]]
 
# Click "Browse" and select images to upload
 
# Click "Browse" and select images to upload
 
# Choose the gallery you want to upload the pictures to
 
# Choose the gallery you want to upload the pictures to
 
# Click "Upload images"
 
# Click "Upload images"

Latest revision as of 04:36, 2 April 2012


The Carousel Section is a powerful section that allows you to easily showcase your posts and pictures. You can use it to display thumbnails of all of your posts starting with the most recent, or you can select specific post categories. When showcasing pictures, a user can easily scroll through thumbnails, click on one, and view the picture in full screen. You can choose between hosting the images on your site using the NextGEN Gallery plugin, or you can display your images on a Flickr.com account.

To view some examples of a Carousel, click on our Core demo site.

Contents

Enable Carousel

There are different ways to set up the Carousel section.

Create a new page using the "Carousel Page" template

Create a new page
Create a new page

From your WordPress Administration Panel:

  1. Select the "Pages" panel, then "Add New"
  2. Enter a title for your new page
  3. Under "Page Attributes" click the "Template" dropdown
  4. Select "Carousel Page"
  5. Click "Publish"
  6. Click "View Page"

You will now see an empty Carousel on your new page

Enable Carousel on existing page

Enable on existing page
Enable on existing page

From your WordPress Administration Panel:

  1. Select the "PageLines" panel, then "Templates"
  2. Select the Template Area that you want the Carousel to go
    1. If you select the "Page Templates" area, by default the Carousel will be displayed on every page that is assigned to the Page Template you choose
    2. If you select "Header" "Morefoot," or "Footer" areas, by default the Carousel will be displayed on every page regardless of the Page Template
  3. Drag the "Carousel" section from the "Available/Disabled Sections" over to the "Displayed Default Page Sections"
  4. The Section Order will save automatically

You will now see an empty Carousel on every page that the Carousel is active on

Hide Carousel on individual pages

Using Section Control, you can control whether or not to show or hide an Active section on a page to page basis

Hide Carousel
Hide Carousel

From your WordPress Administration Panel:

  1. Select the "Pages" panel, then "All Pages"
  2. Click to edit the page that you wish to hide the Carousel
  3. On the "Meta Panel," click the "Page Setup" tab
  4. Under "Individual Page Section Control," click "Hide Carousel"
  5. Click "Save Meta Settings"

Because the Carousel section is displayed by default when you enable it, you will need to use this method for every page that you do not want the Carousel displayed

Show Carousel on individual pages

Hide Carousel by default
Hide Carousel by default

You can also hide the Carousel section by default, and choose the pages you want to show it on

From your WordPress Administration Panel:

  1. Select the "PageLines" panel, then "Templates"
  2. Make sure you have the correct Template Area selected for the type of pages you want to hide
  3. Under the "Displayed Default Page Sections," click "Carousel Options"
  4. Click "Hide This By Default"
  5. Click "Save Options"

Now the Carousel section will be hidden by default until you select to show it on the individual page

Show Carousel
Show Carousel
  1. Select the "Pages" panel, then "All Pages"
  2. Click to edit the page that you wish to show the Carousel
  3. Under "Individual Page Section Control," click "Show Carousel"
  4. Click "Save Meta Settings"





Carousel Meta

These setting with control your Carousel display settings as well as options depending on the Mode that you choose.

Carousel Meta
Carousel Meta

From your WordPress Administration Panel:

  1. Select the "Pages" panel, then "All Pages"
  2. Click to edit the Page that will display the Carousel section
  3. On the MetaPanel, click "Feature Meta"
    1. Max Carousel Items
      • This option sets the maximum number of items/thumbnails to show in the carousel
      • Default is 30
    2. Carousel Image/Link Mode
      • The Carousel has three modes
        • Flickr Mode
        • Post Thumbnails Mode
        • NextGen Gallery Mode
    3. NextGen Gallery ID For Carousel
      • If you are using "NextGen Gallery" mode, enter the ID number of your gallery
    4. Carousel - Post Category Name
      • If you are using "Post Thumbnails" mode, by default your most recent posts will be displayed. This setting will limit the display to a specific post category
    5. Displayed Carousel Items
      • This option sets the number of images that will be displayed in the carousel at any given time
      • Default is 9
    6. Scrolled Carousel Items
      • This option sets the number of images that will scroll when a user clicks the next & previous buttons
      • Default is 6
    7. Carousel Animation Speed
      • The speed of the scroll animation as string in milliseconds
      • Default is 800
      • If set to 0, animation is turned off
    8. Carousel Image Dimensions
      • If you are using "Post Thumbnails" mode, enter the size for your post images
      • Default is 70x70 pixels
      • For the "Flickr" and "NextGen Gallery" modes, image sizes are set by Flickr thumb sizes and the NextGen Gallery plugin respectively.

Carousel Modes


Flickr

Uses the FlickrRSS Plugin to view images stored on a Flickr.com account.


Download, install, & activate the FlickrRSS plugin

  • By default, the Carousel will display random "Community" photos
Flickr
Flickr

Change flickrRSS settings

From your WordPress Administration Panel:

  1. Select the "Settings" panel, then "flickrRSS"
  2. Choose your Display number & Group/User/Set ID
  3. Click "Save Settings"

Post Thumbnails

Uses links and ‘featured image’ thumbnails from your blog posts

  • All of your settings for this mode can be changed in a page's Carousel Meta


NextGen Gallery

Uses an image gallery from the NextGEN Gallery Plugin

Download, install, & activate the NextGEN Gallery plugin

Create a Gallery

NextGen
NextGen

From your WordPress Administration Panel:

  1. Select the "Gallery" panel, then "Add Gallery/Images"
  2. Enter a name for your new galley
  3. Click "Add Gallery"
    • Remember the new Gallery ID#. You will need to enter it in the Carousel Meta
  4. Click "Browse" and select images to upload
  5. Choose the gallery you want to upload the pictures to
  6. Click "Upload images"
Retrieved from "http://www.pagelines.com/wiki/index.php?title=How_to_Use_the_Carousel_Section&oldid=5032"