Using an Image Gallery as a header - Revision history

Ccroft: /* Extra Steps */

2013-12-18T23:14:44Z

Extra Steps

← Older revision		Revision as of 16:14, 18 December 2013
Line 48:		Line 48:
	</source>		</source>


	~~[[File:Carousel.tweaked.jpg]]~~

	[[Category:Tips and Tricks]]		[[Category:Tips and Tricks]]
	[[Category:Advanced Topics]]		[[Category:Advanced Topics]]

Ccroft at 22:52, 18 December 2013

2013-12-18T22:52:34Z

← Older revision		Revision as of 15:52, 18 December 2013
Line 9:		Line 9:


	The first thing you need to do is create a location in your header, if one doesn't already exist. The location id should be unique from the others. If you're using a two-column layout, it's likely that you'll be creating a layout with an id of "location_2"~~. For these example purposes, we'll be using the theme "Hiller Windmill" as our base as it already has a header image that we can replace~~.		The first thing you need to do is create a location in your header, if one doesn't already exist. The location id should be unique from the others. If you're using a two-column layout, it's likely that you'll be creating a layout with an id of "location_2".

Shanker at 22:02, 9 February 2012

2012-02-09T22:02:31Z

← Older revision		Revision as of 15:02, 9 February 2012
Line 27:		Line 27:


	We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location (see: [[Adding_to_a_Page\|Adding to a Page]]). Make sure you've added the images you want to use to a folder. That will make it easier for displaying on the the images you want to display in your header (see: [[~~File_Collections\|~~File Folders]]).		We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location (see: [[Adding_to_a_Page\|Adding to a Page]]). Make sure you've added the images you want to use to a folder. That will make it easier for displaying on the the images you want to display in your header (see: [[File Folders]]).

Shanker at 22:02, 9 February 2012

2012-02-09T22:02:11Z

← Older revision		Revision as of 15:02, 9 February 2012
Line 27:		Line 27:


	We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location (see: [[Adding_to_a_Page\|Adding to a Page]]). Make sure you've added the images you want to use to a ~~collection~~. That will make it easier for displaying on the the images you want to display in your header (see: [[File_Collections\|File ~~Collections~~]]).		We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location (see: [[Adding_to_a_Page\|Adding to a Page]]). Make sure you've added the images you want to use to a folder. That will make it easier for displaying on the the images you want to display in your header (see: [[File_Collections\|File Folders]]).

Dinsley: /* Extra Steps */

2010-11-17T19:07:17Z

Extra Steps

← Older revision		Revision as of 12:07, 17 November 2010
Line 39:		Line 39:


	==== Extra Steps ====		== Extra Steps ==

	If you want to hide the previous and next buttons, you can very easily hide them with this code. You'll need to adjust the selector to use the correct id for your layout. You'll need to add this to your main CSS file. See: [[Editing_Theme_Source_Code\|Editing Theme Source Code]].		If you want to hide the previous and next buttons, you can very easily hide them with this code. You'll need to adjust the selector to use the correct id for your layout. You'll need to add this to your main CSS file. See: [[Editing_Theme_Source_Code\|Editing Theme Source Code]].


	<source lang="css">		<source lang="css">
	#location_2 .image_gallery_component .carousel_controls { display: none; }		#location_2 .image_gallery_component .carousel_controls { display: none; }
	</source>		</source>


	[[File:Carousel.tweaked.jpg]]		[[File:Carousel.tweaked.jpg]]

Dinsley at 19:06, 17 November 2010

2010-11-17T19:06:58Z

Shanker at 23:46, 18 May 2010

2010-05-18T23:46:17Z

← Older revision		Revision as of 16:46, 18 May 2010
Line 1:		Line 1:
	__NOTOC__		__NOTOC__

	Here we'll help you through the process of using an [[ImageGalleryComponent\|Image Gallery Component]] as your header. This can be useful in the carousel view setting with an auto-rotate value set.		Here we'll help you through the process of using an [[ImageGalleryComponent\|Image Gallery Component]] as your theme header image. This can be useful in the carousel view setting with an auto-rotate value set.

			''Note: For information about managing your site header settings, see the [[Header Settings]] page.''


	The first thing you need to do is create a location in your header, if one doesn't already exist. The location id should be unique from the others. If you're using a two-column layout, it's likely that you'll be creating a layout with an id of "location_2". For these example purposes, we'll be using the theme "Hiller Windmill" as our base as it already has a header image that we can replace.		The first thing you need to do is create a location in your header, if one doesn't already exist. The location id should be unique from the others. If you're using a two-column layout, it's likely that you'll be creating a layout with an id of "location_2". For these example purposes, we'll be using the theme "Hiller Windmill" as our base as it already has a header image that we can replace.

