All of these things can be present on the homepage:

• bio
• slideshow
• single photo
• single video
• timeline
• featured galleries
• galleries/categories
• recent photos
• featured events
• map

You can display all of these on the same copy of your homepage or split them out into separate copies of your homepage so they each appear on their own page. This is a tutorial for setting up multiple copies of your homepage, each with their own set of objects on them.

Step 1

If you previously had a separate galleries page from this tutorial, you need to remove both the javascript and the CSS that you added from the two steps in that tutorial called "The Galleries Page I" and "The Galleries Page II". They may conflict with what we're doing here and this is a full replacement for that.

Step 2

Of all the items in the homepage layout button on the homepage, determine which ones you want to present to your users and make sure they all have a checkmark by them. At this point, they will probably all show on your one homepage - don't worry about that as we will change that in the future steps. So, for example, if you want your slideshow on the default homepage, and your galleries, keywords and recent photos each on as separate page, we can do that.


Step 3

Install this script into your top javascript. Make sure you get an exact copy of this script with everything at the start and end, but nothing extra from this post. The #1 goof when following this tutorial is getting an incomplete copy/paste of this script.

 
 
// ==============================================================================================
// DuplicateHomepage
// 
// Compared to the original Smugmug version, this version has the following capabilities:
// 1) It simultaneously supports many different copies of the homepage (listed in the DuplicateHomepage 
//     function call)
// 2) It's case insensitive so http://username.smugmug.com/Galleries will work along with
//      http://username.smugmug.com/galleries
//
// Revision 1.1
// See: http://www.dgrin.com/showthread.php?p=1492133 for support questions or instructions.
// ==============================================================================================
function DuplicateHomepage(pageList)
{
    // only fire this if Smugmug thinks we're on the homepage (e.g. not on a category)
    if (YD.hasClass(document.body, "homepage"))
    {
        // regExp that starts with "/" matches one of the passed in words and then ends with an optional "/",  case insensitive matches
        var re = new RegExp("^\/(" + pageList + ")[\/]?$", "i");
        var matches = re.exec(window.location.pathname);
        if (matches && (matches.length > 1))
        {
            YD.addClass(document.body, matches[1].toLowerCase());
        }
        else if (window.location.pathname == "/")
        {
            YD.addClass(document.body, "homepageMain");
            YD.addClass(document.body, "homepageDefault");
        }
        else
        {
            YD.addClass(document.body, "homepageOther");
            YD.addClass(document.body, "homepageDefault");
        }
    }
} 

// ==============================================================================================
// End of DuplicateHomepage
// ==============================================================================================

The point of this script is to do the following (you don't have to do anything here, this is just explanation for those who want to know how this works):

If the page URL is just your root domain, then it adds a class to the body tag called "homepageMain" and another one called "homepageDefault". This allows you to use CSS rules that will only apply to your homepage when the page URL is just your root domain. This allows you to easily target CSS rules at just the homepage like this:

.homepageDefault xxxxx {yyyy}

If the page URL is your root followed by one of the tags that you put in the DuplicateHomepage() function call, then add that tag as a class to the body tag. So, for the galleries page, the class "galleries" would be added and you can target CSS rules to that page like this:

.galleries xxxx {yyyyy}
.map xxxx {yyyyy}


Step 4

Add this to your custom header.

<script type="text/javascript">
DuplicateHomepage("galleries|map|featured|recent|featured-events");
</script>

Remove any of the items in the list that you are not going to present on their own page, so for example if you were only displaying galleries, find and map, that code should read:

<script type="text/javascript">
DuplicateHomepage("galleries|find|map");
</script>

Step 5


Add this CSS to your advanced customization (CSS box) in your control panel:

/* hide all homepage items by default on the homepage */
.homepage #recentPhotosBox,
.homepage #datesBox,
.homepage #featuredBox,
.homepage #slideshowBox,
.homepage #photoVideoBox,
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #eventsBox,
.homepage #bioBox {display: none;}

Decide which of these items you want displayed on your default homepage. Most people typically will select either a slideshow or a photo/video. Add a new line of CSS after the above CSS for that one item. So, if you want to show the built-in slideshow on the homepage (that's the slideshowBox object), then add this line of CSS:

/* on the actual default homepage, show the item(s) we want here */
.homepageDefault #slideshowBox {display: block;}

By way of an explanation for what we're doing here, we're hiding all the homepage elements with the first block of CSS, then showing the one(s) that we want to show on the default homepage.

At this point, your default homepage should only be showing the item(s) on it that you want to show there.

Step 6

Now, we need to add the CSS for each separate copy of the homepage that we want to offer our users. Add this:

.galleries #galleriesBox,
.galleries #categoriesBox,
.find #datesBox,
.map #mapBox,
.featured #featuredBox,
.featured-events #eventsBox,
.recent #recentPhotosBox {display: block;}

At this point, you now have multiple copies of your homepage. You can access each copy with a special URL. Suppose your smugmug domain is http://jedi.smugmug.com. Then, you would access your default homepage at http://jedi.smugmug.com. Your other copies of the homepage are at these URLs:

http://jedi.smugmug.com/galleries
http://jedi.smugmug.com/find
http://jedi.smugmug.com/map
http://jedi.smugmug.com/featured
http://jedi.smugmug.com/featured-events
http://jedi.smugmug.com/recent

If you go to one of these URLs (with your domain in it) and the page is blank, then you may have to go back to Step 2 and make sure you've enabled the appropriate item in the homepage layout menu. If it isn't labeled there, it will never display.

To use these separate pages, you now need to link to them. You can put links anywhere that Smugmug can be customized, but the classic place to link to these pages would be in your navbar.

Advanced Modifications

If you want more than one element to be displayed together on one of the homepage copies, then it's a simple matter of modifying the above CSS to show more than one item on the one particular page you want to do. For example, if you wanted the popular and recent photos to show on the popular box, then instead of this CSS:

.galleries #galleriesBox,
.find #datesBox,
.map #mapBox,
.featured #featuredBox,
.popular #popularPhotos,
.recent #recentPhotosBox,
.keywords #keywordsBox {display: block;}

You would use this (changes shown in red):

.galleries #galleriesBox,
.find #datesBox,
.map #mapBox,
.featured #featuredBox,
.popular #popularPhotos,
.popular #recentPhotosBox,
.keywords #keywordsBox {display: block;}

Troubleshooting

If this isn't working for you, then here are some steps to check.

1) Make sure you've removed any old javascript and CSS from previous separate galleries pages.
2) Make sure you've enabled all the items in the homepage layout button that you want to be visible on any copy of the homepage. If they aren't enabled there, they will never show.
3) Make sure the appropriate script from step 3 is copied into your top javascript.
4) Make sure the appropriate script from step 4 is copied into your custom header.
5) Make sure you don't have any javascript errors which are keeping either of the two previous scripts from operating. Check here for how to do that.
6) Make sure you've added the appropriate CSS in steps 5 and 6.

John -
This is great (of course!). Thanks for all of the work you put into it.

--- Denise

Great solution for a continuing problem

Is it possible to setup multi-home pages with unique Navbars?

__________________________________________________

www.ruelboydphotography.com

Originally Posted by DrRichy Is it possible to setup multi-home pages with unique Navbars? __________________________________________________ www.ruelboydphotography.com

Yes, if each navbar has it's own unique CSS ID:

<div id="navbar1"> ... </div>
<div id="navbar2"> ... </div>

Then, you could use CSS like this to show a different navbar on the galleries page:

/* hide navbar2 by default */
#navbar2 {display: none;}

/* on galleries page, show navbar2, hide navbar1 */
.galleries #navbar2 {display: block;}
.galleries #navbar1 {display: none;}

Thanks jfriend, with your input I'm back to work!!!

Hi,

First, thanks for putting this together! I'm pretty new at this stuff so I really need to follow the "recipe".

So... Maybe other folks noticed this and fixed it in their code, but there are a couple of typos in step 4:

In the first example, the closing tag is missing the "/"

<script type="text/javascript">
DuplicateHomepage("galleries|map|featured|recent|f eatured-events");
<script>
And in the second example, there's a typo in the word javascript:

<script type="text/jaavascript">
DuplicateHomepage("galleries|find|map");
</script>

Oh, and in Step 5, you state ALL, but you forgot:

.homepage #popularPhotos,
.homepage #keywordsBox

Thanks!!

Gilles

Originally Posted by thibaug Hi, First, thanks for putting this together! I'm pretty new at this stuff so I really need to follow the "recipe". So... Maybe other folks noticed this and fixed it in their code, but there are a couple of typos in step 4: In the first example, the closing tag is missing the "/" <script type="text/javascript"> DuplicateHomepage("galleries|map|featured|recent|f eatured-events"); <script> And in the second example, there's a typo in the word javascript: <script type="text/jaavascript"> DuplicateHomepage("galleries|find|map"); </script> Oh, and in Step 5, you state ALL, but you forgot: .homepage #popularPhotos, .homepage #keywordsBox Thanks!! Gilles

Thanks. I fixed the first two typos.

I purposely leave out popular and keywords because there's no reason to enable them when using this customization. /popular and /keywords are already stand-alone pages with more functionality than the homepage widget so there's no reason to use this customization to put them on a separate page (they already work on a separate page) - at least that was my logic.

