New module: miniHero - Banners

[Ruud]

Create a large image (no slider) with captions on your (home)pages. Fully responsive.



Demo and download: https://dev4me.com/modules-snippets/opensource/minihero-banners/

[johnbroeckaert]

Thanks @ruud! Usefull!!

[VSG]

Thanks, great module!

[dbs]

Next easy mini module. Works. Thanks Ruud. 

[Hans]

Thanks man (again)! 

[Ruud]

Version 0.2 released today.

Added parallax scrolling for the hero image.
Demo: https://dev4me.com/modules-snippets/opensource/minihero-banners/parallax-demo/

[dbs]

Tested and works great. 
Good idea, looks very very nice.

[johnbroeckaert]

 
Just where i was waiting for. The parallax thing I was using wasn't easy  for most customers!
A big Thanks!!

[sky writer]

Thank you for yet another useful and progressive module!

I upgraded from version 0.1 and am not seeing the parallax effect.  I tried uninstalling and installing 0.2 clean, but still don't see parallax.

Also, is the only difference between the "Title", "Textblock 1" and "Textblock 2" the preset CSS formatting?  Or if it more subtle or important a difference?

[dbs]

Hi. WB-version, PHP-version, link to the problem?

[sky writer]

Hi, sorry.

PHP-Version: 5.6.26
WebsiteBaker-Version: 2.10.0

Local install on WBPortable, so no link unfortunately.

If the parallax is working for others, then I will try to figure out the issue on my end.  I'll report if I find anything.

[dbs]

Short tested in a local environment 2.10 with PHP5.6: works also.
Hope you find the reason.

[Ruud]

I forgot to mention..

The parallax wil need jQuery to be loaded. If no jQuery is loaded it will just act as the original miniHero (static background image).

Also when viewing on mobile devices parallax is disabled.
This is because IOS (iPhone) does not handle this technique at all and for "budget android" parallax scrolling is too much processor consuming.
So on mobile devices the module will also show the static image.

[Ruud]

If the parallax is working for others, then I will try to figure out the issue on my end.  I'll report if I find anything.

Have a look on https://dev4me.com/modules-snippets/opensource/minihero-banners/parallax-demo/
If that works, it is not your browser but more probably a jQuery issue (none or multiple jQuery scripts loaded)

[sky writer]

Thanks for the follow up Ruud.

Yes, the module on your site looks great and functions on my browser.

I suspected js or jquery, but tried every combination of Output Filter and nothing worked.  I currently only have droplets and email active.
I have register_frontend_m odfiles in my head:

Code: [Select]

<?php 
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
    register_frontend_modfiles('css');
    register_frontend_modfiles('jquery');
    register_frontend_modfiles('js');
} ?>
</head>
But I guess since there is no jquery included with your module, that doesn't help.

I suspected it had something to do with my implementation of Zurb Foundation and more specifically the "off-canvas" menu for mobile view ports, but I couldn't find the actual cause.  You are correct, it is a jquery issue.

For the off canvas to work, I have to put these scripts at the end of the body:

Code: [Select]

<script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/jquery.js"></script>
    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/what-input.js"></script>
    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/foundation.js"></script>
    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/app.js"></script>
   
</body>
If I move them to the head, then the parallax effect works... but my off canvas menu breaks.

Not knowledgeable enough to know where to go from here.

[sky writer]

I added a link to the jquery CDN into the head, and removed the register_frontend_m odfiles jquery, and everything is working now.

Code: [Select]

<script
              src="https://code.jquery.com/jquery-1.8.3.min.js"
              integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8="
              crossorigin="anonymous"></script>

<?php 
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
    register_frontend_modfiles('css');
    register_frontend_modfiles('js');
} ?>

</head>

[Ruud]

It is advised to always have jQuery loaded in the <head> of your template.
Many modules using frontend.js will rely on the existence of jQuery.

In your foundation based template, the other scripts could be loaded in the bottom of the page without problems (this may speed up page loading).
Just make sure jquery.js (or jquery.min.js) is never loaded twice.

Note that the line register_frontend_modfiles('jquery'); also loads a version of jquery. So when loading your own jQuery version make sure not to use this WebsiteBaker functioncall.

[sky writer]

You are my mini Hero!

