Customise document details to reduce size of web preview

[dnallsopp]

Hi,

The majority of the files we are storing in Alfresco cannot be previewed, and would like to hide the web previewer so that the Document Actions, Properties, etc on the right of the page can use more of the screen space.

I am able to disable flash preview, using the config below, but this doesn't appear to change the layout at all, so we still have a large empty space where the previewer would normally be rendered.

How can I customise the layout of the page to give greater weight to the metadata etc on the right?  I have been looking at css and ftl files in webapps/share/components but so far have not seen an obvious way to adjust this layout (I suspect it's obvious when you know how!).

Any pointers gratefully received…

<config evaluator="string-compare" condition="DocumentDetails" replace="true">
<document-details>
<!– display web previewer on document details page –>
<display-web-preview>false</display-web-preview>
</document-details>
</config>‍‍‍‍‍‍‍

[jpfi]

Hi,
you might change the YUI grid class "yui-gc"in webapps\share\WEB-INF\classes\alfresco\templates\org\alfresco\document-details.ftl (line 18ff):

<div class="yui-gc">
         <div class="yui-u first">
            <#if (config.scoped['DocumentDetails']['document-details'].getChildValue('display-web-preview') == "true")>
               <@region id="web-preview" scope="template"/>
            </#if>
            <@region id="comments" scope="template"/>
         </div>
         <div class="yui-u">
            <@region id="document-actions" scope="template"/>
            <@region id="document-tags" scope="template"/>
            <@region id="document-links" scope="template"/>
            <@region id="document-metadata" scope="template"/>
            <@region id="document-permissions" scope="template"/>
            <@region id="document-workflows" scope="template"/>
            <@region id="document-versions" scope="template"/>
            <@region id="document-publishing" scope="template"/>
         </div>
      </div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

"yui-gc" defines a 2/3 - 1/3 grid (http://developer.yahoo.com/yui/grids/). "yui-g" is a 50:50 grid and "yui-gd" a 1/3 - 2/3 grid.
–> code change for a 50:50 grid:

<div class="yui-g">
         <div class="yui-u first">
            <#if (config.scoped['DocumentDetails']['document-details'].getChildValue('display-web-preview') == "true")>
               <@region id="web-preview" scope="template"/>
            </#if>
            <@region id="comments" scope="template"/>
         </div>
         <div class="yui-u">
            <@region id="document-actions" scope="template"/>
            <@region id="document-tags" scope="template"/>
            <@region id="document-links" scope="template"/>
            <@region id="document-metadata" scope="template"/>
            <@region id="document-permissions" scope="template"/>
            <@region id="document-workflows" scope="template"/>
            <@region id="document-versions" scope="template"/>
            <@region id="document-publishing" scope="template"/>
         </div>
      </div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Of course, you shouldn't change the ftl directly. You should add your own document-details.ftl-file in the classpath alfresco\web-extension\templates\org\alfresco
Cheers, jan

[dnallsopp]

Excellent, that worked first time. Thanks for the detailed help!

Update: now marked as helpful, sorry! (Marked it as SOLVED but forgot to mark the answer too!).

[jpfi]

Great! Did you marked the post as helpful (on the right)?