Oh, I didn't realize those were available directly.

On a different note, the find page doesn't seem to work. The above code should work? I just get the default homepage though the URL stays with /find.

gtphotography.ca
http://gtphotography.ca/find

Thoughts?

Originally Posted by thibaug Oh, I didn't realize those were available directly. On a different note, the find page doesn't seem to work. The above code should work? I just get the default homepage though the URL stays with /find. gtphotography.ca http://gtphotography.ca/find Thoughts?

You don't have find listed in this line in your custom header:

DuplicateHomepage("galleries|map|featured|recent|featured-events|find");

Ah... Thanks!

Thank you for the wonderful instruction.

As a technical dummy it took me a long time to read through and try to understand everything. I managed to get everything set up as instructed. I do have a small problem however :( My "galleries" homepage displayed just fine in Gallery listing mode; but when I tried to switch to "Display: Categories" it brings me back to the front page?

http://ptnguyen.smugmug.com/galleries

Any advices?

Thanks a lot!

Originally Posted by SleepyDay Thank you for the wonderful instruction. As a technical dummy it took me a long time to read through and try to understand everything. I managed to get everything set up as instructed. I do have a small problem however :( My "galleries" homepage displayed just fine in Gallery listing mode; but when I tried to switch to "Display: Categories" it brings me back to the front page? http://ptnguyen.smugmug.com/galleries Any advices? Thanks a lot!

For me to take a look, you'll have to put it back into categories mode.

Originally Posted by jfriend For me to take a look, you'll have to put it back into categories mode.

When I click "catergory" this brings up this link, which is the homepage: http://ptnguyen.smugmug.com/index.mg?viewBy=Categories

Thanks,

Originally Posted by SleepyDay When I click "catergory" this brings up this link, which is the homepage: http://ptnguyen.smugmug.com/index.mg?viewBy=Categories Thanks,

I have no idea what you're talking about here. In your view of your galleries, there should be a link in the upper right corner that allows you to change your thumbnail display to view by category instead of view by gallery. When you do that, your galleries page itself should change to show categories. That link above is how Smugmug makes that change (when you're logged in). Are you saying you click that link and your galleries page doesn't change (you may have to go back to your galleries page manually after clicking the link)? If so, you may need to talk to the Smugmug help desk because they can see your site when logged in (I can't).

I know this is a dumb question, but what's the major advantage here?
Or is it just for the sake of simplification?

Originally Posted by jfriend I have no idea what you're talking about here. In your view of your galleries, there should be a link in the upper right corner that allows you to change your thumbnail display to view by category instead of view by gallery. When you do that, your galleries page itself should change to show categories. That link above is how Smugmug makes that change (when you're logged in). Are you saying you click that link and your galleries page doesn't change (you may have to go back to your galleries page manually after clicking the link)? If so, you may need to talk to the Smugmug help desk because they can see your site when logged in (I can't).

Maybe I need to get with help desk.

Just to clarify, after I did the customization, my galleries page doesn't work as before. When I click 'Catergories" instead of showing me the thumbnail (like you said above), it brings me to the http://ptnguyen.smugmug.com/index.mg?viewBy=Categories page and display my homepage, instead of displaying the galleries in thumbnail like it supposed to. So I thought I messed up something in the codes along the way, and thought I would ask.

Thanks,

Originally Posted by SleepyDay Maybe I need to get with help desk. Just to clarify, after I did the customization, my galleries page doesn't work as before. When I click 'Catergories" instead of showing me the thumbnail (like you said above), it brings me to the http://ptnguyen.smugmug.com/index.mg?viewBy=Categories page and display my homepage, instead of displaying the galleries in thumbnail like it supposed to. So I thought I messed up something in the codes along the way, and thought I would ask. Thanks,

It doesn't matter where it takes you after you click view by categories. After you've made that change, you should then look at your galleries page again: http://ptnguyen.smugmug.com/galleries and see what it is showing.

Still in the concept of a new homepage...
HOW CAN I MAKE THE BANNER CLICKABLE TO AN ALTERNATE HOMEPAGE?

method for single home page:
<div id="my_banner"><a href="http://BLABLA.com"><img src="/img/spacer.gif" width="xxx" height="yyy" border="0" /></a></div>

Originally Posted by DrRichy Still in the concept of a new homepage... HOW CAN I MAKE THE BANNER CLICKABLE TO AN ALTERNATE HOMEPAGE? method for single home page: <div id="my_banner"><a href="http://BLABLA.com"><img src="/img/spacer.gif" width="xxx" height="yyy" border="0" /></a></div>

Each alternate homepage has it's own URL (for example http://BLABLA.com/galleries) so you just put that URL in your banner HTML in place of what you have now.