WebsiteBaker Community Forum

WebsiteBaker Support (2.10.x) => Modules => Topic started by: Ruud on June 09, 2017, 03:02:44 PM

Title: New module: miniHero - Banners
Post by: Ruud on June 09, 2017, 03:02:44 PM
Create a large image (no slider) with captions on your (home)pages. Fully responsive.

(https://dev4me.com/media/minigal2/256/thumbs/4.demo1.jpg)

Demo and download: https://dev4me.com/modules-snippets/opensource/minihero-banners/
Title: Re: New module: miniHero - Banners
Post by: johnbroeckaert on June 09, 2017, 05:05:09 PM
Thanks @ruud! Usefull!!
Title: Re: New module: miniHero - Banners
Post by: VSG on June 09, 2017, 05:20:23 PM
Thanks, great module!
Title: Re: New module: miniHero - Banners
Post by: dbs on June 09, 2017, 06:28:49 PM
Next easy mini module. Works. Thanks Ruud.  (Y)
Title: Re: New module: miniHero - Banners
Post by: Hans on June 09, 2017, 11:45:18 PM
Thanks man (again)!  (Y)
Title: Re: New module: miniHero - Banners
Post by: Ruud on June 21, 2017, 04:14:37 PM
Version 0.2 released today.

Added parallax scrolling for the hero image.
Demo: https://dev4me.com/modules-snippets/opensource/minihero-banners/parallax-demo/
Title: Re: New module: miniHero - Banners
Post by: dbs on June 21, 2017, 04:24:15 PM
Tested and works great.  (Y)
Good idea, looks very very nice.
Title: Re: New module: miniHero - Banners
Post by: johnbroeckaert on June 21, 2017, 05:53:09 PM
 (Y)
Just where i was waiting for. The parallax thing I was using wasn't easy  for most customers!
A big Thanks!!
Title: Re: New module: miniHero - Banners
Post by: sky writer on June 21, 2017, 06:35:45 PM
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?
Title: Re: New module: miniHero - Banners
Post by: dbs on June 21, 2017, 07:18:37 PM
Hi. WB-version, PHP-version, link to the problem?
Title: Re: New module: miniHero - Banners
Post by: sky writer on June 21, 2017, 07:31:43 PM
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.
Title: Re: New module: miniHero - Banners
Post by: dbs on June 21, 2017, 07:38:11 PM
Short tested in a local environment 2.10 with PHP5.6: works also.
Hope you find the reason.
Title: Re: New module: miniHero - Banners
Post by: Ruud on June 22, 2017, 12:44:50 AM
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.

Title: Re: New module: miniHero - Banners
Post by: Ruud on June 22, 2017, 12:47:02 AM
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)
Title: Re: New module: miniHero - Banners
Post by: sky writer on June 22, 2017, 02:02:01 AM
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.
Title: Re: New module: miniHero - Banners
Post by: sky writer on June 22, 2017, 03:33:31 AM
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>
Title: Re: New module: miniHero - Banners
Post by: Ruud on June 22, 2017, 10:29:32 AM
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.
Title: Re: New module: miniHero - Banners
Post by: sky writer on June 22, 2017, 04:53:18 PM
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 (http://foundation.zurb.com/sites/docs/javascript.html)
That state:
Quote
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!
Title: Re: New module: miniHero - Banners
Post by: Ruud on June 26, 2017, 03:02:39 PM
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/
Title: Re: New module: miniHero - Banners
Post by: johnbroeckaert on June 26, 2017, 04:16:45 PM
SUPER!!
Title: Re: New module: miniHero - Banners
Post by: sky writer on June 26, 2017, 05:28:03 PM
Raising the bar yet again.   (Y)

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?
Title: Re: New module: miniHero - Banners
Post by: Ruud on June 26, 2017, 05:44:15 PM
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">

Title: Re: New module: miniHero - Banners
Post by: dbs on June 26, 2017, 05:54:58 PM
Next cool feature, THANKS Ruud.  (Y)

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?
Title: Re: New module: miniHero - Banners
Post by: sky writer on June 26, 2017, 05:56:57 PM
Thanks!
Title: Re: New module: miniHero - Banners
Post by: dbs on June 26, 2017, 06:11:49 PM
Quote
What is the trick to see this in backend?
Ok, seems it works if no s or ms is added. Blank numbers works.  :-)
Title: Re: New module: miniHero - Banners
Post by: Ruud on June 26, 2017, 10:51:43 PM
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?

The value in the dropdown is added to a class named "duration" / "delay", so "2s" for duration will generate the class "duration2s" (for the delay it will generate "delay2s") and added to the caption element.
In the frontend.css .duration2s {} is set (1s up to 8s for duration and delay).

