widelands-dev team mailing list archive

[kaputtnik <somal@xxxxxxxx>]

kaputtnik has proposed merging lp:~franku/widelands-website/handle_big_images into lp:widelands-website.

Requested reviews:
  Widelands Developers (widelands-dev)

For more details, see:
https://code.launchpad.net/~franku/widelands-website/handle_big_images/+merge/247235

This branch has following features:

1. Fix https://bugs.launchpad.net/widelands-website/+bug/1408398 (Update Copyrightstatement)

2. Fix breaking website layout with wide pictures:

 2.a. Forum: Great pictures do not more break the style. They get a size to fit the hole width of the post area. I added code to change each external image link in a clickable image link, if it is not yet a clickable link. This has a disadvantage: Little images gets clickable too. But i think this is acceptable. Advantage: Great images could be seen in full size if you click on it; There is no need to learn the complicated syntax for cklickable links. On old (saved) posts, the modification will do not work, you have to edit and save the old post to get the clickable links.

 2.b. Wiki: Great images do not break the style. On the edit page i changed the image table from a 3 column table to a 2 column table and put the "code to include" cell below the picture. This cell is wider so that there is more space for the "code to include". The code to include depends on image width: If the image is greater than 700px the code to include reflects a clickable image, otherwise a normal code. The value of "700px" is retrieved from the real place if the browser window is shrinked to size the website looks still normal. Image- "Filesize", "width" and "height" are now displayed. Each image gets an own table with "Image Properties" and " Image" as column header.

Some technical: To prevend that wide images break the style,the table-layout must be set to "fixed". Because different pages on the website uses tables, i tried to minimize the scope of this fixed table-layout to the css-class ".forum" in forum.css. But unfortunaly some pages do also use this class. I tried to test every page (like "maps", "poll", "profile", ...) but i am not sure of getting all the pages. Where i found misaligned tables wich uses the ".form" class, i fixed them.

For me, the main goal is to fix https://bugs.launchpad.net/widelands-website/+bug/338332 but this would be a lot of work and the provided solution here is a little workaround for big images.
-- 
Your team Widelands Developers is requested to review the proposed merge of lp:~franku/widelands-website/handle_big_images into lp:widelands-website.

=== modified file 'mainpage/templatetags/wl_markdown.py'
--- mainpage/templatetags/wl_markdown.py	2015-01-08 21:40:25 +0000
+++ mainpage/templatetags/wl_markdown.py	2015-01-21 22:18:22 +0000
@@ -131,6 +131,16 @@
 
     return None
 
+def _clickable_image( tag ):
+    # is external link?
+    if tag["src"].startswith("http"):
+        # is allways a link?
+        if tag.parent.name != 'a':
+            # add link to image
+            text = "<a href=" + tag["src"] +"><img src=" + tag["src"] + "></a>"
+            return text
+    return None
+
 custom_filters = {
     # Wikiwordification
     # Match a wiki page link LikeThis. All !WikiWords (with a !
@@ -188,12 +198,18 @@
     soup = BeautifulSoup(unicode(soup)) # What a waste of cycles :(
 
     # We have to go over this to classify links
-    
     for tag in soup.findAll("a"):
         rv = _classify_link(tag)
         if rv:
             for attribute in rv.iterkeys():
                 tag[attribute] = rv.get(attribute)
+
+    # All external images gets clickable
+    # This applies only in forum
+    for tag in soup.findAll("img"):
+        link = _clickable_image(tag)
+        if link:
+            tag.replaceWith(link)
     
     return unicode(soup)
 

=== modified file 'media/css/forum.css'
--- media/css/forum.css	2012-05-04 19:07:35 +0000
+++ media/css/forum.css	2015-01-21 22:18:22 +0000
@@ -1,6 +1,7 @@
 .forum {
 	border: none; 
 	border-collapse: collapse;
+	table-layout: fixed;
 	width: 100%;
 }
 

=== modified file 'media/css/maps.css'
--- media/css/maps.css	2012-05-08 21:52:15 +0000
+++ media/css/maps.css	2015-01-21 22:18:22 +0000
@@ -1,3 +1,10 @@
+table.maps {
+	border-collapse: collapse;
+}
+table.maps .first-column{
+	min-width: 20%;
+}
+
 img.minimap {
 	max-height: 250px;
 }
@@ -6,15 +13,16 @@
 	margin: 0px 10px 10px 0px;
 }
 
