• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More

Need some help with your New SmugMug Site?

Dgrin Challenges

They're back! Our latest series of Dgrin Challenges, the OOYCZ Challenges (Out of Your Comfort Zone), is a series of challenges to help you improve your photography by stepping out of your comfort zone and trying something new. Our challenge leader says "Consider it like a photography class with no diplomas.". Get started with OOYCZ by reading the Challenge Guide.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Page 1  of  17
1 2 3 4 5 11 Last »
Old Nov-01-2010, 02:26 PM
#1
jfriend is offline jfriend OP
Scripting dude-volunteer
Multi homepage
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.

Code:
 
 
// ==============================================================================================
// 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.

Code:
<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:

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


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

Code:
/* 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:

Code:
/* 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:

Code:
.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:

Code:
.galleries #galleriesBox,
.find #datesBox,
.map #mapBox,
.featured #featuredBox,
.popular #popularPhotos,
.recent #recentPhotosBox,
.keywords #keywordsBox {display: block;}
You would use this (changes shown in red):

Code:
.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
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question

Last edited by jfriend; Jun-15-2011 at 08:36 AM.
Old Nov-01-2010, 03:00 PM
#2
denisegoldberg is offline denisegoldberg
Major grins
denisegoldberg's Avatar
John -
This is great (of course!). Thanks for all of the work you put into it.

--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Old Nov-01-2010, 03:46 PM
#3
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Great solution for a continuing problem
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Nov-02-2010, 02:40 PM
#4
DrRichy is offline DrRichy
Beginner grinner
Is it possible to setup multi-home pages with unique Navbars?

__________________________________________________

www.ruelboydphotography.com

Last edited by DrRichy; Nov-02-2010 at 02:42 PM. Reason: omission
Old Nov-02-2010, 02:57 PM
#5
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by DrRichy View Post
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;}
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Nov-02-2010, 04:37 PM
#6
DrRichy is offline DrRichy
Beginner grinner
Thanks jfriend, with your input I'm back to work!!!
Old Nov-09-2010, 09:55 AM
#7
thibaug is offline thibaug
Big grins
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

Last edited by thibaug; Nov-09-2010 at 09:58 AM. Reason: Forgot something
Old Nov-09-2010, 02:28 PM
#8
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by thibaug View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Nov-09-2010, 10:10 PM
#9
thibaug is offline thibaug
Big grins
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?
__________________
Gilles

http://www.gtphotography.ca/
Old Nov-10-2010, 06:19 AM
#10
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by thibaug View Post
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:

Code:
DuplicateHomepage("galleries|map|featured|recent|featured-events|find");
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Nov-16-2010, 10:16 AM
#11
thibaug is offline thibaug
Big grins
Ah... Thanks!
__________________
Gilles

http://www.gtphotography.ca/
Old Dec-02-2010, 01:19 AM
#12
SleepyDay is offline SleepyDay
Beginner grinner
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!
Old Dec-02-2010, 07:51 AM
#13
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by SleepyDay View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Dec-02-2010, 08:54 AM
#14
SleepyDay is offline SleepyDay
Beginner grinner
Quote:
Originally Posted by jfriend View Post
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,
Old Dec-02-2010, 09:00 AM
#15
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by SleepyDay View Post
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).
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Dec-02-2010, 09:01 AM
#16
DcMoody23 is offline DcMoody23
Big grins
I know this is a dumb question, but what's the major advantage here?
Or is it just for the sake of simplification?
Old Dec-02-2010, 09:19 AM
#17
SleepyDay is offline SleepyDay
Beginner grinner
Quote:
Originally Posted by jfriend View Post
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,
Old Dec-02-2010, 09:45 AM
#18
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by SleepyDay View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Dec-05-2010, 02:04 PM
#19
DrRichy is offline DrRichy
Beginner grinner
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>
Old Dec-05-2010, 02:22 PM
#20
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by DrRichy View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Page 1  of  17
1 2 3 4 5 11 Last »
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Stretchy slideshow customization for the Homepage jfriend Legacy SmugMug Customization 856 Jul-28-2013 05:35 PM
Accidentally deleted my homepage while editing html dfg1983 Legacy SmugMug Customization 4 Aug-08-2009 05:28 PM
Link to my homepage? tsinsf SmugMug Support 1 Feb-22-2009 03:04 PM
Setting feature photos for homepage categories sledgehammer Legacy SmugMug Customization 0 Jan-28-2009 08:30 AM
Hiding Search on homepage Desert-Rat Legacy SmugMug Customization 2 Sep-03-2007 01:51 PM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump