Cover tab layout broken using reverse proxy configured to multiple sites. #131

cleberjsantos opened this Issue Jan 17, 2013 · 3 comments

3 participants

Plone Collective member

If we're working with reverse proxy and multiple sites plone and our configuration is like the example below, have problems with layout tab and is bad performance to load CSS files.

Reproduce the error.
  1. Configure an webserver eg: Nginx
    server {
        listen 80;

        if ($http_host != ""){
            rewrite ^/(.*)$1 permanent;

        location ~ /\. {
            deny  all;

        location / {
            rewrite ^/(.*) /VirtualHostBase/http/$server_name:80/plone/VirtualHostRoot/_vh_subplone/$1 break;

        location ^~ /subplone {
            rewrite ^/subplone/?(.*) /VirtualHostBase/http/$server_name:80/otherplone/VirtualHostRoot/_vh_subplone/$1 break;
  1. First, go directly to the instance and add a cover, then we'll open the two Plone sites in the browser

    • http://localhost:8081/plone/my_cover
    • http://localhost:8081/otherplone/my_other_cover
  2. Until the second step we have no problem, now we access the Plone sites through the Nginx server.

The first problem.
  1. Clicking on the tab layout realized that some icons are not loaded.
    • This problem is related to how the CSS ++resource++collective.cover/layout_edit.css is loaded in this guide, and with the way he makes call images.

Another problem is that when we call the CSS or JavaScript files directly within templates, we fail to maintain a better performance on the site, and also run the risk of making these cache files for much longer than necessary.

The correct way is to register all resources on the portal_css and portal_javascript.

Suggested correction.
--- a/src/collective/cover/static/layout_edit.css
+++ b/src/collective/cover/static/layout_edit.css
@@ -94,14 +94,14 @@

 #content .layout .config-tile-link .config-icon {
-    background: transparent url(/++resource++collective.cover/conf.png) no-repeat center center;
+    background: transparent url(++resource++collective.cover/conf.png) no-repeat center center;
     height: 24px;
     width: 24px;
     display: block;

 #content .layout .resizer {
-    background: transparent url(/++resource++collective.cover/resize.png) no-repeat center center;
+    background: transparent url(++resource++collective.cover/resize.png) no-repeat center center;
     height: 24px;
     width: 24px;
     display: block;
@@ -223,7 +223,7 @@
     border-left:1px dashed #CCCCCC;
     border-bottom:1px dashed #CCCCCC;    
-    background: #FFF url(/++resource++collective.cover/arrow-right.gif) no-repeat center center;
+    background: #FFF url(++resource++collective.cover/arrow-right.gif) no-repeat center center;

 .remove-column {
@@ -234,7 +234,7 @@
     width: 10px;
     border-left:1px dashed #CCCCCC;
-    background: #FFF url(/++resource++collective.cover/arrow-left.gif) no-repeat center center;
+    background: #FFF url(++resource++collective.cover/arrow-left.gif) no-repeat center center;
 .add-column.disabled {
@@ -250,15 +250,15 @@
     width: 22px;
 #btn-row .icon-white{
-    background: url(/++resource++collective.cover/rows.png) no-repeat 0 0;
+    background: url(++resource++collective.cover/rows.png) no-repeat 0 0;

 #btn-column .icon-white{
-    background: url(/++resource++collective.cover/columns.png) no-repeat 0 0;
+    background: url(++resource++collective.cover/columns.png) no-repeat 0 0;

 #btn-tile .icon-white{
-    background: url(/++resource++collective.cover/tiles.png) no-repeat 0 0;
+    background: url(++resource++collective.cover/tiles.png) no-repeat 0 0;

--- a/src/collective/cover/templates/
+++ b/src/collective/cover/templates/
@@ -26,11 +26,6 @@


-<metal:styles fill-slot="style_slot">
-  <link rel="stylesheet" type="text/css" media="screen" href=""
-      tal:attributes="href string:${view/static}/layout_edit.css" />
 <metal:main fill-slot="main">
     <form action="." tal:attributes="action request/URL" method="post"

--- a/src/collective/cover/profiles/default/cssregistry.xml
+++ b/src/collective/cover/profiles/default/cssregistry.xml
@@ -6,4 +6,7 @@
  <stylesheet title="" cacheable="True" compression="safe" cookable="True"
     enabled="1" expression="" id="++resource++collective.cover/bootstrap.min.css" media="screen"
     rel="stylesheet" rendering="import"/>
+ <stylesheet title="" cacheable="True" compression="safe" cookable="True"
+    enabled="1" expression="" id="++resource++collective.cover/layout_edit.css" media="screen"
+    rel="stylesheet" rendering="import" applyPrefix="True"/>
Plone Collective member

In suggestion of correction follows just one example, even in the same file are called file javascript, other files also is necessary an revision and fix.

@Quimera Quimera was assigned Jan 17, 2013
Plone Collective member

thanks a lot! @Quimera will be responsible for reviewing this

Plone Collective member

@Quimera I draw attention to the attribute applyPrefix="True" in cssregistry.xml

@hvelarde hvelarde closed this Mar 21, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment