Image Upload Ajax & JoomShaper Helix3 Template / Bootstrap

[MeAppBuilder]

Hello,

I have updated Fabrik from Github.

I am still having problems with Joomshaper Helix 3 Template when using Fabrik Ajax File Upload. CSS of field and cropping window are broke due to Bootstrap 3.3.7 CSS. File upload animated progress bar not working.

I could imagine, fixing this for specific templates is too much work. Is there any way to edit Ajax Upload so it won't interfere with Bootstrap or template CSS? Are you aware of this problem?

Helix3 is a free Joomshaper template. I am also using PageBuilder, which works very nice.

Template using:
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.

 

[MeAppBuilder]

I am using the Ajax Upload for cropping and uploading Joomla Avatar with user profile.

 

[cheesegrits]

I think I have Helix 3 installed, I'll take look as soon as I get time.

I presume you have installed the bs3 overrides?

https://github.com/Fabrik/Fabrik-Joomla-alt-layouts

-- hugh

 

[MeAppBuilder]

I have mentioned this issue like 6 or 8 month ago and haven't checked on it since. I tried override in the past, but it didn't work. I will try your override update today.

Thank you for answering and hinting to github. I will purchase another pro subscription soon to support development.

 

[MeAppBuilder]

Hi cheesegrits,

you guys are awesome. Upload works fine now. Override worked almost perfect. I will attach a screenshot of the current issues:

1. on top there is already the cropping area loaded with form. On the right you can see a close button.
2. opening the cropping still shows a broken cropping window form

 

[MeAppBuilder]

Hello,

I send my page details.

You can test fileupload here: LINK

I have attached another screenshot.

1.
#sc_user___image-widgetcontainer when form loads, the cropping area is already visible

2.
not sure what the sizing of the cropping window should be, but currently (300px/400px) I am having layout issues with the cropping window e.g. button. Also there is no background or border with cropping window

 

[MeAppBuilder]

noticed that when i load the page, the save button of the cropping window is cut off. when i activate chrome inspector (F12), and close inspector, button is visible.

 

[cheesegrits]

This commit should get rid of the extraneous markup:

https://github.com/Fabrik/Fabrik-Joomla-alt-layouts/commit/f36bab5fd5bb8fc0a56f5c2ca011ed0cb8036fad

Looking at the other issues now, getting my Helix 3 on ...

-- hugh

 

[MeAppBuilder]

...never mind...I was looking at the wrong folder structure...

 

[MeAppBuilder]

this is what it looks like after I have applied the fix.

1. when I open and close inspector (chrome F12), button is displayed correct.
2. zoom and rotate options are visible at top when form is loaded. this option seems to have no function and I get the same option a second time once image is uploaded
3. there is an additional upload button next to file select button. when I select my files, those are uploaded right away. not sure why there is an additional "start upload" button.

 

[cheesegrits]

Yeah, I haven't gotten that far yet, just removed the junk that shouldn't have been there in the main layout. Been busy with other issues today.

-- hugh

 

[cheesegrits]

OK, done a little more work on this.

2. zoom and rotate options are visible at top when form is loaded. this option seems to have no function and I get the same option a second time once image is uploaded

Are you sure you loaded up the latest version of the bs3 layouts, with this fix:

https://github.com/Fabrik/Fabrik-Joomla-alt-layouts/commit/f36bab5fd5bb8fc0a56f5c2ca011ed0cb8036fad

... as per post #8 in this thread? As you can see if you look at that commit, it definitely removes those extraneous controls from the main markup.

3. there is an additional upload button next to file select button. when I select my files, those are uploaded right away. not sure why there is an additional "start upload" button.

OK, that's a leftover from before we added code that automagically kicks off the uploads, that was in the stock layout when we copied it to the bs3 repo. I removed it in this commit:

https://github.com/Fabrik/Fabrik-Joomla-alt-layouts/commit/f5edf17eaf934c907a917204c87ef7df4061c5e3

And ... as for the lack of border and the transparency, for some reason the Helix3 bootstrap CSS class for 'modal' doesn't include any background or border styling. So it looks like I may have to create a little Helix3 folder in the alt layouts repo. For now, try creating this ...

<?php
/**
 * Created by PhpStorm.
 * User: rob
 * Date: 21/01/2016
 * Time: 16:49
 */

$d = $displayData;

$handleClass = 'handlelabel';

if (!$d->modal)
{
    $handleClass .= ' draggable';
    $windowClass = 'fabrikWindow modal';
} else {
    $windowClass = 'fabrikWindow-modal modal';
}

