PDA

View Full Version : HTML-only page alternative for the lazy

stmind
Nov-30-2008, 12:53 AM
I've been working on a way to embed external video in my smugmug pages. To do this, you can follow the HTML-only page guide, which involves adding some CSS in your site-wide customization for every HTML-only page you create, to hide the photo nav stuff.

However, I'm lazy, and I don't want to have to visit the Site Customization page every time I create a new page on Smugmug. So I was using a <style> tag in the gallery description, however as "iamback" pointed out this tag is invalid within the <body>, and some browsers may ignore it.

So here's my current solution that allows me to continue my laziness.

In my custom CSS, I add the following:

.htmlonly .nophotos,
.htmlonly .pagenav,
.htmlonly .albumNav,
.htmlonly #slideshowButton,
.htmlonly #photos
{ display: none; } (note that I use all of these classes in addition to .nophotos because I typically DO have a regular image in the gallery to serve as a thumbnail. This I want to hide in the gallery view.)

Then in the gallery description, below the HTML you want to display (in my case, typically an embed tag), add the "htmlonly" class to the document body like so:

<scr1pt>YD.addClass(document.body, "htmlonly");</scr1pt>
(note, change the 1 to i. The forum strips this word out)

Doing it this way allows me to create a new HTML only page in one step, without doing anything in my site configuration. I've actually wrapped the above script in a shorter function call that also embeds the video, so it's easier to input. But I'll save that for an update on my video embedding.
jfriend
Nov-30-2008, 11:41 AM
I've been working on a way to embed external video in my smugmug pages. To do this, you can follow the HTML-only page guide, which involves adding some CSS in your site-wide customization for every HTML-only page you create, to hide the photo nav stuff.

However, I'm lazy, and I don't want to have to visit the Site Customization page every time I create a new page on Smugmug. So I was using a <style> tag in the gallery description, however as "iamback" pointed out this tag is invalid within the <body>, and some browsers may ignore it.

So here's my current solution that allows me to continue my laziness.

In my custom CSS, I add the following:

.htmlonly .nophotos,
.htmlonly .pagenav,
.htmlonly .albumNav,
.htmlonly #slideshowButton,
.htmlonly #photos
{ display: none; } (note that I use all of these classes in addition to .nophotos because I typically DO have a regular image in the gallery to serve as a thumbnail. This I want to hide in the gallery view.)

Then in the gallery description, below the HTML you want to display (in my case, typically an embed tag), add the "htmlonly" class to the document body like so:

<scr1pt>YD.addClass(document.body, "htmlonly");</scr1pt>
(note, change the 1 to i. The forum strips this word out)

Doing it this way allows me to create a new HTML only page in one step, without doing anything in my site configuration. I've actually wrapped the above script in a shorter function call that also embeds the video, so it's easier to input. But I'll save that for an update on my video embedding.

Very clever and nicely done!

I've done something similar where I add the following to a gallery description:

<div id="htmlonly"></div>

and then have a script that runs on all pages that just checks for the existence of that ID and then does stuff if it finds that ID in the page. Similar concept, slightly different implementation.
stmind
Nov-30-2008, 12:42 PM
Yeah, the YE.onAvailable() method could be useful for that.

The solution I'd really like to have is something I haven't had time to play with yet: The gallery keywords show up in the page's meta Keywords tag. So the best solution IMO would be to parse the keywords via JS and assign a body class if it finds an "htmlonly" keyword.

Of course, best of all would be if Smugmug just placed the gallery keywords in the body tag's class list, like it does with categories. Then we could use a pure-CSS approach.
jfriend
Nov-30-2008, 12:50 PM
Yeah, the YE.onAvailable() method could be useful for that.

The solution I'd really like to have is something I haven't had time to play with yet: The gallery keywords show up in the page's meta Keywords tag. So the best solution IMO would be to parse the keywords via JS and assign a body class if it finds an "htmlonly" keyword.

Of course, best of all would be if Smugmug just placed the gallery keywords in the body tag's class list, like it does with categories. Then we could use a pure-CSS approach.

Along these lines, I made what I thought was a cool product suggestion here (http://www.dgrin.com/showthread.php?t=111782&highlight=class+gallery) that would let you enter one or more CSS classnames in the customize gallery dialog that would then show up in the body tag for that gallery. That would make a pure-CSS approach trivial for this and many other things too. If you like the idea, you might chime in on that thread.
jfriend
Nov-30-2008, 01:47 PM
This all gave me an idea to combine the two thoughts we each had independently.

Add this code to your bottom javascript:


YE.onAvailable("addClassNames", ProcessClassNames);

function ProcessClassNames()
{
var classAttribute = this.getAttribute("classNames");
if (classAttribute)
{
var newClasses = classAttribute.split(",");
for (var i in newClasses)
{
YD.addClass(document.body, newClasses[i]);
}
}
}


Then in any given gallery, add this to the gallery description:

<html><div id="addClassNames" classNames="foo,bar"></div></html>

The result will be that the class names "foo" and "bar" will be added to the body tag. I guess it isn't really any better than what you were already doing (accomplishes the same thing). Just a different way of doing it.