Placing Widget over a Carousel image

[Steven Magee]

Is it possible in the Service Portal to have a carousel of images on the homepage instead of the background but still have the homepage search widget over it? and if so how can this be done.

Thanks!

Steve

[nathanfirth]

There are quite a few options for how to do this, but all will require some development. Here are some ideas off the top of my head:

• Nest a widget inside the Carousel widget and use CSS to place it on top
• Add an HTML field to the slides table and modify the widget to show the HTML so that it can be content instead of just images
• Write a custom JavaScript + CSS Transitions to make the container background images animate (instead of using the carousel)
• Lastly, search online for background slider directives available for Angular.js, if you find one you can just create a widget and list it as a dependency.

[Matthew Glenn]

Hey Steven,

Inspired by one of Nathan's suggestions, I believe I got what you're looking for. Although admittedly, I'm not the most savvy when it comes to HTML/CSS/etc...so this likely needs some fine tuning:

All I did was create a new widget, and simply combined the HTML, CSS, and Server Script from the 'Carousel' and 'Homepage Search' widgets, modifying the CSS just a bit. This sloppy union looks like this:

HTML

       <div id="homepage-search" class="hidden-xs wrapper-xl"> 
           <div class="wrapper-xl">
               <h1 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h1>
               <h4 ng-if="options.short_description" class="text-center m-b-lg sp-tagline-color" ng-bind="options.short_description"></h4>
               <sp-widget widget="data.typeAheadSearch" />
           </div>
       </div>
       <div class="pull-in" id="sp-carousel">
           <uib-carousel interval="options.interval">
               <uib-slide ng-repeat="slide in ::data.slides" active="slide.active">
                   <div class="container">
                       <a href="{{::slide.url}}">
                           <img ng-src="{{::slide.background}}" style="margin:auto; width:100%;"/>
                       </a>
                   </div>
               </uib-slide>
           </uib-carousel>
       </div>

CSS

.sp-tagline-color {
   color: $sp-tagline-color;
}

#sp-carousel {
       position: absolute;
       left: 0px;
       top: 0px;
}

#homepage-search {
   z-index: 5;
}

Server Script

data.slides = $sp.getRelatedList('sp_carousel_slide','carousel');

var typeAheadSearchOpts = {title: gs.getMessage('How can we help?'), size: 'lg', color: 'default'};
data.typeAheadSearch = $sp.getWidget('typeahead-search', typeAheadSearchOpts);

Attached is a .gif of it in action. The one thing I couldn't get to work was spanning the carousel across the entire width of the page. Just couldn't figure that part out.

Again, likely needs some tweaks, but it works.

[didierlotte]

Hello !!

Thanks ! It's exaclty what I looking for. But I have a small difference when I apply your code.

My background picture are smaller and on the left of the page, and the search bar is bigger.

I tried to modify some properties, without success

Some ideas ?

See the screen shot :

up of the page, the default search bar with background picture

down of the page, the custom carousel with your code

[Matthew Glenn]

In the Service Portal Designer, check the properties on the parent container that your new carousel is nested within. I have the Width and Parent class set as below.

Adjusting the width on my end causes the behavior you're seeing. This might be your fix (if not already set that way)