schmidt1024/Blank

No styles in modal popup of insert image button frontend editing

Closed this issue · 2 comments

I'm on J!3.0.3 with latest Blank-Template version.

I have strange behaviour of the insert image popup when editing articles on the frontend. This happens with two of my templates based on Blank-Template.

When I hit the "Image" button below the editor in the frontend, the insert image dialogue has no css styles:
img-dialogue-modal

With protostar template all is fine.

I also get 2 errors in the console when I hit the "Image" button below the editor window:
GET http://gastraserver/glasow-3d/templates/glasow/css/default/print.css?v=1 404 (Not Found)
Uncaught TypeError: Object [object Window] has no method 'addEvent' , popup-imagemanager.js:288
The Uncaught TypeError also appears with protostar template.

The insert image dialogue loads in an iframe. I have compared the content of the html in the iframe with my template and protostar template.
With protostar, where everything is fine, the template.css gets loaded in the iframe:

In my template it doesn't. Instead it is loading print.css (which doesn't exist):

It must be the call to the wrong css that causes the problem.

I don't have any clue why this happens and how to fix it.

Can you confirm this behaviour or tell me how to load the template.css in the html that is in the iframe?

I can reproduce this behaviour on a clean install of J!3.0.3 with Blank Template 2.0.1 and sampledata.

Blank Template:
In frontend editing the insert image popup has no styles applied.
2013-02-22--1361569253_840x551_scrot

In iframe print.css gets loaded instead of template.css
2013-02-22--1361570612_263x130_scrot

Protostar template
In frontend editing the insert image popup has styles applied.
2013-02-22--1361569931_846x557_scrot

In iframe template.css gets loaded
2013-02-22--1361569906_266x220_scrot

With or without bootstrap enabled, same results.

Maybe the problem lies somewhere within logic.php? But this is just a wild guess.

In der Datei template.css von Protostar sind sämtliche Bootstrap-Definitionen enthalten, so dass die Ansicht im Frontend-Editor dementsprechend aussieht. Ich habe entschieden, das Bootstrap-Framework fürs Editieren zu implementieren, auch wenn es im BT nicht aktiviert ist, einfach um das Benutzen des Editors zu vereinfachen.

component.php

$doc->addStyleSheet($tpath.'/css/bootstrap.min.css');
$doc->addStyleSheet($tpath.'/css/bootstrap-responsive.min.css');

Neuer Override

/html/com_content/form/edit.php