Hello everyone,

I created a smart gallery with my personal favorites from my smugmug page and I would like to feature this gallery on my home page the same way as the "most popular" gallery provided by smugmug. Did anyone try this before and has some experience with it?

Best wishes,
Timm

It won't work like the most popular photos box will. Where it displays thumbnails for all the images on the homepage. But if you set the gallery as a featured gallery it can be one of the four that displays in the Featured Galleries box. But I'm not sure if that would suffice for what you have in mind.

Originally Posted by Smug Eric It won't work like the most popular photos box will. Where it displays thumbnails for all the images on the homepage. But if you set the gallery as a featured gallery it can be one of the four that displays in the Featured Galleries box. But I'm not sure if that would suffice for what you have in mind.

Hello Eric,

many thanks for your answer. It is is very much appreciated. Sadly, this is not what I had in my mind. I was actually thinking in the line of creating a second instance of a 'most popular' object, customizing it in CSS and than use some java script to redirect the relevant paths to my gallery. The alternative of manually building such an object in the HTML part of my homepage appeared to be too cumbersome and rather rigid in construction. Any ideas?

Best wishes and have a nice day,
Timm

Hello everyone,

I tried building a gallery presentation on my own. The code is definitely not elegant, but it seems work. I briefly tested it with Safari, Firefox, Camino, Chrome and the Internet explorer. Please have a look at http://tlankau.smugmug.com/myfavorites/ and let me know, if there are still any major problems. If not, I am going to post a brief tutorial for this customization next week.

Best wishes,
Timm

Hello everyone,

time passed, some guys visited my home page and I did not receive nay error tickets. So, here's the code. Code marked in lime is code which should be part of your customization either from a previous step or something you did in the past. Code in yellow is added at the current step.

The very first step was the creation of a smart gallery with my personal favorites. Details about smart galleries can be found on the Smugmug help pages.

[FONT="Courier New"]http://www.smugmug.com/help/smart-galleries[/FONT]
[FONT="Courier New"]http://www.smugmug.com/help/picture-storage[/FONT]

The keyword ‘persfav’ was used to mark the pictures for this gallery and the rules for the smart gallery were set accordingly.

[FONT="Courier New"]CSS:
.gallery_XXXXXXXX .cartbuttons {display: none;}
.gallery_XXXXXXXX #smugmug {margin-top: 25px;}[/FONT]

This section of the of the style sheet provides the fine-tuning of the gallery. I don’t sell any pics and the shopping cart had to go. The extra margin on top of the gallery makes sure that the navbar and top box don’t overlap. The XXXXXXXX part can be obtained from the URL of the gallery in the browser address field. The URL ends with a part with the following structure.

[FONT="Courier New"]XXXXXXXX_xxxxxx#YYYYYYYYY_yyyyy[/FONT]

The first term [FONT="Courier New"]XXXXXXXX_xxxxxx[/FONT] identifies the gallery and the second the picture currently displayed.




The organization of my gallery pages was done according to the tutorials published by Ivar Borst (ivar, http://www.dgrin.com/member.php?u=5273) on customizing Smugmug pages.

Site layout: [FONT="Courier New"]http://dgrin.smugmug.com/gallery/2160039[/FONT]
Navbar: [FONT="Courier New"]http://dgrin.smugmug.com/gallery/1932803[/FONT]

The second step was therefore the creation of a new navbar entry:

[FONT="Courier New"]CUSTOM HEADER:
<div id="navcontainer">
<ul>
<li><a href="/myfavorites/">Favorites</a></li>
</ul>
</div>[/FONT]

and

[FONT="Courier New"]FOOTER JAVASCRIPT:
function hasPath(sPath) {
re = new RegExp("\/" + sPath + "(\/|$)");
return re.test(window.location)}

if (hasPath("myfavorites")){
YD.addClass(document.body, "myfavorites");} [/FONT]




The third step was the creation of a vanity page, which will feature the new gallery.

[FONT="Courier New"]CSS:
#MyFavoritesContainer {
display: none;
width : 744px;
margin: 0px auto 50px; }[/FONT]

