A Photostream for SmugMug

[lsubac]

2009-05-18 Edit: I've refreshed the code with a few new features like a "loading..." screen while the photos are being loaded for the first time, and a little bit better support for SmugMug themes other than the default. Download the code here (http://brianacraig.com/assets/photostream.zip).

I love SmugMug, but I’ll admit it, I’ve always been a bit jealous of my Flickr friends’ photostreams. It’s such an easy way to show people what’s new no matter where it gets categorized. I've put together a photostream that's powered by the latest photos RSS feed and some javascript. Here's what it looks like on my homepage.

http://brianacraig.com/blog/wp-content/uploads/2009/02/smugmug-photostream-scaled.png

Clicking on the Newer/Older links will walk through the photos in your latest photo RSS feed. Clicking on any photo will take you that photo.

If you want to see it in action, check out my SmugMug page.
http://brianandtessa.smugmug.com/

If you want more details on how to get one of these, I've put together step by step instructions here.
http://brianacraig.com/blog/2009/02/05/a-smugmug-photostream/

It's my hope that one day the powers that be at SmugMug get enough feedback about this that they're compelled to take this idea and incorporate it into the possible widgets that can be shown on the homepage.

If you have any questions feel free to post em here or e-mail me.

[richW]

Welcome to dgrin....:wave

Thanks Brian :thumb

[jeale]

Hi Brain, I followed your instructions, but for some reason only get the Newer/Older controls, no photos.
Any help would be greatly appreciated
Thankyou

[lsubac]

Hi Brain, I followed your instructions, but for some reason only get the Newer/Older controls, no photos.
Any help would be greatly appreciated
Thankyou

Glenn,

I took a look at your homepage, and it looks like you've got some customization already done. If you weren't seeing any JavaScript errors, my best guess is that one of the styles that I'm using is being hidden by the css in your theme. If you have a screenshot of what it looked like, that would be helpful... or if you could leave it up there with just the Newer/Older buttons long enough for me to take a look at it, I'd love to help out.

Thanks,
Brian

[jeale]

Thanks Brian

I've inserted the CSS & js in my site for you to have a look at.

Many thanks

Glenn

[lsubac]

Glenn,

We just need to remove the < and > characters around your username. So this line

var SmugMugNickname = '<jeagle>';

needs to look like this

var SmugMugNickname = 'jeagle';

Let me know if this helps!
Brian

[jeale]

Thanks for the quick responce Brian

The photos are loading fine, but it is also picking up the photos in hidden galleries. Is there a way I can stop it loading the hidden gallery photos?

Thanks once again
Glenn

[lsubac]

Glenn,

I'm not sure I know the answer to that one. I'm not completely up to date on my SmugMug RSS feeds. Do you know if SmugMug provides an RSS feed of the latest photos that excludes any hidden galleries? If so, then it's easy.

Brian

[jeale]

Brian you've helped heaps.
I'll post a question relating to the RSS feeds and see what comes back.
I'll keep you up to date when I get a responce.

Cheers
Glenn

[lsubac]

Glenn,

Have you checked it when you're not signed in to SmugMug? It might be that since you're logged in, the page that's generating your feed is recognizing that and showing you all of the images, not just the public ones. I'd be interested to know what happens if you sign out, and then reload your homepage.

By the way, you've got some stellar photos. I really like some of the structure shots.

Brian

[jeale]

Brian, you're a legend
When I log out it doesn't show the hidden galleries. A bit of tweaking and it will be great. Once again, thank you.
Thanks for the encouraging words about my photos.

Cheers
Glenn

[xmh]

Hi,

Thanks for this.

[caroline]

Hi Brian,
Before I go delving back into my code and trying to remember what each bit does, can you tell me how this differs from my 'recent' photos on my site please ? Of course yours looks much nicer :-)

Many thanks
Caroline - technically challenged

[jeale]

Hi Brian
Any thoughts on why my photostream won't display correctly in IE6.
Firefox, IE7 and Safari are fine. I've taken it down from my site until I get it sorted out.
Still love it though.

Cheers
Glenn

[wezee]

If you have any questions feel free to post em here or e-mail me.

Hi Brian,

I use your script here http://weezee.smugmug.com/
with Smugmug Gradient Theme. I can set the 100px size for the photos, but how can I set the space value between the 6 photos?

Any Idea?

Thanx for your help

[lsubac]

