[views] Rework HTML and CSS to make large images fit in the content column
authorRémi Cardona <remi.cardona@logilab.fr>
Tue, 09 Jun 2015 14:14:08 +0200
changeset 338 1af467baf4d6
parent 336 b4f7c55dae43
child 339 1cb45c63412f
[views] Rework HTML and CSS to make large images fit in the content column Large images overflow their columns. This is especially visible when using Bootstrap where columns have fixed size (unlike the old main template which uses tables for layout). The main issue is that entity attributes (thus Blog.content) are rendered inside a table by PrimaryView.render_entity_attributes(). Tables have their own sizing algorithm which does not work like other block elements. Manually rendering the blog content outside this table, along with some CSS pixie dust, allows images to be properly fitted inside Bootstrap's grid system. Closes #5450612.
data/cubes.blog.css
views/entry.py
--- a/data/cubes.blog.css	Wed Apr 22 09:13:26 2015 +0200
+++ b/data/cubes.blog.css	Tue Jun 09 14:14:08 2015 +0200
@@ -1,6 +1,13 @@
 div.blogwrapper {
     font-size: 14px;
 }
+div.blogwrapper img {
+    padding: 1em;
+    /* the following 3 lines taken verbatim from bootstrap's .img-responsive */
+    max-width: 100%;
+    display: block;
+    height: auto;
+}
 ul.invisible li {
     background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
 }
--- a/views/entry.py	Wed Apr 22 09:13:26 2015 +0200
+++ b/views/entry.py	Tue Jun 09 14:14:08 2015 +0200
@@ -22,6 +22,7 @@
 
 _pvs = uicfg.primaryview_section
 _pvs.tag_attribute(('BlogEntry', 'title'), 'hidden')
+_pvs.tag_attribute(('BlogEntry', 'content'), 'hidden')
 _pvs.tag_subject_of(('BlogEntry', 'entry_of', '*'), 'relations')
 _afs = uicfg.autoform_section
 _afs.tag_subject_of(('BlogEntry', 'entry_of', 'Blog'), 'main', 'attributes')
@@ -56,8 +57,11 @@
     show_attr_label = False
 
     def render_entity_attributes(self, entity):
+        super(BlogEntryPrimaryView, self).render_entity_attributes(entity)
+        # render the actual blog entry content outside the attributes table
+        # which causes major CSS headaches, see bug #5450612.
         self.w(u'<div class="blogwrapper">')
-        super(BlogEntryPrimaryView, self).render_entity_attributes(entity)
+        self.w(entity.printable_value('content'))
         self.w(u'</div>')
 
     def render_entity_title(self, entity):