[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 https://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.

Thanks! I’m trying to dothis now but having trouble finding where the h2 and span on my excerpt is in their files.. can you tell me which one you did it in and where on the page it was made?

Really appreciate it!

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!

Hi theoldswitcheroo, I’m trying to follow your instructions; however, it’s not working for me. Where exactly do I need to add the <div id="textbody"> in that code snip you posted? Do i need to use the carrots around it? Also, the new CSS items go in smooth-slider/css/smooth-slider.css, right?

Thanks in advance ??

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.

Thanks, I’ll try this out tomorrow ??

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.

I made sure I put my own style sheet as the last thing in the head and overwrote a lot of their styles with my own.

yeah you should change the class on one of them if that’s the case. I kept it as that because i was calling for .$slider_excerpt. it just made sense to me to keep them the same for when im searching through it

what’s your email? i can send you the site i did this on if you want to see exactly what this code does. it’s still having content dropped in so I don’t want to post here.

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

Thanks for the help ??