In today's economy, businesses need to make cost-cuts where ever they can without jeopardizing their professionalism. How much are you spending on your website? More than $100? You might be wasting money. Photographers have long ago found Smugmug's photo hosting services excellent, but perhaps not quite as aesthetically pleasing as would be required for a professional website. Sure, there are customization options: an easy, but limited built-in customizer and a blank field for your own CSS code. Let's face it, there's a good chance you don't know enough, or anything, about writing CSS - neither do I. Luckily, there are a lot enthusiastic Smugmug users who can do the code, plus are willing to share their information online. Here I have made a step-by-step tutorial for getting a professional-looking website for less than $70 per year and about 12 hours of your time (or less, if you know your way around the puters). BrisbanePropertyPhotos.com.au was created to market real estate photography, but it will work with almost any branch of photography just as well. If you couldn't be bothered, but like how it looks, I can do it for you for around $400 plus the cost of a custom domain and Smugmug account. Send me an email at info@brisbanepropertyphotos.com.au.
Preparations
Create new categories
Portfolio You're probably craving to get that big, fancy slideshow going, but before that we need to create a portfolio for you. Again, navigate your way to your home page, then click 'Add photos' -> 'Create new gallery'. Choose your custom-made 'Real Estate' as the category and create a gallery called 'Portfolio'. Now, choose 20-40 of your very best pictures and upload them to this gallery. It will not look like the picture, yet, but we're getting there. Remember to caption (Tools -> Caption/Keyword) your photos for SEO.
Slideshow 1/3 Yes, it's time to do the first bit of coding and your first major change to the default look! This slideshow will automatically use the photos from your Portfolio gallery and stretches to fill your visitor's screen, although I have set a maximum width and height to enable transparent background and keep loading times reasonable. It replaces your Bio box. I also added a thin, white border around every image. If you want to make the border black, change borderColor: 'ffffff' to '000000'. On your homepage you can see 'Your Bio'. Click 'edit'. Below is the code for you to copy into the blank field. You will need to change the values marked in red. Album ID can be found in your gallery URL, right after your gallery name, in our case brisbanepropertyphotos.com.au/Real-Estate/Portfolio/6125989_gJgkf. Find that bit in your Portfolio gallery and insert it. Splash image is the image that appears quickly on screen when real slideshow images are loading up. <html> <center> Here you can write a bit about your webpage. Try to include relevant keywords like where you are located and what you do. <script> var ssConfig = { AlbumID: 'XXXXXX', newWindow: 'false', transparent: 'true', splash: 'http://yourdomain.com.au/your-splash-image.jpg', showLogo: 'false', borderThickness: '4', borderColor: 'ffffff', clickToImage: 'true', maxW: "1000", maxH: "700", showThumbs: 'false', showButtons: 'false', randomize: 'true', randomStart: 'true', setSpeed: 'fast', crossFadeSpeed: '250' }; InsertStretchySlideshow(ssConfig); </script> </center> </html> Remember to hit save. But wait! There's more...
Slideshow 2/3 You will now need to navigate yourself back to Tools > 'Go to Control Panel' and this time click on 'Advanced site-wide customization'. There's lots of blank fields on that page, and from now on you must always find the correct field to put code in. Pay attention to this, okay? This time we use the box titled CSS. Got the right one? Good. Put this in: #bioBox .photo { display: none; #homepage {width: auto !important; margin-left: 15px !important; margin-right: 15px !important;} #bioBox {width: auto !important;}
Slideshow 3/3 On the same page is a box titled Top Javascript. Go copy the stretchy slideshow code from this page and paste it in Top Javasript. Hit submit at the bottom of the page and hope for the best. If gods don't hate you, you should now have a working slideshow! If they do, you still have hope. Slideshow Wiki will help you understand what might have possibly went wrong and also gives you heaps of information about the customization possibilities of the slideshow. DGrin's Stretchy Slideshow thread will help you customize the stretchy part and also gives you troubleshooting tips.
Custom header or banner For your customized banner, it's easiest to use Smugmug's Easy Customizer. You can find it in your Control Panel. Open 'Header', which will give you a few options. First of all, deselect 'Show SmugMug Header'. If you are totally incapable of operating graphic software like Photoshop or Draw, you're better off choosing 'Text' as your custom banner. If you think you can handle creating a GIF image as your banner, or you have one already, you can use that and upload it from your computer. Why GIF? Because GIF can handle transparency, which means that your company names looks like it's a part of the design instead of a weird-colored square at the top. So, remember to leave your background transparent. Try to keep the banner from taking too much space vertically. It leaves more room for your automatically stretching slideshow and your visitors don't have to scroll down to see your images. Also, if you already have some other marketing material, like business cards or flyers, try to maintain the same design on your banner so people know they're dealing with the same company. Branding is important. They get confused if they can't find the same elements that were in the flyer you handed them. The banner is the easiest way to show that essential connection. Play around with this until you are truly happy with how it looks. When you're finished, open 'Footer' and change your Smugmug footer to a tiny one. The tiny picture that sits next to your URL is called a favicon and by default looks like Smugmug's smiley. Ours is a camera. To get your own, you can upload a new GIF or PNG in "Browser" tab - transparent background is important again! Remember to save your settings.![<center>Pricing</center>
It's starting to look pretty good, eh? Let's create some more pages so we can build a navigation bar for you.
Add some more photos, again under category Real Estate and to a gallery called Pricing, or Services, or whatever floats your boat. You will need one image for each service you are providing, preferably demonstrating said service. Once they have uploaded, go to your Pricing gallery and choose 'Tools' > 'Customize Gallery'. Under 'Look & Feel' you can find 'Gallery Style'. Set that to 'Journal (old)'.
You can also roll down a bit more and disable buying photos - this is just a distraction that might make your visitors think that's how they're supposed to purchase your services! Save those settings.
Now that your gallery is in Journal mode, edit the <i>caption</i> of each photo. Here you can write down your prices, services and such. You can use html code to make text bold or align it to center. Google is your friend in finding those basic commands.
One problem of using journal style is that you'll end up writing really long captions on your picture, which then flash up in yellow when you hover your mouse over an image. To turn hover captions off, put this in your Top Javascript:
<i>function delHover() {
imgTags = document.getElementsByTagName("img");
for (i=0; i<imgTags.length; i++) {
imgTags[i].title = "";
imgTags[i].alt = "";
}
}
</i>
And this in your Body Tag:
<i><body onload="delHover();">
</i>](https://photos.smugmug.com/Real-Estate/Articles-and-Tutorials/Smugmug-Website-Customization/i-hjn4tjg/0/b7231193/L/pricing-L.png)
Pricing It's starting to look pretty good, eh? Let's create some more pages so we can build a navigation bar for you. Add some more photos, again under category Real Estate and to a gallery called Pricing, or Services, or whatever floats your boat. You will need one image for each service you are providing, preferably demonstrating said service. Once they have uploaded, go to your Pricing gallery and choose 'Tools' > 'Customize Gallery'. Under 'Look & Feel' you can find 'Gallery Style'. Set that to 'Journal (old)'. You can also roll down a bit more and disable buying photos - this is just a distraction that might make your visitors think that's how they're supposed to purchase your services! Save those settings. Now that your gallery is in Journal mode, edit the caption of each photo. Here you can write down your prices, services and such. You can use html code to make text bold or align it to center. Google is your friend in finding those basic commands. One problem of using journal style is that you'll end up writing really long captions on your picture, which then flash up in yellow when you hover your mouse over an image. To turn hover captions off, put this in your Top Javascript: function delHover() { imgTags = document.getElementsByTagName("img"); for (i=0; i<imgTags.length; i++) { imgTags[i].title = ""; imgTags[i].alt = ""; } } And this in your Body Tag: <body onload="delHover();">
Contact Us Follow the instructions of creating the Pricing page, but this time name the gallery Contact Us or About Us. One picture is enough. Here you can write as much or as little about your company as you want, but make sure your contact details are the main focus on the page. You're halfway now! Jump to page 2.
Downloads It's handy to have a category for your clients to download their photos from. If you're really worried about someone stealing your photos, you might feel hesitant to do this. In real estate, you get paid for taking the photos, not for selling them, so for us it's more important to make the photos easily available. If you're up for the extra hassle, you can always lock down your galleries with passwords and give them only to your clients. In short, keep adding galleries here when you shoot jobs for your clients.
Navigation Bar The last big modification is building a navigation bar to help your visitors find their way around your site. Go back to the Easy Customizer and open 'Header'. Select 'Add Navigation Bar' and use the builder. Add links in order of importance. Do you still remember the custom domain I prompted you to purchase? To keep people on your custom domain, those URLs need to point to that domain. So, if your Smugmug gallery link is something like mynick.smugmug.com/Real-Estate/Portfolio/4483_45jkj, you need to change that to customdomain.com/Real-Estate/Portfolio/4483_454jkj. Look at the image, if this is unclear. If you use your Smugmug URL in these links, your visitors will be surprised when they use the navigation bar and they jump to a completely different address! These links will not work until we hook your custom domain to your Smugmug account. That's coming next, don't worry.
Custom domain If you've been delaying purchasing your custom domain this far, it's time for you to click your way to GoDaddy and Smugmug's partnered domain service. I recommend purchasing a .com address, since .mob or .me or the likes just look a bit suspicious. Specifically DO NOT buy any domain of which the .com of is already taken. I can promise you 90% of your visitors will repeatedly visit the .com site when they're trying to come back to you and will get frustrated and go somewhere else. If you want to play it safe, you can purchase a few of the biggest ones - .com, .net, .org - and forward all of them to your site. After you've got your awesome custom domain purchased via the site in the picture (that is, not GoDaddy's official website), all you have to do is go to your Control Panel, select 'Settings' tab, locate 'Domain' and change that to your new custom domain. Hooking it up might take a while, so don't freak out if it's not working immediately. After customdomain.com takes you to your Smugmug site, all your navigation bar links should be working too. If they're not, start scrutinizing for typos in the navbar builder. If you did not follow my instructions and went with another domain provider or used GoDaddy's official website for this purchase, you can read the Smugmug wiki page about custom domains to get your domain working.
CSS Hooray for you! All the heavy lifting is done! All that is left is polishing your website to look truly professional. Open the 'Advanced Site-wide customization' from Control Panel. Let's start from the top and see what should be in your CSS box. For your slideshow I asked you to put in this: #bioBox .photo { display: none; #homepage {width: auto !important; margin-left: 15px !important; margin-right: 15px !important;} #bioBox {width: auto !important;} Now, let's add a few things. This site is so simple to navigate, your visitors don't need breadcrumbs (the green text on the top left corner which says something like myphotos > Real Estate > Portfolio on your Portfolio page), plus it's ugly as. To make sure you still have your toolbar after you hide the breadcrumbs, we'll only hide them for visitors! You'll still see them when you're logged in. Copy this in there: #breadcrumb {display: none;} .loggedIn #breadcrumb {display: block;} To hide your gallery titles while viewing the galleries (again, ugly and distracting) put this in: #galleriesBox #galleryTitle {display: none;} If you open your Pricing or Contact Us page, you can see that there's a fairly annoying text at the top announcing that there is only 1 page in this gallery. Who needs that? Let's hide it. .gallery_XXXXXX .pageNav, .gallery_XXXXXX .pageNav { visibility:hidden; } Here, you need to replace the X's with an AlbumID (familiar from building your slideshow) for each gallery you want to hide that information in. Don't hide it if there's more than one page of photos, because it makes navigating between those pages difficult. I have also hid the keywords that you can see under your photos. That way you can associate lots of appropriate keywords with your photos without making your portfolio look cluttered: #photoKeywords {display:none}![<center>Top JavaScript</center>
We're going to make your URLs a bit neater now. If you need to give someone the address of your contact page, you'd rather it be customdomain.com/contactus, right? VanityURLs to the rescue! It will not actually change the domain of the page, but it will land your visitors on the right page using a nice and pretty address.
Here's the script:<i>
var vanityTable =
{
"pricing" : "http://brisbanepropertyphotos.com.au/Real-Estate/Pricing/9960213_GPQix",
"contactus" : "http://brisbanepropertyphotos.com.au/Real-Estate/Contact-Us/9964121_mX5He"
};
function CheckRedirects()
{
if (YD.hasClass(document.body, 'homepage')) // only run this code on the home page
{
// get the path from the current URL,
// convert it to lowercase and remove the leading slash
var path = window.location.pathname.toLowerCase().substr(1);
var newURL = vanityTable[path]; // look it up in our table
// if we found it in the table && newURL is different than where we are
if (newURL && (newURL != window.location))
{
window.location.replace(newURL); // go to the new URL
}
}
}</i>
You of course have change my URLs to your own. You can add more VanityURLs if you like, just make sure you follow that exact formatting. There is a catch, though - you can't have Smugmug categories with the same name as your VanityURLs. That is, you can't have customdomain.com/portfolio, because portfolio is a default category in Smugmug. Remember to add a comma after every URL (except the last).
You also need to locate "Custom Header" on the same page (NOT in the Easy Customizer) and add this piece of code:<i>
<script type="text/javascript" language="javascript">
CheckRedirects();
</script>
</i>
For more information and troubleshooting, please visit <a href="http://www.dgrin.com/showthread.php?t=86145">DGrin's thread about VanityURLs</a>.
There should also be a heap of code about your stretchy slideshow. Leave it.](https://photos.smugmug.com/Real-Estate/Articles-and-Tutorials/Smugmug-Website-Customization/i-PNfzb2w/0/e56ef78b/M/topjava-M.png)
Top JavaScript We're going to make your URLs a bit neater now. If you need to give someone the address of your contact page, you'd rather it be customdomain.com/contactus, right? VanityURLs to the rescue! It will not actually change the domain of the page, but it will land your visitors on the right page using a nice and pretty address. Here's the script: var vanityTable = { "pricing" : "http://brisbanepropertyphotos.com.au/Real-Estate/Pricing/9960213_GPQix", "contactus" : "http://brisbanepropertyphotos.com.au/Real-Estate/Contact-Us/9964121_mX5He" }; function CheckRedirects() { if (YD.hasClass(document.body, 'homepage')) // only run this code on the home page { // get the path from the current URL, // convert it to lowercase and remove the leading slash var path = window.location.pathname.toLowerCase().substr(1); var newURL = vanityTable[path]; // look it up in our table // if we found it in the table && newURL is different than where we are if (newURL && (newURL != window.location)) { window.location.replace(newURL); // go to the new URL } } } You of course have change my URLs to your own. You can add more VanityURLs if you like, just make sure you follow that exact formatting. There is a catch, though - you can't have Smugmug categories with the same name as your VanityURLs. That is, you can't have customdomain.com/portfolio, because portfolio is a default category in Smugmug. Remember to add a comma after every URL (except the last). You also need to locate "Custom Header" on the same page (NOT in the Easy Customizer) and add this piece of code: <script type="text/javascript" language="javascript"> CheckRedirects(); </script> For more information and troubleshooting, please visit DGrin's thread about VanityURLs. There should also be a heap of code about your stretchy slideshow. Leave it.
Analytics Do you use Google Analytics? You want to know how many visitors you've had and how they got there, don't you? Google Analytics provides this information (and lots, lots more) for free. Sign up and create a new account for your Smugmug site. Analytics will ask you to put their tracking code in. Put it in the Custom Footer.![You are so close to finishing. Good work!
<center>Bottom JavaScript</center>
Another vanity trick: removing the words "gallery" and "galleries" from your categories. On our site, this change is only visible on the Downloads page.<i>
function RemoveGalleryWord()
{
this.innerHTML = this.innerHTML.replace(/ Galleries$| Sub-Categories$/, "");
}
YE.onAvailable("subCatGalleryTitle", RemoveGalleryWord);
YE.onAvailable("galleryTitle", RemoveGalleryWord);</i>
This following piece of code is for the daring - it actually adds a "Download" button to your images for easy download! This only works in galleries where you haven't disabled buying your photos, that is, the shopping cart is still visible above the photos. We have hid the shopping cart in every gallery except the Galleries under Downloads.
<i>
// ------------------------------------------------------------------------
// Code to insert a download button
//
// Works for any gallery that has originals enabled
// And right-click protection off
// And gallery is in smugmug or smugmug small view
// ------------------------------------------------------------------------
function IsAnySmugmugView()
{
return(YD.hasClass(document.body, "smugmug") || YD.hasClass(document.body, "smugmug_small"));
}
function IsGalleryPage()
{
return(YD.hasClass(document.body, "galleryPage"));
}
onPhotoShow.subscribe(ProcessDownloadButton);
function ProcessDownloadButton()
{
// set onlyInGalleries to true if you only want a download button in gallery views
// set onlyInGalleries to false if you want a download button in other views too like (search, keywords, date, etc...)
var onlyInGalleries = false;
if (IsAnySmugmugView() && (IsGalleryPage() || !onlyInGalleries))
{
if (photoInfo[ImageID].albumOriginals && !photoInfo[ImageID]['protected'] && (photoInfo[ImageID].Format !== "MP4"))
{
var downloadParent = "cartButtonsWrapper";
if (!document.getElementById("cartButtonsWrapper"))
{
downloadParent = "altViews";
}
InsertDownloadButton(downloadParent);
}
else
{
// disable the button
var downloadButton = YAHOO.widget.Button.getButton("downloadButtonId");
if (downloadButton)
{
downloadButton.set("disabled", true);
}
}
}
}
function InsertDownloadButton(parentId)
{
// now add the download button
var parentDiv = document.getElementById(parentId);
var downloadButton = document.getElementById("downloadButtonId");
if (downloadButton)
{
// make sure it is enabled
YAHOO.widget.Button.getButton("downloadButtonId").set("disabled", false);
}
else if (parentDiv)
{
var downloadButtonInfo =
{
id: "downloadButtonId",
label: "Download Image...",
container: parentDiv,
type: "button",
className: "sm-button sm-button-small themesButton glyphButton",
onclick: { fn: InitiateDownloadImage }
};
var dButtonObj = new YAHOO.widget.Button(downloadButtonInfo);
}
}
function InitiateDownloadImage()
{
// construct the download URL
window.location = "/photos/" + ImageID + "_" + ImageKey + "-D.jpg";
}
</i>](https://photos.smugmug.com/Real-Estate/Articles-and-Tutorials/Smugmug-Website-Customization/i-4S23bft/0/d56d7ef5/M/bottom-M.png)
You are so close to finishing. Good work!
Bottom JavaScript Another vanity trick: removing the words "gallery" and "galleries" from your categories. On our site, this change is only visible on the Downloads page. function RemoveGalleryWord() { this.innerHTML = this.innerHTML.replace(/ Galleries$| Sub-Categories$/, ""); } YE.onAvailable("subCatGalleryTitle", RemoveGalleryWord); YE.onAvailable("galleryTitle", RemoveGalleryWord); This following piece of code is for the daring - it actually adds a "Download" button to your images for easy download! This only works in galleries where you haven't disabled buying your photos, that is, the shopping cart is still visible above the photos. We have hid the shopping cart in every gallery except the Galleries under Downloads. // ------------------------------------------------------------------------ // Code to insert a download button // // Works for any gallery that has originals enabled // And right-click protection off // And gallery is in smugmug or smugmug small view // ------------------------------------------------------------------------ function IsAnySmugmugView() { return(YD.hasClass(document.body, "smugmug") || YD.hasClass(document.body, "smugmug_small")); } function IsGalleryPage() { return(YD.hasClass(document.body, "galleryPage")); } onPhotoShow.subscribe(ProcessDownloadButton); function ProcessDownloadButton() { // set onlyInGalleries to true if you only want a download button in gallery views // set onlyInGalleries to false if you want a download button in other views too like (search, keywords, date, etc...) var onlyInGalleries = false; if (IsAnySmugmugView() && (IsGalleryPage() || !onlyInGalleries)) { if (photoInfo[ImageID].albumOriginals && !photoInfo[ImageID]['protected'] && (photoInfo[ImageID].Format !== "MP4")) { var downloadParent = "cartButtonsWrapper"; if (!document.getElementById("cartButtonsWrapper")) { downloadParent = "altViews"; } InsertDownloadButton(downloadParent); } else { // disable the button var downloadButton = YAHOO.widget.Button.getButton("downloadButtonId"); if (downloadButton) { downloadButton.set("disabled", true); } } } } function InsertDownloadButton(parentId) { // now add the download button var parentDiv = document.getElementById(parentId); var downloadButton = document.getElementById("downloadButtonId"); if (downloadButton) { // make sure it is enabled YAHOO.widget.Button.getButton("downloadButtonId").set("disabled", false); } else if (parentDiv) { var downloadButtonInfo = { id: "downloadButtonId", label: "Download Image...", container: parentDiv, type: "button", className: "sm-button sm-button-small themesButton glyphButton", onclick: { fn: InitiateDownloadImage } }; var dButtonObj = new YAHOO.widget.Button(downloadButtonInfo); } } function InitiateDownloadImage() { // construct the download URL window.location = "/photos/" + ImageID + "_" + ImageKey + "-D.jpg"; }
Bottom JavaScript 2/3 After you hid your breadcrumbs, your visitors lost some useful links. To move the button for easy sharing of your pictures to the cart line (again, shopping cart must be enabled!), use this: //------------------------------------------------------------------------------------ // Move share button to the cart line //------------------------------------------------------------------------------------- YE.onContentReady("shareButton", MoveToCartDiv); function MoveToCartDiv() { MoveObjToDiv(this, "cartButtonsWrapper"); } function MoveObjToDiv(sourceObj, destDiv) { var destDivObj = document.getElementById(destDiv); // get the object for the dest div if (sourceObj && destDivObj) { sourceObj.parentNode.removeChild(sourceObj); // remove object from it's current parent destDivObj.appendChild(sourceObj); // add it to the new parent } }![And one more. Just one, I promise! This code will make the images in selected galleries un-clickable. I don't want people on the pricing page to accidentally click on one of the images and get lost, so I removed clickability from the two journal-style pages. Again, replace X's with AlbumID.<i>
//-------------------------------------------------------------
// Clear links and thus clickability from photos in journal galleries
//-------------------------------------------------------------
YE.onDOMReady(ClearLinksFromMany);
function ClearLinksFromMany()
{
var listOfGalleries = [
"XXXXXXX", /* Pricing*/
"XXXXXXX", /* contact us*/
];
if (window.AlbumID)
{
for (var i in listOfGalleries)
{
if (window.AlbumID == listOfGalleries[i])
{
removeLinkFromImg();
break;
}
}
}
}
function removeLinkFromImg()
{
var oList = YD.getElementsByClassName("photo", "div");
for (var i=0; i < oList.length; i++)
{
var aTags = oList[i].getElementsByTagName("a");
for (var j=0; j < aTags.length; j++)
{
// get rid of the href on the <a> tag
aTags[j].removeAttribute("href");
// get rid of the alt and title tags on the <img> tag
aTags[j].firstChild.removeAttribute("alt");
aTags[j].firstChild.removeAttribute("title");
}
}
}</i>](https://photos.smugmug.com/Real-Estate/Articles-and-Tutorials/Smugmug-Website-Customization/i-v22mz3H/0/7b7cab68/M/bottom-M.png)
And one more. Just one, I promise! This code will make the images in selected galleries un-clickable. I don't want people on the pricing page to accidentally click on one of the images and get lost, so I removed clickability from the two journal-style pages. Again, replace X's with AlbumID. //------------------------------------------------------------- // Clear links and thus clickability from photos in journal galleries //------------------------------------------------------------- YE.onDOMReady(ClearLinksFromMany); function ClearLinksFromMany() { var listOfGalleries = [ "XXXXXXX", /* Pricing*/ "XXXXXXX", /* contact us*/ ]; if (window.AlbumID) { for (var i in listOfGalleries) { if (window.AlbumID == listOfGalleries[i]) { removeLinkFromImg(); break; } } } } function removeLinkFromImg() { var oList = YD.getElementsByClassName("photo", "div"); for (var i=0; i < oList.length; i++) { var aTags = oList[i].getElementsByTagName("a"); for (var j=0; j < aTags.length; j++) { // get rid of the href on the <a> tag aTags[j].removeAttribute("href"); // get rid of the alt and title tags on the <img> tag aTags[j].firstChild.removeAttribute("alt"); aTags[j].firstChild.removeAttribute("title"); } } }
Hooray! You did it! I promised it's going to look professional, and doesn't it? On the way you probably learned at least a little bit customizing your Smugmug site even further. For that there's is one link that is priceless: DGrin's Smugmug Customization Forum. The posters are so smart and helpful, just amazing people. If you use these step-by-step instructions, please leave a comment below and show me how it worked out for you. Also, if you find any errors in my tutorial, please email info@brisbanepropertyphotos.com.au or leave a comment. What now? Well, there is still heaps to do. Caption your photos, write down some descriptions, submit your site to Google or start a Facebook fan group. Have fun with your new website!