My pop doesn't have the nice colorbox background, Any idea why? Which colorbox setting are you using? Thanks for the quick tutorial ;-)
Drupal 7 Splashify
Share with Others
In this episode we cover the Splashify module. This module is used to display splash pages or popups. There are multiple configuration options available to fit your site needs.
In this episode you will learn:
- How to set up Splashify
- How to configure Splashify
- How to get Splashify to use the Mobile Detect plugin
- How Splashify displays to the end user
- How to be awesome
Hey everybody and welcome to Episode 158 of the Daily Dose of Drupal. I am Adam and today we’re going to be looking at the Splashify Module. Splashify Module is a module that really works with your marketing team. It allows you to add content and have it appear on page load in the Light Box or other redirects or stuff like that and we’ll get quickly into more of those features and hopefully get a good idea what Splashify Module can do.
But before we hop in to all of that, a couple of housekeeping things, as you might be aware, make sure to check out our 5 Secrets to Becoming a Drupal 7 Ninja EBook, released later last week and great feedback so far, definitely worth, check it out, again it’s $5 per sheet if you could check it out.
Also you can go ahead and follow myself and Shane on Twitter, better off only Shane to be honest. You can follow him at smthomas3, he’s a good follow for Drupal knowledge and other wisdom so make sure to follow him.
All right, so let’s jump in to this Splashify Module. Again, Splashify Module is just an easy way to display Splash pages either in Light Box or redirects for user. Splashify does come with a few other requirement modules, a couple of other Libraries module.
You’re also going to need to do the J Storage Plug-In Module which can be found by click on the link or get up here so you can fork it from there and then it needs to be drop into the Sites All Modules, excuse me, Sites All Libraries folder, as well as if you want to use the Color Box Functionality which I will probably recommend.
We’re going to need a Color Box module from drupal.org as well as the Color Box Plug-In and again that can be dropped in the sites All Libraries folder as well. So if we actually hop over here I’ll show you all the different ones that I have installed so far. So in here my sites are all libraries.
There’s three different plug-ins that I’ve used, Color Box, the ones that you should be aware of, the J Storage, that is the other one that’s required. That basically allows for caching issues, so people don’t get to pop multiple times and avoids annoyance with your user. And then the other one that you didn’t…I’m just mentioning now is Mobile Detect.
Mobile Detect is a utilized…works with the Splashify Moduleto display a pop-up based on screen size. So you can actually splashify a different pop-up or a screen to show up or use it on a mobile device or a tablet or a desktop. So using this plug-in allows our functionality to be possible. All right, so once you get those three plug-ins installed, again in the Sites All Libraries folder on your Drupal site then you just need to install the Splashify Module as you can see going in your modules folder.
So once you get that installed you just need to enable it. I’m going to turn the Splashify module on. Again make sure you have your Color Box Module also turned on on your Drupal site as well if you’re going to use that functionality.
One thing to know too is that if you ever get…if your user need early direction on what exactly need to be downloaded with the Splashify, they actually provide a good documentation on the read-me file under the module. That’s where you can find out exactly what plug-ins do what and where to put them and everything like that. So definitely reference that read-me.txt file on the module.
So once you have the Splashify Module enabled you can go to the configuration page. There’s 4 different tabs on the top here, When, Where, What and How. They kind of work left to right, it’s how you build it. So we’re going to work through this and get it all working and hopefully show you what it does. So first question is when should the pop-up show up, only show if you can specify by role.
So we’re going to say we only want to show it for anonymous users but down here again you could just restrict for certain roles if you have multiple roles on your site and stuff like that. But we only want to show it for anonymous user. Let’s see her How up, it should be visitor/page. It defaults to Off which obviously means it’s not active but you can obviously specify always, once, daily or weekly.
For this demonstration we’re just going to use Always, we don’t want to avoid any caching issues but you obviously can specify that based on what you prefer. And then if you want you can enable unique mobile splash which this is what I’m talking about earlier where you can display different splash screen based on screen size. And then again you can set how often people will see that as well.
In this demonstration since it’s on a desktop computer I’m not going to show the functionality of how the mobile settings works so we’re just going to disable it for the settings. But again you have to have that mobile Detect plug-in installed to get mobile settings to function.
So save the configuration there and then we’ll hop over to the Where tab. Here is exactly what it sounds like, Where thing is going to be displayed. You can display it by front page, all pages or you can again do list pages. You could specify one of two ways. You can list all the pages you want. The screen show up on org.
You can check this box below, you can do the inverse if you want every page box at the front page. First example is to, All Pages, that must be really annoying but, where’s the example. This is where you actually start to build out what your Splash or your box is going to look like. 4 different options in here.
So you can pick a URL so you could make a page and have it display through that and we’ll redirect to that or you can specify text and customize it that way. So for example if I do, my pop-up, make sure you select the text format here, that was the folder text. So how this should work then is when my pop-up appears or my slash page, I should say this is my pop-up only, it’ll be unformatted.
So hopefully that’s what happened. And then if you go to the how, this is how the actual Splash page is going to appear and this is where that color box option would come in. You obviously could redirect them it to the page and you could open it in a new window or new tab or you can do the color box option which is the one I’d really recommend because it keeps your user on that same page, so it’s pretty helpful.
You can specify directly the size you want, it just be within height, no pixels needed but let’s make it that way and then we’ll save that and that should be it. So now we should see a light box appear on every page saying “this is my pop-up”. So if you hop over to another browser, there was an old example here but let’s say, we’re going to try this again once we do a refresh and then you see it says “this is my pop-up” unformatted.
Again this is 400 x 300 width that I specified and then you’re just using that color box module pop-up. So pretty easy, you can also, back on this other screen you can also customize this HTML whatever way you wanted or you could use a CSS to style it. So for example if I type in this, it’s just an in-line style with colors Blue, I’ll save it and then when I come back to my other screen and refresh, oh I forgot to change the text format to full. Obviously let’s not cut the rest of that.
You can change it to full HTML and refresh and you can see my text color is now change to blue. So again you could do in-line styles here or you can specify a possibly a class of awesome or something or whatever you want and then you could style that with a CSS style sheet and then get it to display. You could also put images in here as well, whatever. It’s fully customizable there as well as specifying different pages and stuff like that. So you could path in URL alias to redirect you.
So then you obviously have fully customizable pages there as well. But if you want to get it to appear in the light box and stuff like that you can use Classes or In Light Styles to get your styles to work. So that in all…in a nutshell this is Splashify Module, really nice marketing tool for attracting either to you a promotional item or using or EBooks or whatever else, it might be, obviously pretty customizable with different settings or stuff like that.
So that’s it for today’s episode, also make sure to check out our 5 Secrets to Becoming a Drupal 7 Ninja. I appreciate if you could purchase the book. All right guys, well until next time. Thanks, bye.