Ruud, are you sure you aren't a teacher or a Jedi???  You have the ability to say something that I have read about many times, and without spelling it out much more than those before you, inspire me to see what I have been missing.  I still have to work at it a bit, which is not a bad thing, as I will always have more to learn along the way.  Perhaps I am just starting to catch on to all this stuff finally, so things are beginning to fall into place.

I just had to move the foundation jquery call to the head, leaving the rest of the foundation calls at the bottom of the <body>, and now everything works beautifully.

Code: [Select]

<script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/jquery.js"></script>
<?php 
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
    register_frontend_m odfiles('css');
    register_frontend_m odfiles('js');
} ?>

</head>

Code: [Select]

    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/what-input.js"></script>
    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/foundation.js"></script>
    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/app.js"></script>
   
</body>
When I was first building my custom template, I put all the foundation calls in the <head> but the off-canvas function didn't work.  So I did more research and found the appropriate Docs.  What confused me was the instructions on the Foundation Docs page - http://foundation.zurb.com/sites/docs/javascript.html
That state:

Once you have the files, add links to jQuery and Foundation as <script> tags at the bottom of your page, just before the closing <body> tag.

It doesn't specify that the placement is for page loading speed only, so I took it as a necessity and moved everything to the end of the body.

Actually, the only call that has to be at the bottom of the <body> is the app.js:

Code: [Select]

<script src="<?php 
    echo TEMPLATE_DIR; ?>/js/app.js"></script>which contains the Initializing function:

Code: [Select]

$(document).foundation()
This is a custom responsive template I am creating which implements some foundation elements such as buttons and the off-canvas menu for smaller viewports.  I was actually inspired to build this template by playing around with another of your progressive modules - Bootstrap Multiple Columns.  I had initially planned to use it extensively, but it turns out I haven't needed to use it... yet.  But your miniHero with parallax was a design "pop" element I was missing.

Thank you!

[Ruud]

Just released v0.3

Added animation with seperate settings for all 3 text parts. Animations are done by animate.css.
Demo on: https://dev4me.com/modules-snippets/opensource/minihero-banners/parallax-demo/

[johnbroeckaert]

SUPER!!

[sky writer]

Raising the bar yet again.   

I have a question about customizing the text formatting.  I had played around with font-size changes in the frontend.css file, but of course this will be overwritten with every upgrade.  So, I copied the classes to my custom css file and made the changes there.  But those changes are overridden because that file gets loaded before the minihero css file which loads with "register_frontend_m odfiles('css')" just before the </head>.

I figure I will have to move my custom css file below the "register_frontend_m odfiles('css')" call, but since I always read to put the "register_frontend_m odfiles('css')" last, just before the </head>, I wasn't sure if there was a reason not to do this.

Do you have a suggestion on how to best make changes to the text formatting of the module?

[Ruud]

Stylesheets have a way to overrule later changes.
If you style something with the same selectors as used in the frontend.css (loaded later in the flow) just use the !important parameter.

Example:

Code: (your template css) [Select]

.minihero-text h1 {
font-size: 48px !important;
}
.minihero-text p.pfirst {
color: #FF0000 !important;
font-size: 28px !important;
}
.minihero-text p.psecond {
color: #99FFFF !important;
font-size: 20px !important;
}
Another option would be to use an extra stylesheet that is loaded after the "register_frontend_m odfiles('css')".
You could overrule any default frontend.css that way.

Code: [Select]

<link href="<?php echo TEMPLATE_DIR; ?>/css/custom.css" rel="stylesheet" media="screen">
<?php  
  register_frontend_modfiles('css'); 
?>
<link href="<?php echo TEMPLATE_DIR; ?>/css/overrules.css" rel="stylesheet" media="screen">

[dbs]

Next cool feature, THANKS Ruud. 

Have tried in functions.php to extend the time selection with 0.5s, 1.5s ... but this will not shown after saving. Seems to work in frontend.

Code: [Select]

$secs[] = '0.5s';$secs[] = '1s';$secs[] = '1.5s';$secs[] = '2s'; ...What is the trick to see this in backend?

[sky writer]

Thanks!

[dbs]

What is the trick to see this in backend?

Ok, seems it works if no s or ms is added. Blank numbers works.