Merge lp:~franku/widelands-website/handle_great_images into lp:widelands-website

[kaputtnik]

In continuation of https://code.launchpad.net/~franku/widelands-website/handle_big_images/+merge/247235

This branch contain css related changes to prevend that big images destroy the layout of the website.

In Forum all external images gets clickable and big images where automatically limited in size so that they never break the website layout.

In Wiki the changes affects the edit site: Each Image gets an own table with two columns. The "Code to include" is changed in "Code to use in article:" and is found at the bottom of each image table. The "Code to use in article:" depends on the image width: If it is to big, the "Code to use in article:" shows the syntax for a clickable image. See http://home.arcor.de/frank.ue/article_edit.jpg for a comparison to current state.

This branch only works correct, if some former failures to the image path are corrected. So the changes do only work, if the branch https://code.launchpad.net/~franku/widelands-website/admin_action_correct_image_path is merged and the containing admin action is executed.

There is also the branch https://code.launchpad.net/~franku/widelands-website/correct_image_paths which contains little changes to correct the image path for future uploads.

[SirVer (sirver)]

kaputtnik, are all of the prerequisites of this branch now met? Can we merge this?

[kaputtnik (franku)]

Yes :-)

[SirVer (sirver)]

Merged!!! Thanks for your hard work!

[kaputtnik (franku)]

I thank you for taking your time :-)

=== modified file 'mainpage/templatetags/wl_markdown.py'
--- mainpage/templatetags/wl_markdown.py	2015-02-26 20:25:39 +0000
+++ mainpage/templatetags/wl_markdown.py	2015-04-01 20:41:52 +0000
@@ -145,6 +145,17 @@
 
     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 !
@@ -202,13 +213,19 @@
     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	2015-02-24 20:24:59 +0000
+++ media/css/forum.css	2015-04-01 20:41:52 +0000
@@ -12,6 +12,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-04-01 20:41:52 +0000
@@ -1,3 +1,7 @@
+table.maps {
+	border-collapse: collapse;
+}
+
 img.minimap {
 	max-height: 250px;
 }
@@ -6,15 +10,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-04-01 20:41:52 +0000
@@ -73,6 +73,18 @@
 	height: 100px;
 }
 
+table.images {
+	table-layout: fixed;
+}
+
+table.images .first-column {
+	width: 7em;
+}
+
+table.images td {
+	padding: 4px;
+}
+
 /***********/
 /* Headers */
 /***********/

=== modified file 'templates/wiki/edit.html'
--- templates/wiki/edit.html	2015-02-18 22:30:08 +0000
+++ templates/wiki/edit.html	2015-04-01 20:41:52 +0000
@@ -95,25 +95,40 @@
 	{% 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>Image</th>
-				<th>Code to include</th>
+				<th class="first-column" style="text-align: right;">Name:</th>
+				<th>{{ img.name}}</th>
 			</tr>
 		</thead>
 		<tbody>
-			{% for img in images %}
-			<tr>
-				<td>{{ img.name }}</td>
-				<td><img src="{{ img.url }}"></td>
-				<td>![{{img.name}}]({{ img.url }})</td>
-			</tr>
-			{% endfor %}
+			<tr>
+				<td>
+					<span>Properties:</span><br />
+					<span class="grey">Width:</span><br />
+					{{ img.image.width }} px<br />
+					<span class="grey">Height:</span><br />
+					{{ img.image.height }} px<br />
+					<span class="grey">Filesize:</span><br />
+					{{ img.image.size|filesizeformat }}
+				<td  style="vertical-align: middle; text-align: center;"><img src="{{ img.url }}"></td>
+			</tr>
+			<tr>
+				<td class="grey" style="text-align: right;">Code to use in article:</td>
+				{% if img.image.width > 700 %}
+					<td style="text-align: center;">[![{{img.name}}]({{ img.url }})]({{ img.url }})</td>
+				{% else %}
+					<td style="text-align: center;">![{{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	2015-02-18 22:30:08 +0000
+++ templates/wlmaps/index.html	2015-04-01 20:41:52 +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>