The class ‘MyFavoritesContainer’ will be used to set the properties of the HTML division, which displays selected pictures from the gallery. The display property is set to none to make sure that the gallery only appears on those vanity pages I want it to appear on and the width was set to 744 px to make sure that it aligns nicely with the ‘most popular box’. The value 744px was found by trial and error and I assume that the missing six pixel account for the two lines and the empty space of the border. The central ‘auto’ in the list of margin properties makes sure that the box is nicely centered on the homepage.

[FONT="Courier New"]CSS:
.myfavorites #breadCrumbTrail {visibility: hidden;}

.myfavorites #bioBox,
.myfavorites #recentPhotosBox,
.myfavorites #galleriesBox,
.myfavorites #categoriesBox,
.myfavorites #featuredBox,
.myfavorites #keywordsBox,
.myfavorites #datesBox {
display: none; }

.myfavorites #popularPhotos,
.myfavorites #MyFavoritesContainer {
display: block; }[/FONT]

This part of the style sheet defines the general appearance of the page with my personal favorites. All the things I don’t want to display are either hidden or their display property is set to ‘none’. The HTML for the gallery presentation is in the [FONT="Courier New"]CUSTOM FOOTER[/FONT] section of the customizing page and hence the gallery with my personal favorites will appear below the most popular section on my homepage.




Step number four creates an empty box ([FONT="Courier New"]class=”box”[/FONT]) on the homepage.

[FONT="Courier New"]CUSTOM FOOTER:
<div id="MyFavoritesContainer" class="box">
</div>[/FONT]

This bit of HTML creates a box on the homepage, which can be filled with all kind of HTML stuff and also can be turned on and off in the CSS part of your customization (see above).




I wanted the presentation of my favorite pictures to look exactly the same as Smugmug’s ‘most popular box’. Step number five was therefore a shameless rip-off of the original Smugmug style sheet. I used the Firefox Web Developer Extension (http://addons.mozilla.org/firefox/60/) as suggested by I. Borst and D. Rosenthal to read the CSS part of my Smugmug homepage.

Ivar Borst, David Rosenthal (editor);
“CSS: Customizing Smugmug Simplified”;
http://wiki.smugmug.net/download/att....pdf?version=1

Then, I copied every part concerning the most popular box to the CSS section of my Smugmug page and changed the names to MyFavorites container and list to avoid any problems with existing Smugmug code for the ‘most popular’ box.

[FONT="Courier New"]CSS:
#MyFavoritesContainer .boxSettings {
padding: 10px; }

#MyFavoritesContainer .note {
font-size: 11px; }

#MyFavoritesContainer .boxTop {
margin-bottom: 20px; }

#MyFavoritesContainer .boxBottom {
padding: 0; }

#MyFavoritesContainer .boxBottom .photo {
float: left;
display: inline;
width: 114px;
height: 115px;
clear: none;
text-align: center;
margin: 10px 5px 0 5px; }

#homepage #MyFavoritesList .photo {
width: 113px; }[/FONT]

The entry [FONT="Courier New"]#MyFavoritesContainer .boxTop {margin-bottom: 20px;}[/FONT] was added to create some extra space for the gallery description.

The rest of this customization is mainly copying and modifying Smugmug’s HTML for the ‘most popular’ box.




Step number six creates the title text and the link to the gallery with my favorites. Smugmug separates a container box into two sections, fittingly called [FONT="Courier New"]BoxTop[/FONT] and [FONT="Courier New"]BoxBottom[/FONT]. The title and the gallery descrption go into the BoxTop section.

[FONT="Courier New"]CUSTOM FOOTER:
<div id="MyFavoritesContainer" class="box">
<div class="boxTop">
</div>
</div>[/FONT]

The title of a gallery uses the [FONT="Courier New"]<h3>[/FONT] tag to control size color and font size. Since the new gallery presentation has to look like the most popular box, property specification were copied form the Smugmug original. The link to the gallery page was copied from the browser’s address field while visiting the gallery.

[FONT="Courier New"]CUSTOM FOOTER:
<div id="MyFavoritesContainer" class="box">
<div class="boxTop">
<h3 id="popularTitle" class="title notopmargin">
<a href="link_to_your_gallery"
class="title nolink">Personal Favorites</a>
</h3>
</div>
</div>[/FONT]

