[Plugin: Smooth Slider] Post image as background

Hi, not sure if you found a way to do this as the post is 7 months old now, but I was after the same thing too. I found a site posted on the Smooth Slider forums which has done it. It’s at http://kcfilm.com/

Bit naughty, but I looked at their CSS. Basically, they’ve wrapped the text (the H2 title and SPAN description tags) in a div and give it an ID “textbody”. Then they styled the thumbnail DIV. In their CSS:

.smooth_slider_thumbnail {
position:absolute;
z-index:2;}

Then they styled the new textbody div:

#textbody {
height:100px;
margin-top:183px;
position:absolute;
width:630px;
z-index:4;
}

The above sizes are what I’ve used – do whatever for your site. Basically they’ve used absolute positioning and declared the z-index, so that the text is on top.

If you want to colour the background of the text, find #smooth_sldr_body h2 and #smooth_sldr_body span (that line didn’t exist in my CSS so I created it) and give it a background.

Found it in the slider versions folder – j.php – about 1/4 of the way down. Code snip below for anyone else!

else {
		   if($permalink!='') {
			$html .= '<h2 ><a href="'.$permalink.'">'.$post_title.'</a></h2><span> '.$slider_excerpt.'</span>
				<p class="more"><a href="'.$permalink.'">'.$smooth_slider['more'].'</a></p>

				<!-- /smooth_slideri -->
			</div></li>'; }
		   else{
		   $html .= '<h2 >'.$post_title.'</h2><span> '.$slider_excerpt.'</span>
				<!-- /smooth_slideri -->
			<div></li>';    }
		}

Thanks for the info!

Hey Wolf,

Somewhere around line 165 in j.php, in the versions folder of the plugin, I swapped that code (above) out for this (note i have qtranslate plugin there for multi-language, and I am not using the first image in the content, but entering the image through smooth slider’s form at the bottom of the post):

if(!$smooth_slider['content_limit'] or $smooth_slider['content_limit'] == '' or $smooth_slider['content_limit'] == ' ')
		  $slider_excerpt = substr($slider_content,0,$smooth_slider['content_chars']);
		else
		  $slider_excerpt = smooth_slider_word_limiter( $slider_content, $limit = $smooth_slider['content_limit'] );

		if ($smooth_slider['image_only'] == '1') {
			$html .= '<!-- /smooth_slideri -->
			</li>';
		}
		else {
		   if($permalink!='') {
			$html .= '<div class="slider-excerpt">'.$slider_excerpt.'</div>
				<p class="more"><a href="'.$permalink.'">'.$smooth_slider['more'].'</a></p>

				<!-- /smooth_slideri -->
			</li>';
			} elseif ( qtrans_getLanguage() == 'it') {
		   $html .= '<div class="slider-excerpt">'.$slider_excerpt.'</div>
				<!-- /smooth_slideri -->
			<h3 class="findoutmore"><a href="'.$slide_redirect_url.'">DI PI&Ugrave;</a></h3>
			</li>';
			} else {
		   $html .= '<div class="slider-excerpt">'.$slider_excerpt.'</div>
				<!-- /smooth_slideri -->
			<h3 class="findoutmore"><a href="'.$slide_redirect_url.'">MORE INFO</a></h3>
			</li>';
			}
		}
	}

Hopefully this helps.. though I did do a bunch of if statements due to the multiple galleries and languages I have.

Hmm where does the new CSS code go, in smooth-slider/smooth-slider.css or does it need to go somewhere else? Also, should the div in the php code above be renamed to “textbody” instead of “slider-excerpt” since that is what I named the CSS class?

Thanks for the help. Sorry I don’t have a live example but I’m using a local dev site (with WebMatrix) before putting it on my production site.

You can reach me at verry1990 at Microsoft’s webmail service 🙂

Thanks for the help 🙂