Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Python Image Resize

How it works

  1. Upload image to the server.
  2. Image is resized when it is stored on the server.

Jump to Complete Example

Image Upload

The Server Upload section describes the steps to upload an image to a server. Resizing images on the editor only changes the size displayed in the browser. Changing the physical size of an image occurs on the server side.

Resize Image

The editor's Python SDK uses the Python Wand-Py library transform method to resize images before storing them on disk. You can use all the options available for it.

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>
  new FroalaEditor('.selector', {
    // 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))

Do you think we can improve this article? Let us know.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_261329025" 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_1029908741" 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_297233139" 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>