Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Python Image Resize

How it works

  1. The image gets uploaded to your server.
  2. When the image is stored to the disk on server side, it is also resized.

Jump to Complete Example

Image Upload

In the Server Upload article we explain the steps to upload image on your server. After you insert an image in the rich text editor, you can resize it, but this only changes the width and height displayed in the browser, and not the physical size of the image. That should be done on server side.

Resize Image

The WYSIWYG editor's Python SDK comes with the possibility to resize the image when it is being stored on the disk. It is using the Python Wand-Py library transform method, therefore all the options available for it can be used.

options = {

  # Find more about resize parameter format on http://www.imagemagick.org/script/command-line-processing.php#geometry
  'resize': '300x300'
}
try:
  response = Image.upload(CustomAdapter(request), '/public/', options)
except Exception:
  response = {'error': str(sys.exc_info()[1])}
return json.dumps(response)

Complete Example

<script>
  $(function() {
    $('.selector').froalaEditor({
      // Set the image upload URL.
      imageUploadURL: '/upload_image_resize',

      imageUploadParams: {
        id: 'my_editor'
      }
    })
  });
</script>
# Django
from django.http import HttpResponse
import json
from froala_editor import Image
from froala_editor import DjangoAdapter

def upload_image_resize(request):
  options = {
    'resize': '300x300'
  }

  try:
    response = Image.upload(DjangoAdapter(request), '/public/', options)
  except Exception:
    response = {'error': str(sys.exc_info()[1])}
  return HttpResponse(json.dumps(response), content_type="application/json")
# Flask
from flask import request
import json
from froala_editor import Image
from froala_editor import FlaskAdapter

@app.route('/upload_image_resize', methods=['POST'])
def upload_image_resize():
  options = {
    'resize': '300x300'
  }

  try:
    response = Image.upload(FlaskAdapter(request), '/public/', options)
  except Exception:
    response = {'error': str(sys.exc_info()[1])}
  return json.dumps(response)
# Pyramid
from pyramid.response import Response
import json
from froala_editor import Image
from froala_editor import PyramidAdapter

def upload_image_resize(request):
  options = {
    'resize': '300x300'
  }

  try:
    response = Image.upload(PyramidAdapter(request), '/public/', options)
  except Exception:
    response = {'error': str(sys.exc_info()[1])}
  return Response(json.dumps(response))
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_176709722" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_33236408" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1858201177" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>