Hi Brian
Any thoughts on why my photostream won't display correctly in IE6.
Firefox, IE7 and Safari are fine. I've taken it down from my site until I get it sorted out.
Still love it though.


Glenn,

Heh.... I've never checked it in IE6. That said, I just took a look at my site and it looks like it's displaying reasonably well with the default SumgMug theme... so I'm going to guess that it's something in the CSS of your theme that's giving IE6 fits. Can you describe what "won't display correctly" means?

Thanks,
Brian

[jeale]

Hi Brian
In IE6 the photo sizes are all blown out. I have them set to 80px with the no. of photos in the js set to 5.
I will load it back on to my site so that you can check it out live. Give me about an hour and it will be done.

Thanking you
Glenn

[lsubac]

Hi Brian
In IE6 the photo sizes are all blown out. I have them set to 80px with the no. of photos in the js set to 5.
I will load it back on to my site so that you can check it out live. Give me about an hour and it will be done.


Glenn,

I think the problem with IE6 is that it doesn't honor the max-width CSS setting for the size of the image. Try adding this to your custom CSS. The only caveat here is that if you have any thumbnails that are less than 80px wide, this will scale them up to be 80px wide.

#MyPhotoStream .photo img { width: 80px; }


Brian

[lsubac]

Hi Brian,

I can set the 100px size for the photos, but how can I set the space value between the 6 photos?


Wezee,

You should be able to set the spacing between the photos by adjusting the value of the margin-right property in the custom CSS. If you want less space, change the 31px to something smaller, if you want more space change it to something larger.

#MyPhotostream .photo { margin-right: 31px; }

Does this answer your question?

Thanks!
Brian

[lsubac]

Hi Brian,
Before I go delving back into my code and trying to remember what each bit does, can you tell me how this differs from my 'recent' photos on my site please ? Of course yours looks much nicer :-)


Caroline,

I took a quick look at your site, but I am by no means an expert on how your 'recent' photos works. The biggest difference looked to me like your recent photos were treated like a gallery, and this photostream would only show on the homepage. Once you click on a photo in the photostream, you would be taken to the gallery that that photo lives in... not to the gallery of recent photos. Does that make sense?

Thanks,
Brian

[jeale]

Once again, thank you Brian
Changed the max-width and tweaked a few dimensions and it looks fine.
In IE6, if I change the margins to larger than what they currently are, it forces the 5th image onto a second line and overlaps the 1st photo.
I'll keep playing around with it and see how it goes.

Cheers
Glenn

[wezee]

#MyPhotostream .photo { margin-right: 31px; }


Thanx a lot Brian for your script it works perfectly now

Laurent (aka Weezee)

[Randyp1234]

Brian,

Just wanted to say thinks for posting this. Between your post and the troubleshooting with Glenn adding your Photostream worked perfectly. :clap :clap :clap

Thanks again,

Randy
http://www.randy-kim.com

Edit - I do have a question. When you click the newer and older button it only advances by one picture. Is there any way to get it to move by 4 so it will refresh the entire strip?

[lsubac]

Edit - I do have a question. When you click the newer and older button it only advances by one picture. Is there any way to get it to move by 4 so it will refresh the entire strip?

Randy,

Hmmm... no, I don't think there's an easy way to do this right now. I do think it's a good idea... so when I have a few minutes, I'll see if I can add something that will do this.

Brian

[caroline]

Caroline,

I took a quick look at your site, but I am by no means an expert on how your 'recent' photos works. The biggest difference looked to me like your recent photos were treated like a gallery, and this photostream would only show on the homepage. Once you click on a photo in the photostream, you would be taken to the gallery that that photo lives in... not to the gallery of recent photos. Does that make sense?

Thanks,
Brian

Thanks Brian, yes that makes sense - sorry I missed your reply.

Caroline

[Vadaar]

Brian (or anyone else for that matter) -

Is there a way to adjust the size of the "box" that the photostream sits in? On my site: http://perryphotos.smugmug.com/ (http://perryphotos.smugmug.com/) the container doesn't seem to be properly sized using the "carbonite" theme that I've got going. Take a look at it vs. the Gallery Categories box immediately below to see what I'm talking about.

Thanks!

-Jon

