New module: miniHero - Banners

[Ruud]

And I guess I could now delete the animate.css which still sits in the module folder.

Sure, it will not be used anymore..

[astricia]

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.

[Ruud]

Yes, I'm sure

In the bottom of frontend.css you will see

Code Select Expand


/*!
* 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

[astricia]

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 ....

[Ruud]

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.

[astricia]

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

[sky writer]

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!

[Ruud]

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/

[sky writer]

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

[sky writer]

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:



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



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.

[Ruud]

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?)

[sky writer]

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:

[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:


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.

[Ruud]

my fix
...
in attachement a german translation, feel free to use it
...

Thanks,

Both will be in the next version..

[Gast]

at first: thanks for your work here   

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

[Ruud]

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.

[astricia]

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

[dbs]

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 Expand

<?php //color the code
// in functions.php
$secs[] = '800'; ...
// in frontend.css
.minihero .duration800 {-webkit-animation-duration: 0.8s;animation-duration: 0.8s;}
...


For effects like fade-in-left the .minihero needs a overflow:hidden. Else the animation start visible outside.

[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 Expand

$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.

[dbs]

What is the trick to see this in backend?

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

[sky writer]

Thanks!

[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 Expand

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

[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 Expand


.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_modfiles('css')".
You could overrule any default frontend.css that way.

Code Select Expand

<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">

[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?

[johnbroeckaert]

SUPER!!

[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/