You cannot set $secs[] = '0.5s'; because that would create a class="delay0.5s" which is not selectable in css (.5s would become another selector).
Also, the table field to store the data is only 3 bytes, so the 4 bytes "0.5s" is not stored correctly.
So, if timing is that critical and you really want 1.5s, just change the value for 1s or 2s selector in the frontend.css.

No value (or a non existing class) will use the default timing values used in animate.css.

Title: Re: New module: miniHero - Banners
Post by: dbs on June 27, 2017, 08:56:02 AM
Thanks for explanations.
Tests with 0.8 was not successfully because the escaping in css of dot in .duration0\.8 seems not to work.
Now i test .duration800 (ms)
Code: [Select]
<?php //color the code
// in functions.php
$secs[] = '800'; ...
// in frontend.css
.minihero .duration800 {-webkit-animation-duration0.8s;animation-duration0.8s;}
...


For effects like fade-in-left the .minihero needs a overflow:hidden. Else the animation start visible outside.
Title: Re: New module: miniHero - Banners
Post by: astricia on July 06, 2017, 10:36:36 AM
What size should the image be to be rendered in an optimal way? I tried using a header image with 2500 x 900 px, but it cuts off pieces off the image at the top and bottom - and in the responsive version (smartphone display) it cuts off stuff from the left and right, which makes it look even stranger.

Thanks for any hints!

Astrid
Title: Re: New module: miniHero - Banners
Post by: Ruud on July 06, 2017, 10:57:12 AM
There is no "one size" that is optimal. The screens used are all different in size and ratios.

- If the parallax functionality is used the image must be scaled higher than the viewport for the image because it needs to scroll.

- If the parallax function is not used, the browsers "background-size: cover" is used and the browser will scale the image to best possible sizes.

There will always be portions of your image not visible when scaling your screensize or testing on other devices. This is the nature of responsive design.
Title: Re: New module: miniHero - Banners
Post by: Gast on July 18, 2017, 02:20:04 PM
at first: thanks for your work here   (Y)

