Add a Cover Image & Description on SmugMug Folders

Demo

This customization will allow you to add a “Cover Image” to your Folders. 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.

HTML

	
<div class="folder">	
	
	<div class="feature feature-01">

		<div class="feature-image">
		
			<img src="//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="//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="//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>

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.

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;
		}