Mhaugland at 22:38, 10 May 2010

2010-05-10T22:38:31Z

← Older revision		Revision as of 15:38, 10 May 2010
Line 1:		Line 1:
	__NOTOC__		__NOTOC__
	~~=== Note: Article writing still in progress ===~~

	Here we'll help you through the process of using an [[ImageGalleryComponent\|Image Gallery Component]] as your header. This can be useful in the carousel view setting with an auto-rotate value set.		Here we'll help you through the process of using an [[ImageGalleryComponent\|Image Gallery Component]] as your header. This can be useful in the carousel view setting with an auto-rotate value set.
Line 8:		Line 7:
	[[File:Carousel.theme.preview.jpg]]		[[File:Carousel.theme.preview.jpg]]

	Now we want to modify the HTML in our default.html file. It will look like this when we start:		Now we want to modify the HTML in our default.html file (see: [[Editing_Theme_Source_Code\|Editing Theme Source Code]]). It will look like this when we start:

	[[File:Carousel.code.original.jpg]]		[[File:Carousel.code.original.jpg]]
Line 16:		Line 15:
	[[File:Carousel.code.modified.jpg]]		[[File:Carousel.code.modified.jpg]]

	We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location.		We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location (see: [[Adding_to_a_Page\|Adding to a Page]]). Make sure you've added the images you want to use to a collection. That will make it easier for displaying on the the images you want to display in your header (see: [[File_Collections\|File Collections]]).

	[[File:Carousel.settings.jpg]]		[[File:Carousel.settings.jpg]]
Line 26:		Line 25:
	==== Extra Steps ====		==== Extra Steps ====

	If you want to hide the previous and next buttons, you can very easily hide them with this code. You'll need to adjust the selector to use the correct id for your layout.		If you want to hide the previous and next buttons, you can very easily hide them with this code. You'll need to adjust the selector to use the correct id for your layout. You'll need to add this to your main CSS file. See: [[Editing_Theme_Source_Code\|Editing Theme Source Code]].

	<source lang="css">		<source lang="css">

Mhaugland: /* Note: Article writing still in progress */

2010-05-10T22:16:19Z

Note: Article writing still in progress

← Older revision		Revision as of 15:16, 10 May 2010
Line 5:		Line 5:

	The first thing you need to do is create a location in your header, if one doesn't already exist. The location id should be unique from the others. If you're using a two-column layout, it's likely that you'll be creating a layout with an id of "location_2". For these example purposes, we'll be using the theme "Hiller Windmill" as our base as it already has a header image that we can replace.		The first thing you need to do is create a location in your header, if one doesn't already exist. The location id should be unique from the others. If you're using a two-column layout, it's likely that you'll be creating a layout with an id of "location_2". For these example purposes, we'll be using the theme "Hiller Windmill" as our base as it already has a header image that we can replace.

			[[File:Carousel.theme.preview.jpg]]

	Now we want to modify the HTML in our default.html file. It will look like this when we start:		Now we want to modify the HTML in our default.html file. It will look like this when we start:

			[[File:Carousel.code.original.jpg]]

	And look like this with our modification:		And look like this with our modification:

			[[File:Carousel.code.modified.jpg]]

	We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location.		We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location.

			[[File:Carousel.settings.jpg]]

	Now you have an image rotator in your header! You may need to tweak the styling to have it align and display how you'd like. This will vary from theme-to-theme and by your preference.		Now you have an image rotator in your header! You may need to tweak the styling to have it align and display how you'd like. This will vary from theme-to-theme and by your preference.

			[[File:Carousel.image_gallery.jpg]]

	==== Extra Steps ====		==== Extra Steps ====
Line 21:		Line 31:
	#location_2 .image_gallery_component .carousel_controls { display: none; }		#location_2 .image_gallery_component .carousel_controls { display: none; }
	</source>		</source>

			[[File:Carousel.tweaked.jpg]]

	[[Category:Tips and Tricks]]		[[Category:Tips and Tricks]]
	[[Category:Advanced Topics]]		[[Category:Advanced Topics]]

