smugblog: Web Tricks

Customizing over on Dgrin

Administrator — Mon, 14 Jul 2008 21:31:04 +0000

Want more web tricks? Head on over to Digital Grin - it’s our photography, support, and customizing forum. It’s easy to join, free, and you get amazing help there, from dedicated Smuggers and photography pros. Here’s the direct link to the customizing forum and here’s a great thread to start out with, for your customization needs:
If you’d like help in registering and posting on Dgrin, that’s right here.

Changing slideshow options

Administrator — Mon, 19 Sep 2005 17:47:15 +0000

Here is how to change the duration for the slideshow. In the body tag put this:

In the javascript section, put this:


function updateSS() {
     // look at the body tags classes, if it is the homepage then swap
     bodyClass = document.getElementsByTagName("body")[0].className;
     if (bodyClass.indexOf("slideshow") != -1) {
          slideDuration = 3;
          document.getElementById("duration").value = "3";
     }
}

Changing shopping cart action text

Administrator — Wed, 07 Sep 2005 02:22:51 +0000

We came up with our “this photo” and “multiple photos” after much thought - but we understand that everyone has their own idea of perfection. Here is how you could change what the cart action text says for the top nav (feel free to swap out albumNav_top with albumNav_bottom):


onload  = redoCart;
function redoCart() {
   bodyClass = document.getElementsByTagName("body")[0].className;
   if (bodyClass.indexOf("smugmug") != -1 || bodyClass.indexOf("journal") != -1 || bodyClass.indexOf("default") != -1 || bodyClass.indexOf("singleImage") != -1) {
      topCart = document.getElementById("albumNav_top").innerHTML;
      topCart = topCart.replace(’this photo’,'just this photo’);
      topCart = topCart.replace(’multiple photos’,'this photo and others’);
      document.getElementById("albumNav_top").innerHTML = topCart;
   }
}

Smugmug small needs some totally different tests since it uses different wording - but you should get the jist

Squaring up Bio and Journal Text

Administrator — Fri, 02 Sep 2005 20:34:11 +0000

Some of you don’t prefer the new wrapping of the text around the bio image; here is some code to get it to be squared up again:


#userBio {
     width: 550px;
     display: inline;
     float: left;
     position: relative;
}
.journal_entry .caption {
     width: 325px;
     display: inline;
     float: left;
     position: relative;
}

You may need to tweak the width of both to get them just right - and the journal code is a generic width, so it may not work for every single image on the page - you may want to switch to using the caption_id that is specifically assigned to each one.

Hidden captions and navigation

Administrator — Fri, 02 Sep 2005 15:42:53 +0000

So every gallery style on the site now has a caption above and below the photo; here is how to turn off the caption below and turn on the caption above:


#caption_top {
     display: block;
}
#caption_bottom {
     display: none;
}

Also, smugmug and smugmug small have navigation hidden at the bottom of the page as well - you just need to turn it on:


#smugmug_small #albumNav_bottom, #smugmug #albumNav_bottom {
	display: none;
}

Using HTML in your bio, caption or description

Administrator — Fri, 02 Sep 2005 15:29:23 +0000

So for a while now we have let you use HTML in some areas and not others, and even where you could put HTML up - we tweaked it for you because not everyone knows HTML. We would auto convert linebreaks to
tags and auto-link any website or email address we found - making your anchor tags pretty much useless.

Well, I got smart about it. All previous entries will work the same way. However, if you want to use HTML in your Bio, desctiption or caption, please wrap the code in tags. Doing this will tell us NOT to convert line breaks and not to auto link sites/emails.

Sample:



This is my bio

Swapping homepage boxes

Administrator — Thu, 01 Sep 2005 19:33:04 +0000

So let’s say you want friends and family down at the bottom of the page and you galleries up higher. This code will do it for you:


// look to swap after the page is loaded
onload = swapFF;
// the swap function
function swapFF() {
     // look at the body tags classes, if it is the homepage then swap
     bodyClass = document.getElementsByTagName("body")[0].className;
     if (bodyClass.indexOf("homepage") != -1) {
          swap = document.getElementById("ffBox").innerHTML;
          document.getElementById("ffBox").innerHTML = document.getElementById("galleriesBox").innerHTML;
          document.getElementById("galleriesBox").innerHTML = swap;
     }
}

Green borders

Administrator — Tue, 23 Aug 2005 18:39:52 +0000

To change the borders for the images; use this code in your style section:


.imgBorderOn {
     border-color: red;
}

If you want to change what the default border color is; use this:


.imgBorder {
     border-color: blue;
}

Changing the homepage link

Administrator — Tue, 23 Aug 2005 16:14:30 +0000

Some of you have figured out that you can change the smugmug logo in the top left to something that suits your site.

But did you know that with some javascript you can also change what the image is linked to:


onload = changeHomelink;
function changeHomelink () {
     document.getElementById('homelink').href = 'http://www.dgrin.com';
}

Styling individual pages

Administrator — Thu, 18 Aug 2005 16:22:02 +0000

With the release of the last of the gallery templates, I want to share with you some new functionality that you can use. You can now target your style to individual templates and/or specific galleries.

To make the green text red for only the journal pages on your site you could use:


.journal .title {
     color: red;
}

But remember, you don’t only have access to changing the title, you can change anything on the page that has a class or an ID, you can even target specific classes within IDs using the above method.

You can also target specific galleries now too (as well as images, keywords and dates pages) using this trick:


.gallery_417126 .title {
     color: red;
}

Now pay attention to the 417126 in the code above - that is the gallery number that I want to target, so you will have to change that to match the gallery number you want to target. You can also target images, keyword and date pages. The following example text that is in all caps are variables depending on what Image# you want, or the keywords you have searched for, or the dates you have sepcified; simply swap .gallery_GALLERY# in my previous example with one of them.

.image_IMAGE#
.keyword_KEYWORDREQUEST
.date_DATESTART-DATESTOP

We can even take all of this a step further and target a specific gallery style and gallery by using this code:


.journal.gallery_417126 .title {
     color: red;
}

As you can see, the new changes open up a lot of possibilites. I’d love to start seeing more examples of what is going on out there!