Add a Cover Image & Description on SmugMug Folders

Demo

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 */