Skip to main content

A filerobot image editing widget for Wagtail Image fields.

Project description

filerobot

A wagtail widget to add filerobot image editor to your wagtail fields.

Quick start

  1. Add 'filerobot' to your INSTALLED_APPS setting like this:

    INSTALLED_APPS = [
    ...,
    'filerobot',
    ]
    
  2. Run py manage.py collectstatic

  3. Run py manage.py migrate

  4. Import and use the widget on your model

    from django.db import models
    from wagtail import fields
    from wagtail.models import Page
    from wagtail.admin.panels import FieldPanel
    
    from filerobot.widgets import FilerobotWidget, obj
    from filerobot.blocks import FilerobotBlock as FilerobotBlock
    from filerobot.fields import FilerobotField as FilerobotImageField
    
    
    class HomePage(Page):
        image = models.ForeignKey(
            "wagtailimages.Image",
            null=True,
            blank=True,
            on_delete=models.SET_NULL,
            related_name="+",
        )
    
        # As an automatic foreign key field!
        filerobot_image = FilerobotImageField(
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#tabsids
            tabs=[
                obj.TABS.FINETUNE,
                obj.TABS.FILTERS,
                obj.TABS.ADJUST,
                obj.TABS.WATERMARK,
                obj.TABS.ANNOTATE,
                obj.TABS.RESIZE,
            ],
    
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#annotationscommon
            annotations_common=obj.AnnotationsCommon(
                # fill:            str = None,
                # stroke:          str = None,
                # stroke_width:    int = None,
                # shadow_offset_x: int = None,
                # shadow_offset_y: int = None,
                # shadow_blur:     int = None,
                # shadow_color:    str = None,
                # shadow_opacity:  int = None,
                # opacity:         int = None,
            ),
    
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#Text
            text=obj.Text(
                # text:           str       = None,
                # font_family:    str       = None,
                # fonts:          list[str] = None,
                # font_size:      int       = None,
                # letter_spacing: int       = None,
                # line_height:    int       = None,
                # align:          str       = None,
                # font_style:     str       = None,
                # ...annotations_common
    
            ),
    
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#image
            image=obj.Image(
                # fill:           str                   = None,
                # disable_upload: bool                  = False,
                # gallery:        list[obj.ImageObject] = None,
                # ...annotations_common
            ),
    
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#rect
            rect=obj.Rect(
                # corner_radius: int = None,
                # ...annotations_common
            ),
    
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#ellipse
            ellipse=obj.Ellipse(
                # ...annotations_common
            ),
    
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#polygon
            polygon=obj.Polygon(
                # sides: int = None,
                # ...annotations_common
            ),
    
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#pen
            pen=obj.Pen(
                # stroke_width:                     int   = None,
                # tension:                          float = None,
                # line_cap:                         str   = None,
                # select_annotation_after_drawing:  bool  = None,
                # ...annotations_common
            ),
    
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#line
            line=obj.Line(
                # stroke_width: int = None,
                # line_cap:     str = None,
                # ...annotations_common
            ),
    
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#arrow
            arrow=obj.Arrow(
                # stroke_width:   int = None,
                # line_cap:       str = None,
                # pointer_length: int = None,
                # pointer_width:  int = None,
                # ...annotations_common
            ),
    
            # https://github.com/scaleflex/filerobot-image-editor?tab=readme-ov-file#watermark
            watermark=obj.Watermark(
                # gallery:             list[obj.WatermarkImageObject] = None,
                # text_scaling_ratio:  float                          = None,
                # image_scaling_ratio: float                          = None,
                # hide_text_watermark: bool                           = None,
            ),
    
            # rotate:                                 dict = None,
            # crop:                                   dict = None,
            # crop_preset_folder:                     dict = None,
            # crop_preset_group:                      dict = None,
            # crop_preset_item:                       dict = None,
            # cloud_image:                            dict = None,
    
            # default_tab_id:                         str  = None, # Tabs defined in constants.py
            # default_tool_id:                        str  = None, # Tools defined in constants.py
            # use_backend_translations:               bool = None,
            # language:                               str  = None, # Inferred inside attrs by translation.get_language()
            # avoid_changes_not_saved_alert_on_leave: bool = None,
            # default_saved_image_quality:            int  = None,
            # force_to_png_in_elliptical_crop:        bool = None,
            # use_cloud_image:                        bool = None,
            # saving_pixel_ratio:                     int  = None,
            # preview_pixel_ratio:                    int  = None,
            # observe_plugin_container_size:          bool = None,
            # show_canvas_only:                       bool = None,
            # use_zoom_presets_menu:                  bool = None,
            # disable_zooming:                        bool = None,
            # no_cross_origin:                        bool = None,
            # disable_save_if_no_changes:             bool = None,
            # typography:                             str  = None, # The font family to use across the theme.
    
            # Automatically save the image when submitting the admin form.
            # This might lag your browser for a second or 2 when saving the page.
            should_auto_save = True,
        )
    
        content_panels = [
            # As a widget!
            FieldPanel('image', widget=FilerobotWidget(tabs=[
                "Finetune",
                "Filters",
                "Adjust",
                "Watermark",
                "Annotate",
                "Resize",
            ])),
            FieldPanel("filerobot_image"),
            *Page.content_panels,
            FieldPanel('content'),
        ]
    
        content = fields.StreamField([
            # As a block!
            ('filerobot', FilerobotBlock()),
        ], blank=True, use_json_field=True)
    

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

wagtail-filerobot-1.3.8.tar.gz (330.4 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page