The original ‘most popular’ box has no gallery discription. I used therefore the HTML tags used by Smugmug on the level of the individual galleries.

[FONT="Courier New"]CUSTOM FOOTER:
<div id="MyFavoritesContainer" class="box">
<div class="boxTop">
<h3 id="popularTitle" class="title notopmargin">
<a href="link_to_your_gallery"
class="title nolink">Personal Favorites</a>
</h3>
<div id="albumDescription">
The description of your gallery
</div>
</div>
</div>[/FONT]

The gallery description requires some extra space, which was created by setting the box margins in the CSS section.

[FONT="Courier New"]CSS:
#MyFavoritesContainer .boxTop {
margin-bottom: 20px; }[/FONT]

If no description is added to the gallery presentation, this part of the CSS section has to be deleted to ensure a balanced layout for the gallery presentation. It is probably much more efficient to control the size of the [FONT="Courier New"]BoxTop[/FONT] via the height property. This route will be explored in future versions of this customization.




In the last step, the [FONT="Courier New"]BoxBottom[/FONT] will be filled with selected thumb nails of selected pictures from the gallery. First, the HTML division for the bottom part is created.

[FONT="Courier New"]CUSTOM FOOTER:
<div id="MyFavoritesContainer" class="box">
<div class="boxTop">
<h3 id="popularTitle" class="title notopmargin">
<a href="link_to_your_gallery"
class="title nolink">Personal Favorites</a>
</h3>
<div id="albumDescription">
The description of your gallery
</div>
</div>
<div class="spacer"></div>
<div class="boxBottom">
</div>
</div>[/FONT]

It seems to me that the spacer divisons ([FONT="Courier New"]<div class="spacer"></div>[/FONT]) are used by Smugmug for the control box sizes. Also, some browser seem to need them and other not. I therefore kept the spacer divisions in the HTML section of the gallery presentation.

[FONT="Courier New"]CUSTOM FOOTER:
<div id="MyFavoritesContainer" class="box">
<div class="boxTop">
<h3 id="popularTitle" class="title notopmargin">
<a href="link_to_your_gallery"
class="title nolink">Personal Favorites</a>
</h3>
<div id="albumDescription">
The description of your gallery
</div>
</div>
<div class="spacer"></div>
<div class="boxBottom">
<div id="MyFavoritesList">
</div>
</div>
</div>[/FONT]

A new division is created in the BoxBottom section for the list of the thumbnails the thumbnails finally added to the list. Each thumbnail with its link to the picture in the favorites gallery has its own photo division ([FONT="Courier New"]<div class="photo"></div>[/FONT]).

[FONT="Courier New"]CUSTOM FOOTER:
<div id="MyFavoritesContainer" class="box">
<div class="boxTop">
<h3 id="popularTitle" class="title notopmargin">
<a href="link_to_your_gallery"
class="title nolink">Personal Favorites</a>
</h3>
<div id="albumDescription">
The description of your gallery
</div>
</div>
<div class="spacer"></div>
<div class="boxBottom">
<div id="MyFavoritesList">
<div class="photo">
<a href=”Link to the picture in your smart gallery”
class="photoLink">
<img src=”link to original thumbnail”
width="100"
height="100"
class="imgBorder"
title="Your text"
alt="Your text" />
</a>
</div>
</div>
<div class="spacer"></div>
</div>
</div>[/FONT]

The URL of the picture in the smart gallery is copied from the address field of the browser while visiting the picture. The link to the original thumbnail is created with the ‘get a link’ option of the share menu in the original gallery. The title is the title of your picture and the alt text provides the text alternative, if the thumbnail cannot be shown. Building the whole list this way is clumsy and takes some time. Moreover, if the picture moves between galleries or is deleted, you have to change the HTML section by hand. But, the modification seems to work and features your favorite pics nicely on your homepage.

I am going to keep the box, but very likely it is going to move to another place sooner or later. If you cannot find it anymore, please check my homepage http://tlankau.smugmug.com.