Mhaugland: /* Note: Article writing still in progress */

2010-05-10T21:27:42Z

Note: Article writing still in progress

← Older revision		Revision as of 14:27, 10 May 2010
Line 3:		Line 3:

	Here we'll help you through the process of using an [[ImageGalleryComponent\|Image Gallery Component]] as your header. This can be useful in the carousel view setting with an auto-rotate value set.		Here we'll help you through the process of using an [[ImageGalleryComponent\|Image Gallery Component]] as your header. This can be useful in the carousel view setting with an auto-rotate value set.

			The first thing you need to do is create a location in your header, if one doesn't already exist. The location id should be unique from the others. If you're using a two-column layout, it's likely that you'll be creating a layout with an id of "location_2". For these example purposes, we'll be using the theme "Hiller Windmill" as our base as it already has a header image that we can replace.

			Now we want to modify the HTML in our default.html file. It will look like this when we start:

			And look like this with our modification:

			We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location.

			Now you have an image rotator in your header! You may need to tweak the styling to have it align and display how you'd like. This will vary from theme-to-theme and by your preference.

			==== Extra Steps ====

			If you want to hide the previous and next buttons, you can very easily hide them with this code. You'll need to adjust the selector to use the correct id for your layout.

			<source lang="css">
			#location_2 .image_gallery_component .carousel_controls { display: none; }
			</source>

			[[Category:Tips and Tricks]]
			[[Category:Advanced Topics]]

← Older revision		Revision as of 12:06, 17 November 2010
Line 3:		Line 3:
	Here we'll help you through the process of using an [[ImageGalleryComponent\|Image Gallery Component]] as your theme header image. This can be useful in the carousel view setting with an auto-rotate value set.		Here we'll help you through the process of using an [[ImageGalleryComponent\|Image Gallery Component]] as your theme header image. This can be useful in the carousel view setting with an auto-rotate value set.

	''Note: For information about managing your site header settings, see the [[Header Settings]] page.''		<div class='note'>
			'''Note:'''<br />
			For information about managing your site header settings, see the [[Header Settings]] page.
			</div>


	The first thing you need to do is create a location in your header, if one doesn't already exist. The location id should be unique from the others. If you're using a two-column layout, it's likely that you'll be creating a layout with an id of "location_2". For these example purposes, we'll be using the theme "Hiller Windmill" as our base as it already has a header image that we can replace.		The first thing you need to do is create a location in your header, if one doesn't already exist. The location id should be unique from the others. If you're using a two-column layout, it's likely that you'll be creating a layout with an id of "location_2". For these example purposes, we'll be using the theme "Hiller Windmill" as our base as it already has a header image that we can replace.


	[[File:Carousel.theme.preview.jpg]]		[[File:Carousel.theme.preview.jpg]]


	Now we want to modify the HTML in our default.html file (see: [[Editing_Theme_Source_Code\|Editing Theme Source Code]]). It will look like this when we start:		Now we want to modify the HTML in our default.html file (see: [[Editing_Theme_Source_Code\|Editing Theme Source Code]]). It will look like this when we start:


	[[File:Carousel.code.original.jpg]]		[[File:Carousel.code.original.jpg]]


	And look like this with our modification:		And look like this with our modification:


	[[File:Carousel.code.modified.jpg]]		[[File:Carousel.code.modified.jpg]]


	We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location (see: [[Adding_to_a_Page\|Adding to a Page]]). Make sure you've added the images you want to use to a collection. That will make it easier for displaying on the the images you want to display in your header (see: [[File_Collections\|File Collections]]).		We've added a new location in-place of the existing header image. Now we can add an image gallery to our new location (see: [[Adding_to_a_Page\|Adding to a Page]]). Make sure you've added the images you want to use to a collection. That will make it easier for displaying on the the images you want to display in your header (see: [[File_Collections\|File Collections]]).


	[[File:Carousel.settings.jpg]]		[[File:Carousel.settings.jpg]]


	Now you have an image rotator in your header! You may need to tweak the styling to have it align and display how you'd like. This will vary from theme-to-theme and by your preference.		Now you have an image rotator in your header! You may need to tweak the styling to have it align and display how you'd like. This will vary from theme-to-theme and by your preference.


	[[File:Carousel.image_gallery.jpg]]		[[File:Carousel.image_gallery.jpg]]


	==== Extra Steps ====		==== Extra Steps ====