I am thinking that pages containing images would load faster, if the images were scaled to a maximum 640x853 dimensions. I have a patch that does this. If you spot any problems please point them out.

Additionally, I would like the image appearing in the question or answer, to be a link to the original image. How do I achieve this? Where is it img= ... code rendered so that I can add an href?

diff -r 0e1e1886daf3 forum/views/writers.py
--- a/forum/views/writers.py    Tue Aug 09 09:41:43 2011 +0200
+++ b/forum/views/writers.py    Tue Aug 09 10:16:50 2011 +0200
@@ -20,6 +20,8 @@

from vars import PENDING_SUBMISSION_SESSION_ATTR

+from PIL import Image
+
 @csrf_exempt
 def upload(request):#ajax upload file to a question or answer
     class FileTypeNotAllow(Exception):
@@ -31,6 +33,24 @@

xml_template = "<result><msg><![CDATA[%s]]></msg><error><![CDATA[%s]]></error><file_url>%s</file_url></result>"

+    def scale_dimensions(width, height, longest_width, longest_height):
+        if width > height:
+            if width > longest_width:
+                ratio = longest_width*1./width
+                return (int(width*ratio), int(height*ratio))
+            elif height > longest_height:
+                ratio = longest_height*1./height
+                return (int(width*ratio), int(height*ratio))
+        else:
+            if height > longest_height:
+                ratio = longest_height*1./height
+                return (int(width*ratio), int(height*ratio))
+            elif width > longest_width:
+                ratio = longest_width*1./width
+                return (int(width*ratio), int(height*ratio))
+
+        return (width, height)
+
     try:
         f = request.FILES['file-upload']
         # check upload permission
@@ -39,7 +59,9 @@

# check file type
         try:
-            file_name_suffix = os.path.splitext(f.name)[1].lower()
+            (file_name_root, file_name_ext) = os.path.splitext(f.name)
+            file_name_suffix = file_name_ext.lower()
+            file_name_small = file_name_root + '.s' + file_name_ext
         except KeyError:
             raise FileTypeNotAllow()

@@ -55,6 +77,17 @@
         if size > float(settings.ALLOW_MAX_FILE_SIZE) * 1024 * 1024:
             storage.delete(new_file_name)
             raise FileSizeNotAllow()
+        
+        imageImage = Image.open(storage.open(new_file_name))
+        (width, height) = imageImage.size
+        (width_new, height_new) = scale_dimensions(width, height, longest_width=640, longest_height=853)
+        if ( width_new != width or height_new != height ) :
+                (width, height) = (width_new, height_new)
+       resizedImage = imageImage.resize((width, height))
+       new_file_name = storage.open("_".join(file_name_small.split()), 'wb')
+       resizedImage.save(new_file_name)
+       new_file_name.close()
+       new_file_name = storage.get_valid_name("_".join(file_name_small.split()))

result = xml_template % ('Good', '', str(settings.UPFILES_ALIAS) + new_file_name)
     except

UploadPermissionNotAuthorized:

asked 09 Aug '11, 04:29

mgiann's gravatar image

mgiann
71128
accept rate: 33%

I added also some javascript in my original solution which allows to click on the image and view the original. This makes it more complete.

added in the <head> page of the administration panel:

<script type="text/javascript">
$(document).ready(function() {
    var my_re_img_wrap = /.s.(jpg|jpeg|png|bmp)/i;
    $(".answer-body img").each(function() {
        var src = $(this).attr('src').replace(my_re_img_wrap,'.$1');
        var a = $('<a/>').attr('href', src);
        $(this).wrap(a);
    });
   $(".question-body img").each(function() {
        var src = $(this).attr('src').replace(my_re_img_wrap,'.$1');
        var a = $('<a/>').attr('href', src);
        $(this).wrap(a);
    });
});
</script>
(09 Aug '11, 19:19) mgiann

I am thinking of submitting the question as a feature request. Are there any others interested on this feature?

(24 Aug '11, 07:45) mgiann

I had a similar question. So I added FancyBox support to the images. This allows an image to appear as a small inline image in the flow of the page. When you click on the image, it expands to a full size in a pop up dialog.

Fancybox can be found here: fancybox.net

Rather than modify the writer.py file, I used JQuery to find all of the image links in the questions/answers and replaced everything on the fly at the browser. This has the added advantage of working on javascript disabled browsers. In those cases, the images just appear full size inline.

Here are the changes I wrote to add FancyBox at the browser:

--- a/forum/skins/default/templates/question.html
+++ b/forum/skins/default/templates/question.html
@@ -84,6 +84,8 @@
                 }
             </style>
         </noscript>
+\\\\r
+       <link rel="stylesheet" href="/m/default/media/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
 {% endblock %}

{% block content %}
@@ -319,5 +321,28 @@
 {% endblock %}

{% block endjs %}
+    <script type="text/javascript" src="/m/default/media/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
+    <script type="text/javascript" src="/m/default/media/fancybox/jquery.easing-1.4.pack.js"></script>
+    <script>
+       $(".question-body img").wrap(function() { 
+            return '<a title="Click this image to see it full size" href="' + $(this).attr('src') + '" />'; 
+        });
+
+        $(".question-body a:has(img)").fancybox({
+               'titleShow'     : false
+        });
+    </script>
+    <style>
+       .question-body img {
+           padding: 1px 1px 1px 1px;
+           border-width: 1px;
+           border-style: none;
+       }
+        .question-body img:hover {
+           padding: 0px 0px 0px 0px;
+           border-color: blue;
+           border-style: solid;
+       }
+    </style>
 {% endblock %}
 <!-- end question.html -->
link

answered 09 Aug '11, 17:36

JonathanB's gravatar image

JonathanB
261411
accept rate: 22%

Thank you for mentioning fancybox. I will look into it.

If I understand correctly, the page loads the full image but it displays it in a smaller dimension. So, the download occurs. Right?

(09 Aug '11, 19:18) mgiann
1

That is correct. The original image is downloaded and scaled by the browser.

The site places a limit on the size of the file that can be uploaded. I've set that limit to prevent a huge image from being loaded, but still allow manageable ones. If you allow enormous images, that might be a problem.

Also remember that the image is cached by the browser, so you only take the hit once per user.

(09 Aug '11, 19:29) JonathanB
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×144
×39
×14

Asked: 09 Aug '11, 04:29

Seen: 378 times

Last updated: 07 Oct '11, 04:51

powered by OSQA