Add a Cover Image & Description on SmugMug Folders
SmugMug added a Cover Image and Description for Galleries, but there is no way to add a Cover Image and Descrption on Folders...until now. Add this to a HTML block on your “All Folders”. This example shows 3 images/folders. Add more or remove images/descrpitions to suit your site. Obviously you’ll have to edit the URL, titles and description.
You will have to find the parent-node(s)
for each Folder in the source code (ctl+u). Once you have that, add this to a CSS Block on the “All Folders” section or on your site-wide theme’s CSS.
HTML
<div class="folder">
<div class="feature feature-01">
<div class="feature-image">
<img src="http://www.YourWebsiteHere.com/feature-01.jpg" alt="Alt Text Here" title="Title Text Here" />
</div>
<h1 class="feature-title">Feature Image Title Here</h1>
<div class="feature-description">
<p>Feature Image description text here.</p>
</div>
</div>
<div class="feature feature-02">
<div class="feature-image">
<img src="http://www.YourWebsiteHere.com/feature-02.jpg" alt="Alt Text Here" title="Title Text Here" />
</div>
<h1 class="feature-title">Feature Image Title Here</h1>
<div class="feature-description">
<p>Feature Image description text here.</p>
</div>
</div>
<div class="feature feature-03">
<div class="feature-image">
<img src="http://www.YourWebsiteHere.com/feature-03.jpg" alt="Alt Text Here" title="Title Text Here" />
</div>
<h1 class="feature-title">Feature Image Title Here</h1>
<div class="feature-description">
<p>Feature Image description text here.</p>
</div>
</div>
</div>
CSS
/**
* Adds a "Folder Cover Image" on Each Folder Selected
*****************************************************/
.folder .feature {display: none;}
/* Selected Folders */
.sm-page-node-BV5JW .feature.feature-01,
.sm-page-node-T63jq .feature.feature-02,
.sm-page-node-K75X9 .feature.feature-03 {display: block;}
/* Adds a "Folder Cover Image" on Each Folder Selected End */