[edit - nevermind, I got it. You just add #MyPhotostream {height: 150px; } or whatever spacing you'd like in the CSS

[msinc]

Brian,

Edit - I do have a question. When you click the newer and older button it only advances by one picture. Is there any way to get it to move by 4 so it will refresh the entire strip?
In the javascript, replace

$("#MoveRight").click(function(event) {
MoveRight();
event.preventDefault();
});

with

$("#MoveRight").click(function(event) {
MoveRight();
MoveRight();
MoveRight();
MoveRight();
event.preventDefault();
});

do the same for MoveLeft - seems to work ok for me.

PS - thanks for the code Brian.

[Randyp1234]

In the javascript, replace

$("#MoveRight").click(function(event) {
MoveRight();
event.preventDefault();
});

with

$("#MoveRight").click(function(event) {
MoveRight();
MoveRight();
MoveRight();
MoveRight();
event.preventDefault();
});

do the same for MoveLeft - seems to work ok for me.

PS - thanks for the code Brian.

Thanks!! I'll give it a try.

[bakahage]

Great work on this, but wanted to know if I can get this to work for latest albums as opposed to just photos? Tried changing the following and am getting the album titles, but not any album pictures.

jQuery.getFeed({
url: '/hack/feed.mg?Type=nickname&Data=' + SmugMugNickname + '&format=atom10',

Can this work? If so, what else do I need to change?

[rhermans]

Just started the move from flickr to smugmug.

One of the things I have a complete mixed feeling about is the photostream.
Liked it because friends could see your last uploaded images right away when browsing to your site. Disliked it because images taken in the past showed up on top.

So your code fixes both issues.

Changing the feed to
/hack/feed.mg?Type=usertimeline&NickName=**NickName**&StartDate=2009-01-01&StopDate=2009-12-31&SortDirection=dsc&format=atom10

wil show the most recent pictures (instead of uploads).

edit2, just noticed that the images in the photostream redirect to the category where they reside.
So added a few lines so that the link goes to the photostream instead.


for (var i=MyIndex; i<MyMax; i++) {
var item = MyFeed.items[i];

var oldLink = item.link;
var startPos = oldLink.indexOf('#');
var newLink = 'http://NICKNAME.smugmug.com/date/2009-01-01/2009-12-31' + oldLink.substring(startPos);


$("#MyPhotostream").append('<div class="photo"><a href="' + newLink + '"><img border="0" alt="' + item.title + '" title="' + item.title + '" src="' + item.id + '" class="imgBorder" /></a></div>');


Couldn't mess this code up without you, thanks.

Ronny

[AirThom]

Great work on this, but wanted to know if I can get this to work for latest albums as opposed to just photos? Tried changing the following and am getting the album titles, but not any album pictures.

jQuery.getFeed({
url: '/hack/feed.mg?Type=nickname&Data=' + SmugMugNickname + '&format=atom10',

Can this work? If so, what else do I need to change?

I'm interested in doing Galleries instead of photos as well, thanks for taking the leap to test it out.... I'm following along here hoping you get a solution that will help me as well.

[rhermans]

I'm interested in doing Galleries instead of photos as well, thanks for taking the leap to test it out.... I'm following along here hoping you get a solution that will help me as well.

the stream is ok,
so replace the
jQuery.getFeed({
url: '/hack/feed.mg?Type=nicknameRecentPhotos&Data=' + SmugMugNickname + '&format=atom03',
success: function(feed)
{
MyFeed = feed;
RefreshPhotoStream();
}
});
by
jQuery.getFeed({url: '/hack/feed.mg?Type=nickname&Data=***YOUR*NICKNAME***&format=atom10', success: function(feed) {
MyFeed = feed;
RefreshPhotoStream();
}
});
(replace ***YOUR*NICKNAME***with your nickname.

Then the stream doesn't contain a direct link to the image of a gallery so we have to get that.
In the id there is the gallery/[part1=AlbumId]_[part2=AlbumKey]
so we have to use this to build a link to an image of the album

A link to a random image from the gallery looks somethink like this.
/photos/random.mg?Size=Tiny&AlbumId=[part1]&AlbumKey=[part2]

so added next code in the function RefreshPhotoStream() after var item=MyFeed.items[i];

var albumStart = item.link.indexOf('gallery/');
var albumLink = '/photos/random.mg?Size=Tiny&AlbumID=' +
item.link.substr(albumStart).replace('_','&AlbumKey=').replace('gallery/','');

$("#MyPhotostream").append('<div class="photo"><a href="' + item.id + '"><img border="0" alt="' + item.title + '" title="' + item.title + '" src="' + albumLink + '" class="imgBorder" /></a></div>');

and this should give you the view of your last updated galleries.

Enjoy

Ronny

[edit] I have it implemented on my home page
http://rhermans.smugmug.com with some changes (like the posibility to change between images last taken, and the gallery last updated), the customisations are (rather poorly) described in my 'about me'/'customisations'

[AirThom]

Ronny, Thanks for getting me started on this. I'm afraid my current customizations are keeping the code as listed from working.

I'm using the Landing Page/Galleries Page hack to make my homepage act like two different pages (I followed this tutorial: http://dgrin.smugmug.com/gallery/2160039 )

So my code to make boxes appear on my homepage/galleries page is a little different:
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox,
.homepage #datesBox,
.homepage #keywordsBox {
display: none;
}

.galleries #bioBox {
display: none;
}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox,
.galleries #datesBox,
.galleries #keywordsBox {
display: block;
}


I'm currently studying Brian's original code with Ronny's edits trying to figure what I need to change to make the box appear.

[rhermans]

@AirThom,

if you add the last bold line below behind the (document).ready(func... you can change the galleries on or off.

I don't use a split homepage (yet didn't know that it was possible) but implemented it on my pages, you can see the difference there.

// *********************************
// *** End Customization ***
// *********************************

var MyIndex = 0;
var MyFeed;
$(document).ready(function() {

if(location.href.indexOf('galleries')>2) return;

[lsubac]

I'm currently studying Brian's original code with Ronny's edits trying to figure what I need to change to make the box appear.

AriThom,

Is this the page that you're trying to make it work on?

http://photos.thomasflock.com/galleries

Can you send me a screenshot of what it's doing, and I'll see if I can help you out?

Brian

[albumflip]

This is what I've been wanting and I will try it later today. I'd love to see this turned into a Flash script though to make it look a little smoother with some fade transitions.

It would also be really cool to have each thumbnail fade on load instead of just popping up. I know that can be done with javascript but i'm not sure how. Researching it now.

Thanks,
Jeff

[lsubac]

This is what I've been wanting and I will try it later today. I'd love to see this turned into a Flash script though to make it look a little smoother with some fade transitions.

It would also be really cool to have each thumbnail fade on load instead of just popping up. I know that can be done with javascript but i'm not sure how. Researching it now.

Thanks,
Jeff

Jeff,

I agree that some fade in / fade out animations would be nice. I'll look into in when I have some more time. If you're going to do some research on it jQuery's fadeIn() function is where I would start.

As far as porting it to Flash goes, someone else is going to have to carry that torch. I don't have much experience with Flash.

Brian

[AirThom]

AriThom,

Is this the page that you're trying to make it work on?

http://photos.thomasflock.com/galleries

Can you send me a screenshot of what it's doing, and I'll see if I can help you out?

Brian

Ok, so a little update as I had left the top two lines of your javascript out initially. I can make it appear, kinda. I put those two lines in and it does the Gallery Display, but it does it on both pages (would like to limit it to only showing on "Galleries"). Also when it's on the box under it does not stretch to encompass the contents. I can send you the contents of my CSS, Top Header, and Bottom Javascript boxes if you like. Thanks!

[AirThom]

@AirThom,

if you add the last bold line below behind the (document).ready(func... you can change the galleries on or off.

I don't use a split homepage (yet didn't know that it was possible) but implemented it on my pages, you can see the difference there.

// *********************************
// *** End Customization ***
// *********************************

var MyIndex = 0;
var MyFeed;
$(document).ready(function() {

if(location.href.indexOf('galleries')>2) return;

So on your http://rhermans.smugmug.com/galleries page, how are you making the photostream not show? I basically want the opposite... on the main landing page, no photostream... on the galleries page, yes photostream.

[AirThom]

@AirThom,

if you add the last bold line below behind the (document).ready(func... you can change the galleries on or off.

I don't use a split homepage (yet didn't know that it was possible) but implemented it on my pages, you can see the difference there.

// *********************************
// *** End Customization ***
// *********************************

var MyIndex = 0;
var MyFeed;
$(document).ready(function() {

if(location.href.indexOf('galleries')>2) return;

I figured out how to reverse your logic to only show the galleries on the Galleries page... now I'm having an issue with the box not drawing under the album links.

[AirThom]

My code as I currently am running:

CSS
/*** EDIT THIS TO CONTROL THE SPACING BETWEEN PHOTOS ***/
#MyPhotostream .photo { margin-right: 20px; }
#MyPhotostream .photo { float: left; clear: none; width: 100px; height: 150px; margin-bottom: 7px; }
#MyPhotostream .photo img { max-width: 150px; }
#PhotostreamBox { display: none; }

JS
******** src="http://smugmug.brianacraig.com/js/jquery-1.2.6.min.js" type="text/javascript"></********
******** src="http://smugmug.brianacraig.com/js/jquery.jfeed.pack.js" type="text/javascript"></********
******** type="text/javascript" language="javascript">
// ################################################## ##################################
// # SmugMug Photostream
// #
// # Author: Brian Craig (brian@brianandtessa.com)
// # License: Creative Commons Attribution 3.0 United States License
// #
// # Note: Please use this any way you see fit.
// # If you do end up finding it useful, I'd love to get an e-mail from you.
// ################################################## ##################################


// *********************************
// *** Customize these variables ***
// *********************************

var SmugMugNickname = 'thethomasfamily';
var PhotosToShow = 12;

// *********************************
// *** End Customization ***
// *********************************

var MyIndex = 0;
var MyFeed;
$(document).ready(function() {
if(!(location.href.indexOf('galleries')>2)) return;
if ($("#homepageBoxes").length == 1) {
var el = $('<div id="PhotostreamBox" class="box first-of-type"> \
<div class="boxTop"> \
<div class="boxNote note nav"> \
<a href="#" id="MoveLeft" class="nav">&lt;&lt; Newer</a> \
<span class="helpPipe">|</span> \
<a href="#" id="MoveRight" class="nav">Older &gt;&gt;</a> \
</div> \
<h3 id="featuredTitle" class="title notopmargin">Latest Galleries Updated</h3> \
<div class="spacer"></div> \
</div> \
<div id="MyPhotostream" class="boxBottom"></div> \
<div class="spacer"></div> \
</div>');

el.prependTo("#homepageBoxes");

$("#MoveRight").click(function(event) {
MoveRight();MoveRight();MoveRight();MoveRight();Mo veRight();MoveRight();MoveRight();MoveRight();Move Right();MoveRight();MoveRight();MoveRight();
event.preventDefault();
});

$("#MoveLeft").click(function(event) {
MoveLeft();MoveLeft();MoveLeft();MoveLeft();MoveLe ft();MoveLeft();MoveLeft();MoveLeft();MoveLeft();M oveLeft();MoveLeft();MoveLeft();
event.preventDefault();
});

jQuery.getFeed({
url: '/hack/feed.mg?Type=nickname&Data=thethomasfamily&format=atom10', success: function(feed) {
MyFeed = feed;
RefreshPhotoStream();
}
});

// Move the #PhotostreaBox before the featuredBox.
$("#PhotostreamBox").show();
$("#featuredBox").removeClass("first-of-type");
}
});

function RefreshPhotoStream() {
$("#MyPhotostream").empty();
var MyMax = MyIndex + PhotosToShow;
if (MyFeed.items.length < MyMax) {
MyMax = MyFeed.items.length;
MyIndex = MyFeed.items.length - PhotosToShow;
}
for (var i=MyIndex; i<MyMax; i++) {
var item = MyFeed.items[i];
var albumStart = item.link.indexOf('gallery/');
var albumLink = '/photos/random.mg?Size=Tiny&AlbumID=' +
item.link.substr(albumStart).replace('_','&AlbumKey=').replace('gallery/','');
$("#MyPhotostream").append('<div class="photo"><a href="' + item.id + '"><img border="0" alt="' + item.title + '" title="' + item.title + '" src="' + albumLink + '" class="imgBorder" /></a>' +
'<br /><a href="' + item.id + '" class="nav">'+item.title+'</a></div>');


}
}

function MoveLeft() {
if (MyIndex > 0) {
MyIndex--;
RefreshPhotoStream();
}
}

function MoveRight() {
if (MyIndex < MyFeed.items.length) {
MyIndex++;
RefreshPhotoStream();
}
}

</********

[AirThom]

I figured out how to reverse your logic to only show the galleries on the Galleries page... now I'm having an issue with the box not drawing under the album links.

It functions in the "Fresh Air" theme, but I can't find any other theme it functions in. I guess I need to figure out how they other themes are drawing boxes and adjust accordingly?

[CounterfeitPhotographer]

This works great, thanks Brian.

Looks like I should've used a shorter name

Rich

[AirThom]

I figured it out!!! :ivar

I added
#PhotostreamBox .boxBottom { height: 300px; }

and that made the box draw out under my album links.

:bow Thank you very much to Brian (lsubac) and Ronny (rhermans)!! :barb

[sadcaper]

Any way to get the most recent videos as well? I tried duplicating the code, but instead replacing:

jQuery.getFeed({
url: '/hack/feed.mg?Type=nicknameRecentPhotos&Data=' + SmugMugNickname + '&format=atom03',
...

with

jQuery.getFeed({
url: '/hack/feed.mg?Type=nicknameRecentVideos&Data=' + SmugMugNickname + '&format=atom03',
...

I can get another box to display, but it never loads the videos. It gets stuck on 'Loading...' and never displays the actual videos.

Any ideas?

[lsubac]

Any way to get the most recent videos as well?


Sadcaper,

I haven't tried this, so I have no idea if it will work or not, but when I look at the link at the bottom of my smugmug homepage to all of the different feeds, the link to the video feed looks like this.

/hack/feed.mg?Type=recentVideos&Data=brianandtessa&format=atom10

The link in your post was

/hack/feed.mg?Type=nicknameRecentVideos&Data=' + SmugMugNickname + '&format=atom03

So the first thing I'd try is updating the the parameters in that link to match (the values for Type and format differ)... and see what happens.

Good Luck!
Brian

[photostuff]

The photostream script works like a charm. Thanks for coming up with this. I've just made a few minor tweaks in the CSS, such as margins and thumbnail size. How does the javascript need to be adjusted to get the photostream box to appear in a location other than on top of the page? Specifically, I would like it to appear below my bio box, so it would be the second, not the first, box down. Is this possble, anyone? :D

[lsubac]

The photostream script works like a charm. Thanks for coming up with this. I've just made a few minor tweaks in the CSS, such as margins and thumbnail size. How does the javascript need to be adjusted to get the photostream box to appear in a location other than on top of the page? Specifically, I would like it to appear below my bio box, so it would be the second, not the first, box down. Is this possble, anyone? :D

Terry,

This is the line that determines where it ends up on your page.

el.prependTo("#homepageBoxes");

All you have to do is change out that "#homepageBoxes" element id for whatever element on the page that you want it to appear above. If you're not already using it, the FireBug add on for FireFox makes it very easy to look at an element on the page and get it's ID.

So if you wanted it to appear below your bio, you'd swap out the "#homepageBoxes" for "#featuredBox" and then it would appear above the featuredBox div.

Brian

[photostuff]

Terry,

This is the line that determines where it ends up on your page.

el.prependTo("#homepageBoxes");

All you have to do is change out that "#homepageBoxes" element id for whatever element on the page that you want it to appear above. If you're not already using it, the FireBug add on for FireFox makes it very easy to look at an element on the page and get it's ID.

So if you wanted it to appear below your bio, you'd swap out the "#homepageBoxes" for "#featuredBox" and then it would appear above the featuredBox div.

Brian
Thanks Brian for the reply. I do have Firebug, web developer, etc. and will make the change you noted when I am at home. I have to brush up on my javascript and become more familiar with JQuery. From what I have seen, I like the capabilities of JQuery.

[darryl]

Great work on this, but wanted to know if I can get this to work for latest albums as opposed to just photos? Tried changing the following and am getting the album titles, but not any album pictures.

jQuery.getFeed({
url: '/hack/feed.mg?Type=nickname&Data=' + SmugMugNickname + '&format=atom10',

Can this work? If so, what else do I need to change?

Man, this is a great hack. I love the prev|next buttons.

Can't wait to hack it. :-}

Anyways, I implemented recent galleries thusly: http://dgrin.com/showthread.php?p=688574#post688574

That usertimeline hack is awesome. Bummer that there's no easy way to get a true date (of photos) for a whole gallery.

[AirThom]

So the recent update broke the album picture hack... :( Trying to figure out the changed code.

[AirThom]

So the recent update broke the album picture hack... :( Trying to figure out the changed code.

To be clear: My page - http://photos.thomasflock.com/galleries
used to show a random thumbnail for each gallery. I think I've isolated the problem (the links still work, just not the thumbnails).

I bolded the suspected failure point... and looked at the image url that the failure is providing:
Album link: http://photos.thomasflock.com/Photography/Experiments/Puppy-Portraits/9377215_UTvPK
Image URL from the code below: http://photos.thomasflock.com/photos/random.mg?Size=Tiny&AlbumID=K
for (var i=MyIndex; i<MyMax; i++) {
var item = MyFeed.items[i];
var albumStart = item.link.indexOf('gallery/');
var albumLink = '/photos/random.mg?Size=Tiny&AlbumID=' +
item.link.substr(albumStart).replace('_','&AlbumKey=').replace('gallery/','');
$("#MyPhotostream").append('<div class="photo"><a href="' + item.id + '"><img border="0" alt="' + item.title + '" title="' + item.title + '" src="' + albumLink + '" class="imgBorder" /></a>' +
'<br /><a href="' + item.id + '" class="nav">'+item.title+'</a></div>');

[photostuff]

Tom, I'm sorry I don't have a solution to your problem with Photostream. Mine works as well as before the upgrade but it is not configured as yours is. However, I want to say I very much like the background you use in the Puppy Portraits gallery. Is the background,http://photos.thomasflock.com/photos/561677106_3eEwL-O.jpg freely available?

[AirThom]

Tom, I'm sorry I don't have a solution to your problem with Photostream. Mine works as well as before the upgrade but it is not configured as yours is. However, I want to say I very much like the background you use in the Puppy Portraits gallery. Is the background,http://photos.thomasflock.com/photos/561677106_3eEwL-O.jpg freely available?

I created it by copying the BlackArts theme and inserting three images... one for the background, one for the gallery list background, and one for the gallery list header. Send me a PM if you would like more details.. no reason to clutter this thread up with theme talk. :)

[AirThom]

The actual URL delivered by the code I listed above: http://photos.thomasflock.com/photos/random.mg?Size=Tiny&AlbumID=http://photos.thomasflock.com/Photography/Experiments/Puppy-Portraits/9377215&AlbumKey=UTvPK

I think I see the problem... "gallery" is no longer used in the link, thus the code to substitute it is failing and putting the whole url in there. Need to figure another way to do that.

[AirThom]

So far all I've found is that I need to learn something called "Regular Expressions"... mentioning this phrase around people that actually do some programming made them cringe. I fear for my life, anyone else even looking at this problem? heh:dunno

[darryl]

Pshaw -- if those people cringe at Regular Expressions, they're not *real* programmers. I'll take a look after lunch. I love regexps, and I'm not even a real programmer.

[darryl]

Oof. This code was making a separate call to the random image script to obtain Thumbnails when there are perfectly good thumbnails available in the feed already.

Try this:


var item = MyFeed.items[i];
var albumStart = item.content.indexOf('src="');
var albumLink = item.content.substr(albumStart).replace('-Th','-Ti').replace('".*','');

$("#MyPhotostream").append('<div class="photo"><a href="' + item.id + '"><img border="0" alt="' + item.title + '" title="' + item.title + '" src="' + albumLink + '" class="imgBorder" /></a>' +
'<br /><a href="' + item.id + '" class="nav">'+item.title+'</a></div>');


So previously the code was taking the link of each gallery, extracting the Album ID and Key, and then feeding those variables to SmugMug's random.mg script, which would return the URL of a random photo from the given album.

What my code does is look in the <content> tag for each gallery (which is part of the feed) and extract the URL for the "Featured" image. (This can be random, or you can select which image is the "cover" image for each gallery.) Oh, and then I change the size of the image from Thumb (Th) to Tiny (Ti), which is a little bigger.

It should be faster, if it works. I haven't tested it.

[AirThom]

Error: item.content is undefined
Source File: http://photos.thomasflock.com/galleries
Line: 184

That's the error I get, using your code and the links nor thumbnails show now.

[darryl]

Error: item.content is undefined
Source File: http://photos.thomasflock.com/galleries
Line: 184

That's the error I get, using your code and the links nor thumbnails show now.

Ah -- try replacing item.content with item.description everywhere in my code.

[AirThom]

Ok, links are back... still no thumbnails and the links have some extra text.

getting the URL of the image in the source is http://photos.thomasflock.com/src=

[Mohamed.Ghuloom]

Hey, it worked like a charm :wink

[darryl]

Ok, links are back... still no thumbnails and the links have some extra text.

getting the URL of the image in the source is http://photos.thomasflock.com/src=

Ah, I'm such a hack. Try this?

var albumStart = item.description.indexOf('src="');
var albumLink = item.description.substr(albumStart+5).replace('-Th','-Ti').replace('".*','');

[AirThom]

Real progress here... We now have pictures. Though they are thumbnails (TH) not tiny's (TI)... the text links below the thumbnails is a little askew as well.

[AirThom]

This is what I've reverse engineered...

the "var albumLink=" line is not successfully processing the "replace" commands, as it's not swapping out the '-Th' with '-Ti' nor the '".*' with a ''

I don't know how to fix that, but I figured out the problem. heh

[darryl]

This is what I've reverse engineered...

the "var albumLink=" line is not successfully processing the "replace" commands, as it's not swapping out the '-Th' with '-Ti' nor the '".*' with a ''

I don't know how to fix that, but I figured out the problem. heh

Thanks for sticking with it Thom. I should be able to take a look again later tonight.

[darryl]

Ah -- try replacing item.content with item.description everywhere in my code.
Ok, one more try:


var albumStart = item.description.indexOf('src="');
var albumLink = item.description.substr(albumStart+5).replace("-Th","-Ti").replace(/".*/,"");


And I actually *tested* the code this time. Heh.

[AirThom]

Awesome, awesome, awesome. Thank you so much!

[ki4cgs]

I'm just getting into customizing my SmugMug site and I added this photostream.

I am not getting any pictures however. When I load the homepage the photostream says "Loading" but then just disappears. Here is a screenshot:

http://www.jasperweather.com/smugmug/photostream.jpg

I haven't done any customizing to the photostream code and I'm currently using the 'Harvest' theme.

What am I doing wrong?

[AirThom]

Using the CODE brackets, paste your code in here you are using. We'll take a peek and see what's up.

[darryl]

STOP! SmugMug now has their own Recent Photos widget:
http://blogs.smugmug.com/release-notes/2009/10/23/animoto-better-viewing-and-homepage-goodies-for-all-october-22-2009/

On the other hand, lsubac's Photostream lets you go forward and backwards. That's way sweet.

[lsubac]

Big kudos to SmugMug for publishing a built-in photostream that you can stick on your homepage.

Check it out here (http://www.smugmug.com/help/homepage-boxes).

[WinsomeWorks]

Big kudos to SmugMug for publishing a built-in photostream that you can stick on your homepage.

Check it out here (http://www.smugmug.com/help/homepage-boxes). I'm not seeing the photostream discussed at this link. Is the link wrong or are my eyes going buggy?

[lsubac]

I'm not seeing the photostream discussed at this link. Is the link wrong or are my eyes going buggy?

It's kinda hidden in the screenshot on the right. They named it "Recent Photos" in the list of options under the "Homepage Layout" button.

Hope this helps,
Brian

[WinsomeWorks]

It's kinda hidden in the screenshot on the right. They named it "Recent Photos" in the list of options under the "Homepage Layout" button.

Hope this helps,
Brian Oh. Yeah, I have that enabled on a page. But it doesn't move like your photostream so I didn't really think of it as a "stream". I'd like to have one spot where I have a moving strip. Not sure where yet. Maybe if I wait long enough to figure it out, they'll implement a moving one. Thanks though! Looks like lots of folks are using your other one, or at least were until the recent changes.

[albumflip]

I have been using this photostream for a while and it's been working. Since they added the SmugMug recent photos, I got excited and tried to use theirs instead. However the smugmug recent photos does not pull the "latest" or "recent" photos like it should. It pulls photos that are months old. I have uploaded many photos since those and it still does not update. I hope they fix it and add some more functionality. Until then I will use this photostream.

[ChancyRat]

I have been using this photostream for a while and it's been working. Since they added the SmugMug recent photos, I got excited and tried to use theirs instead. However the smugmug recent photos does not pull the "latest" or "recent" photos like it should. It pulls photos that are months old. I have uploaded many photos since those and it still does not update. I hope they fix it and add some more functionality. Until then I will use this photostream.

SmugMug knows there's a problem with Recent Photos, they're checking why it doesn't show recently uploaded. I believe it might show file date instead, not sure about that. It should get fixed.