-.forum table td {
+.maps table td {
 	padding: 2px;
 }
 
-.forum td {
+.maps td {
 	vertical-align: top;
+	padding: 8px;
 }
 
-.forum .spacer {
+.maps .spacer {
 	width: 15px;
 }
 

=== modified file 'media/css/wiki.css'
--- media/css/wiki.css	2015-01-07 13:49:21 +0000
+++ media/css/wiki.css	2015-01-21 22:18:22 +0000
@@ -73,6 +73,12 @@
 	height: 100px;
 }
 
+table.images {
+	table-layout: fixed;
+}
+table.images .first-column {
+	width: 25%;
+}
 /***********/
 /* Headers */
 /***********/

=== modified file 'templates/footer.html'
--- templates/footer.html	2013-06-12 06:25:52 +0000
+++ templates/footer.html	2015-01-21 22:18:22 +0000
@@ -7,5 +7,5 @@
 {% endcomment %} 
 
 <div id="footer">
-	Copyright &copy; 2009 - 2013 By the Widelands Development Team
+	Copyright &copy; 2009 - 2015 By the Widelands Development Team
 </div>

=== modified file 'templates/wiki/edit.html'
--- templates/wiki/edit.html	2012-05-05 08:27:46 +0000
+++ templates/wiki/edit.html	2015-01-21 22:18:22 +0000
@@ -95,25 +95,43 @@
 	{% else %}
 		{% if images.count %}
 		Images attached to this article:
-		<table width="100%">
+		
+		{% for img in images %}
+		<table width="100%" class="images">
 		<thead>
 			<tr>
-				<th>Image Title</th>
+				<th class="first-column">Image Properties</th>
 				<th>Image</th>
-				<th>Code to include</th>
 			</tr>
 		</thead>
 		<tbody>
-			{% for img in images %}
 			<tr>
-				<td>{{ img.name }}</td>
+				<td>
+					<span class="grey">Name:</span><br />
+					{{ img.name }}<br />
+					<span class="grey">Filesize:</span><br />
+					{{ img.image.size|filesizeformat }}<br />
+					<span class="grey">Width:</span><br />
+					{{ img.image.width }} px<br />
+					<span class="grey">Height:</span><br />
+					{{ img.image.height }} px
+					
+				
 				<td><img src="{{ img.url }}"></td>
-				<td>![{{img.name}}]({{ img.url }})</td>
-			</tr>
-			{% endfor %}
+			</tr>
+			<tr>
+				<td class="grey">Code to include</td>
+				{% if img.image.width > 700 %}
+					<td>[![{{img.name}}]({{ img.url }})]({{ img.url }})</td>
+				{% else %}
+					<td>![{{img.name}}]({{ img.url }})</td>
+				{% endif %}
+			</tr>
+		
 		</tbody>
 		</table>
-		{%endif%}
+		{% endfor %}
+		{% endif %}
 
 		{% get_upload_form as iform %}
 		<form enctype="multipart/form-data" action="/images/upload/{{content_type}}/{{object_id}}/{{request.path|iriencode}}" method="POST">

=== modified file 'templates/wlmaps/index.html'
--- templates/wlmaps/index.html	2014-07-21 15:29:30 +0000
+++ templates/wlmaps/index.html	2015-01-21 22:18:22 +0000
@@ -19,10 +19,10 @@
 	{% autopaginate maps maps_per_page %}
 	{% paginate %}
 	<br />
-	<table class="forum">
+	<table class="maps">
 		{% for map in maps %}
 		<tr class="{% cycle "odd" "even" %}">
-			<td><a href="{{ map.get_absolute_url }}"><img class="minimap" src="{{ MEDIA_URL }}{{ map.minimap.url }}" alt="{{ map.name }}" /></a></td>
+			<td class="first-column"><a href="{{ map.get_absolute_url }}"><img class="minimap" src="{{ MEDIA_URL }}{{ map.minimap.url }}" alt="{{ map.name }}" /></a></td>
 			<td>
 				<h3><a class="invertedColor" href="{{ map.get_absolute_url }}">{{ map.name }}</a></h3>
 				<table>