Written by on

Watermark your Slideshow

Hi everyone! :)

This is Bes Zain from the PluginBuddy team. Starting today we’ll be bringing you weekly tips, suggestions and other news to help you get the most out of your PluginBuddy plugins in particular and your WordPress sites in general.

We are going to start today with one of our most beautiful DisplayBuddy plugins: Slideshow. One of the best things about Slideshow and other DisplayBuddy plugins is that they utilize and rely fully on CSS styling, and thus can be customized extensively.

We are going to use CSS styling to allow you to watermark your Slideshows very easily.

Go ahead – Brand that Slideshow!

Add watermarks to your SlideshowsThere are many situations where you would like to ensure that visitors to a Slideshow easily see your or your client’s brand image. I see dozens of websites every week posting images which have a watermark manually added to them.

Watermarking images directly is too much work and a lot of wasted time, even if you watermark images in batches.

There is a much easier way to watermark your Slideshow: show any image you want over your Slideshow. That will result in all your Slideshow images to automatically have a watermark on them.

Check out the demo of having a watermark over your Slideshow

You can save a ton of time using this method. Since this is a one-time only setup, you can focus more on using Slideshow to showcase what’s actually important.

How is this done? Through 2 steps: by styling, and by the actual content in your post or page editor.

Step 1 : Styling

The css code for the above watermark effect is very simple, though it will differ based on your specific theme in question and your Slideshow settings. The below styling code will go in your theme’s CSS file.

Here is the bare minimum code used to move the watermark image in question right on top of Slideshow:

#builder-module-4e0242c2e34eb .builder-module-block { /* part 1 */
position: relative;
z-index: 5 !important;

.watermark-image { /* part 2* /
position: relative;
z-index: 1 !important;
top: -176px;

Part 1 in the css code above focuses around modifying that specific page theme’s output to be able to have an image shown on top of it easily. The theme used on that page is the awesome Cool Breeze child theme for Builder, by the way.

Part 2 simply tells the browser to put the image in question, your watermark image, right on top of Slideshow.

You will of course have to change the actual numerical values above to suit your specific site, Slideshow, image and theme needs.

Step 2 : Editor Code

Here is the actual piece of code used in the Post or Page editor (depending on what you use) to show the Slideshow and the image:

[pb_slideshow group="X"]

<img src="//ithemes.com//YOUR-IMAGE-LINK.png" 
width="100" height="55" class="watermark-image">

Change the Slideshow group number to your group number, and the image link and dimensions to what you have. The above editor code showcases the Slideshow and your watermark image, and the Styling code shown earlier above will make sure the watermark image is shown on top of Slideshow.

That’s it!

How are you using Slideshow?

What do you think of this tip? Please share your thoughts about this, or share your own tips regarding Slideshow. If you have customized Slideshow and want to share a link to your site where you have Slideshow enabled, please go ahead and do so. We want to hear from you!

More code examples that you can use are in our Slideshow Codex. If you want to be really creative, you can combine other plugins, like Rotating Images or even Rotating Text, with Slideshow and use them as watermarks.

For support questions regarding Slideshow, please go ahead and ask them in the Slideshow Forums.

Thanks! :) See you on the forums and elsewhere online.



Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35