the module makes problems in mysql-strict mode. in add.php you have to defined values for all fields with a not defined default value (in this case the fields "text1" && "text2"

original-Code
$database->query("INSERT INTO ".TABLE_PREFIX."mod_minihero (`page_id`,`section_id`) VALUES ('$page_id','$section_id')");

my fix
$mod_hero = 'INSERT INTO `'.TABLE_PREFIX.'mod_minihero` SET '
       . ' `section_id` = '.(int)$section_id.', '
       . ' `page_id` = '.(int)$page_id.', '
                   . ' `text1` = \'\', '
                   . ' `text2` = \'\' ';
$database->query($mod_hero);

in attachement a german translation, feel free to use it
Title: Re: New module: miniHero - Banners
Post by: Ruud on July 19, 2017, 11:44:42 AM
my fix
...
in attachement a german translation, feel free to use it
...
Thanks,

Both will be in the next version..
Title: Re: New module: miniHero - Banners
Post by: sky writer on January 11, 2018, 08:51:44 PM
I have been using minihero and miniform on a site in a local WBPortable (Wb-Portable-2.8.3-SP7) install.  All has been working wonderfully.  PHP-Version: 5.6.26  / WebsiteBaker-Version: 2.10.0

Yesterday I noticed there was a new version of WBPortable available.  I downloaded Wb-Portable-2.10.x-php56.zip and unzipped.  Since I have all of my local test sites (dozens) in the root folder of my previous WBPortable version, the folder size is very large.  So, instead of copying this massive folder over to the new Portable root folder, I copied all the updated files from the Wb-Portable-2.10.x-php56 folder over my old Wb-Portable-2.8.3-SP7 folder.

Today, I opened a site I've been working on, with minihero and miniform installed and problems appeared.  I'll try to explain.

First, here are the error messages:
Quote
[11-Jan-2018 17:54:38 Etc/UTC] PHP Fatal error: Call to a member function fetchRow() on null in G:\Website\Wb-Portable-2.10.x-php56\root\mysite2.10.0\modules\minihero\modify.php on line 34r
[11-Jan-2018 17:55:00 Etc/UTC] PHP Fatal error: Call to a member function fetchRow() on null in G:\Website\Wb-Portable-2.10.x-php56\root\mysite2.10.0\modules\minihero\view.php on line 19r


So, I checked my database, and although the module names are in the left column tree, the tables are gone:
(https://i.gyazo.com/9526cf11e666b05a71b891d020bdfcc3.png)

I checked all my other sites, modules and databases, but everything looks fine.  This site seems to be the only one affected, and only the data of these two modules seems to be missing.

I checked "...\mysql\data\mywebsite\wb_mod_minihero.ibd  and all the text data I had entered in minihero is in there.

Is there anything you know about how your modules function which might have resulted in this error?  Or might you suggest how this might have happened from a user error perspective... or how I might repair it.  I am only asking you here, because it appears only your two modules have been affected.

Thank you.
Title: Re: New module: miniHero - Banners
Post by: Ruud on January 11, 2018, 11:19:10 PM
Is there anything you know about how your modules function which might have resulted in this error?  Or might you suggest how this might have happened from a user error perspective... or how I might repair it.  I am only asking you here, because it appears only your two modules have been affected.

No, there is nothing special here.
The errorlines show that the module is not able to get the settings for that section, but that seems obvious looking at your phpmyadmin output.

First of all: I have no experience using wb-portable.
I could imagine the mysqlserver used now is a different version compared to the previous one you were using.
But the bottom line is : I never seen this, and have no idea how to fix it. (maybe just uninstall/reinstall?)
Title: Re: New module: miniHero - Banners
Post by: sky writer on February 08, 2018, 08:01:49 PM
Does this module work under PHP 7.1?

I have it working under PHP 5.6, but I installed it on a WB Portable PHP 7.1 and it doesn't seem to add any new tables.

When I add add a minihero banner section, the dialogues are all blank:

(https://i.gyazo.com/340bdc29264e7a829a31e6989da555f0.png)

as opposed to my 5.6 install, which shows a height of 450 and parallax by default:

(https://i.gyazo.com/e6a9a036d5ca608c5f51d9a62ee29c03.png)

I can upload an image.  And when I enter data in the dialogues and save, it shows "Page Saved Successfully", but when I go to the section again everything is blank.

Additional info:
I just tried adding minihero module to another WB Portable PHP 7.1 test site, and the install works, and I can add it as a section.  But there is no minihero table at all in the database.  And clicking any of the module buttons (Settings, Upload Image, Current Image) in the admin results in no action.
Title: Re: New module: miniHero - Banners
Post by: sky writer on February 08, 2018, 08:40:35 PM
Sorry, I neglected to provide more info.

Working on site:
 PHP-Version: 5.6.26
WebsiteBaker-Version: 2.10.0

Not working on site:
 PHP-Version: 7.1.0
WebsiteBaker-Version: 2.10.0
Title: Re: New module: miniHero - Banners
Post by: Ruud on February 08, 2018, 11:03:23 PM
The module did not work well with MySQL strict mode.
This and some more issues arenow fixed in v0.4
Also more - fun - animations are available. See the demo page.

Download v0.4: https://dev4me.com/modules-snippets/opensource/minihero-banners/

Demo of some new animations: https://dev4me.com/modules-snippets/opensource/minihero-banners/parallax-demo/
Title: Re: New module: miniHero - Banners
Post by: sky writer on February 09, 2018, 12:46:28 AM
I did read jacobi22's post - https://forum.WebsiteBaker.org/index.php/topic,30352.msg211872.html#msg211872
But I didn't realize that WB Portable with PHP 7.1 was in strict mode.  Actually I don't even know what any of this means  :) .

Your new version works as expected in WB Portable PHP7.1.  Thank you very much!
Title: Re: New module: miniHero - Banners
Post by: astricia on April 25, 2018, 09:41:04 PM
I just downloaded the 0.4 version of MiniHero - but there is no magic.css file in the zip-folder. Neither is there the animate.css that was in the previous 0.3 version. Did I miss something?

Thanks,
Astrid
Title: Re: New module: miniHero - Banners
Post by: Ruud on April 25, 2018, 10:48:49 PM
I just downloaded the 0.4 version of MiniHero - but there is no magic.css file in the zip-folder. Neither is there the animate.css that was in the previous 0.3 version.
Both of them are now included in the frontend.css itself.
Title: Re: New module: miniHero - Banners
Post by: astricia on April 26, 2018, 10:49:11 AM
I just downloaded the 0.4 version of MiniHero - but there is no magic.css file in the zip-folder. Neither is there the animate.css that was in the previous 0.3 version.
Both of them are now included in the frontend.css itself.

Are you sure? My frontend.css has 122 lines - there is no definition for any of the effects .... ???
Title: Re: New module: miniHero - Banners
Post by: Ruud on April 26, 2018, 11:08:34 AM
Yes, I'm sure :-)

In the bottom of frontend.css you will see
Code: [Select]
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */
.animated{animation-duration:1s;animation-fill-mode:both}....... very long line....

/*
Magic - Ver 1.2.0 - https://minimamente.com
Licensed under the MIT license
Copyright (c) 2016 Christian Pucci
*/
.magictime{animation-duration:1s;animation-fill-mode:both}...... very long line....

Those are the minified animate.css and magic.css
Title: Re: New module: miniHero - Banners
Post by: astricia on April 26, 2018, 11:19:35 AM
Ahh... yes, found it. Somehow the file wasn't updated when I updated the module from 0.3 to 0.4. And I guess I could now delete the animate.css which still sits in the module folder.
Title: Re: New module: miniHero - Banners
Post by: Ruud on April 26, 2018, 11:22:40 AM
And I guess I could now delete the animate.css which still sits in the module folder.
Sure, it will not be used anymore..