$footer = isset($d->footer) ? $d->footer : '';

?>

<div id="<?php echo $d->id; ?>" class="<?php echo $windowClass;?>" style="border: 1px solid rgba(0,0,0,0.3);border-radius: 6px;box-shadow: 0 3px 7px rgba(0,0,0,0.3);    background-color: #fff;">
    <div class="modal-header">
        <h3 class="<?php echo $handleClass; ?>" data-role="title">
            <?php echo $d->title; ?>
        </h3>
        <?php if (!$d->modal && $d->expandable !== false) : ?>
            <a class="expand" href="#" data-role="expand">
                <span class="icon-full-screen icon-expand"></span>
            </a>
        <?php endif; ?>
        <a href="#" class="closeFabWin" data-role="close">
            <span class="icon-cancel icon-remove-sign"></span>
        </a>
    </div>
    <div class="contentWrapper">
        <div class="itemContent">
            <div class="itemContentPadder">
                <?php echo $d->content; ?>
            </div>
        </div>
    </div>
    <?php if (!$d->modal || $footer !== '') : ?>
        <div class="bottomBar modal-footer">
            <?php echo $footer;?>
        </div>
        <?php if (!$d->modal) : ?>
        <div class="ui-resizable-n ui-resizable-handle"></div>
        <div class="ui-resizable-s ui-resizable-handle"></div>
        <div class="ui-resizable-e ui-resizable-handle"></div>
        <div class="ui-resizable-w ui-resizable-handle"></div>
        <div class="ui-resizable-nw ui-resizable-handle"></div>
        <div class="ui-resizable-ne ui-resizable-handle"></div>
        <div class="ui-resizable-se ui-resizable-handle"></div>
        <div class="ui-resizable-sw ui-resizable-handle"></div>
    <?php endif;
    endif; ?>
</div>

... in ...

.\templates\shaper_helix3\html\layouts\com_fabrik\fabrik-modal.php

... which adds the necessary styling to our modal popups. That should fix it for all modals, not just this one.

I'm working on the other issues - buttons and sizing - now.

-- hugh

 

[MeAppBuilder]

I have updated fabrik und bootstrap 3 alt layout (github) today. It's perfect!!! You are the master of the univers

 

[cheesegrits]

Yay!

I think there may still be an issue with the height of the popup sometimes chopping off the button, as we are adding a set number of pixels to the main container to accommodate things like the modal-header, and in Helix3 the vertical padding inside the modal-header is bigger. I'm looking at making the way we size that main container to be more dynamic, rather than just a fixed number of pixels.

-- hugh

 

[MeAppBuilder]

just some cosmetics, but...

...this shows how professional you treat this/your extension.

Most developers pack their extension with nice features, but don't even consider the value of those little things (translation, design (black,grey,white), layout, ease of use, snyc with Joomla, updates, payed support, mobile compatibility).

I am so happy developing with this extension, because everything fits 100% and your backend is very intuitive, once you understood how powerful this extension is. You solve problems ahead, before they even happen. I would rate it again 100% at Joomla Extensions anytime.

 

[cheesegrits]

Thank you for the kind words!

It's funny, I quite often surprise myself with what Fabrik can do. Either when developing an app directly for a client, and finding "hey, I forget we could do <insert thing here> out of the box!", or answering questions on the forum, finding built in ways to do quite complex things.

It's far from perfect, and there will always be bugs and stuff that doesn't work quite right, but it's a living thing ... constantly evolving, and we try and fix issues that people find as quickly as we can. Especially for paid subscribers, which is what keeps the lights burning.

-- hugh

 

[MeAppBuilder]

Just a suggestion

Why not integrate the cropping window into form, instead of using a popup? This might be more useful for mobile view as well and you don't have to handle the popup window height. Can't say how much workload this would be, but this could be a good approach. See attached image and Github Cropper

I am currently working with a fixed height for popuop cropping window. This will show the SAVE button with Helix3 template.

 

[cheesegrits]

I have looked at Cropper before, it's on my list of things to look at. And yes, it would be nice to get rid of the popup, and all the code that goes with building it, and our own cropping code.

I'd also kind of like to get rid of all of the server side crop handling, where we submit cropping data with the image and do the crop on the server, and do it all in the browser with html5.

But it'd be a lot of work ...

-- hugh

 

[MeAppBuilder]

just to read that this is on the dev map is great. For now cropping works as expected

 

[cheesegrits]

It's one of those things I'll probably do if and when someone wants it badly enough to fund it, or at least contribute.

Sent from my HTC 10 using Tapatalk