Meta Slider Thumbnail Captions (Post Feed)

gistfile1.txt

/** 
 * Installation:
 *
 * Copy and paste this code into your themes functions.php file.
 *
 * Create a new custom field for your posts (to do this, edit one of your posts in WordPress, click 'Screen options' at the top of  * the page and enable 'custom fields'). Name the custom field 'metaslider_thumb_caption' and enter the text for the caption as 
 * the value
 *
 */


/**
 * Add styling for the thumbnail captions. You could put this CSS into your themes
 * stylesheet instead.
 */
function metaslider_thumb_caption_css($css, $settings, $slider_id) {
	$css .= ".metaslider .flex-control-thumbs li {
			    position: relative;
			}
			.metaslider .flex-caption {
			    position: absolute;
			    bottom: 0;
			    left: 0;
			    background: black;
			    color: white;
			    opacity: 0.7;
			    margin: 0;
			    display: block;
			    width: 140px;
			    line-height: 1.4em;
			    margin: 10px 5px 0;
			    padding: 5px;
			    text-align: left;
			}";

	return $css;
}
add_filter('metaslider_css', 'metaslider_thumb_caption_css', 10, 3);

/**
 * Enable thumbCaptions in the flexslider options
 */
function metaslider_flex_enable_thumbcaption($options, $slider_id, $settings) {
    $options['thumbCaptions'] = "true";
    return $options;
}
add_filter('metaslider_flex_slider_parameters', 'metaslider_flex_enable_thumbcaption', 11, 3);

/**
 * Get the caption for each thumbnail
 */
function metaslider_add_thumb_caption( $attributes, $slide, $slider_id ) {

	// this is where the caption for the thumbnail is defined
	$caption = get_post_meta(get_the_ID(), 'metaslider_thumb_caption', true);

	$attributes['data-thumbcaption'] = $caption;
	return $attributes;
}
add_filter('metaslider_flex_slider_list_item_attributes', 'metaslider_add_thumb_caption', 10, 3);