.. container:: top-bar d-flex justify-content-between align-items-center

   .. container::

      |Logo|

   .. container:: availability

      Community    Enterprise    Odoo Online

.. container:: section hero-section

   .. container::

      .. rubric:: Images Drag And Drop Widgets
         :name: images-drag-and-drop-widgets

      Effortlessly manage and update images in your Odoo records with
      our intuitive drag and drop widgets.

      .. container:: vector-placeholder

         |Hero Vector|

      .. container:: benefit-box

         Perfect for E-commerce, Media Portals & More!

.. container:: section section
   :name: introduction

   .. container::

      .. rubric:: 
         Introduction
         :name: introduction
         :class: text-center mb-5 fw-bold

      The **Images Drag And Drop Widgets** module is a state-of-the-art
      solution designed to enhance your Odoo experience by integrating
      modern, user-friendly drag and drop image widgets.

      .. rubric:: Who Can Benefit?
         :name: who-can-benefit

      Whether you run an e-commerce site, a media portal, a real estate
      listing platform, or any business that requires the handling of
      multiple images per record, this module is built for you. Enjoy:

      - **E-commerce websites:** Easily manage product images with a
        simple drag and drop interface.
      - **Businesses with heavy media content:** Quickly update
        portfolios, galleries, and listings.
      - **Developers and Designers:** Seamlessly integrate modern
        widgets across all modules—no extra dependency required!

      .. rubric:: Use Cases
         :name: use-cases

      **Online Stores:** Showcase products with multiple images that can
      be easily updated on-the-fly.

      **Real Estate Platforms:** Effortlessly manage property photos,
      floor plans, and virtual tours.

      **Agencies & Portfolios:** Create visually appealing portfolios
      where media speaks louder than words.

      .. rubric:: Benefits
         :name: benefits

      With our module, say goodbye to tedious file uploads and hello to
      a more engaging user experience. It’s simple, robust, and designed
      to boost your productivity!

.. container:: section section
   :name: installation

   .. container::

      .. rubric:: 
         Installation
         :name: installation
         :class: text-center mb-5 fw-bold

      Follow these detailed steps to install the **eis_drag_drop**
      module:

      #. **Download the Module:** Obtain the module as a ZIP file from
         the official repository or your vendor.
      #. **Extract the ZIP:** Unzip the downloaded file to reveal the
         module folder.
      #. **Copy to Addons Folder:** Move or copy the extracted module
         folder into your Odoo ``addons`` directory.
      #. **Restart Odoo Service:**

         - On systemd-based systems: ``sudo systemctl restart odoo``
         - On SysVinit-based systems: ``sudo service odoo restart``
         - Or use the appropriate command for your OS.

      #. **Update App List:** In your Odoo database, navigate to the
         Apps menu and click *Update Apps List*.
      #. **Install the Module:** Search for *Drag and Drop Widgets* (or
         ``eis_drag_drop``) and click install.

      .. container:: tips

         **Important:** Always test the module in a staging environment
         before deploying it to your production server. Caution is
         key—ensure you have backups and proper rollback plans in place.

.. container:: section section
   :name: user-guides

   .. container::

      .. rubric:: 
         User Guide
         :name: user-guide
         :class: text-center mb-5 fw-bold

      .. rubric::  Updating Existing Image Fields
         :name: updating-existing-image-fields

      You can update any existing binary image field to use our drag and
      drop widget without altering your custom modules. Simply update
      your XML views by setting the widget attribute to:

      .. container:: code-snippet

         ::

            <field name="image_field" widget="d_and_d_image" options="{
              "image_size": "150x150",
              "preview_image": "image_128",
              "acceptedFileExtensions": "image/*",
              "enableZoom": true,
              "additionalStyles": "border:2px solid #007bff;"
            }>
            </field>

      **Options Explained:**

      - ``image_size``: Defines the display size of the widget. Example:
        "150x150" sets the width to 150px and height to 150px.
      - ``preview_image``: Specifies the field used for the image
        preview. If not set, it defaults to the binary field name.
      - ``acceptedFileExtensions``: Determines which image formats can
        be uploaded.
      - ``enableZoom``: If true, hovering over the image displays a zoom
        popup.
      - ``additionalStyles``: Custom CSS styles that are appended to the
        widget's inline styles.

      .. rubric::  Detailed O2M Setup & Custom Integration
         :name: detailed-o2m-setup-custom-integration

      For One2Many fields, our widget transforms the standard image
      upload into a dynamic drag and drop area. **Note:** The related
      model *must* have a Kanban view defined that includes at least the
      ``name`` and ``image`` (or ``image_1920``) fields.

      **Why a Kanban View?** The Kanban view enables the widget to
      render image previews instead of just record IDs. Without it, you
      may only see numerical identifiers.

      **Form View for Videos & Manual Entry:** If you wish to add videos
      or manually add images in the traditional way, ensure that your
      One2Many field is also accessible via a form view.

      .. rubric:: Example of One2Many Field Integration
         :name: example-of-one2many-field-integration

      .. container:: code-snippet

         ::

            <page name="media" string="Extra Media">
                <field name="media_ids" widget="d_and_d_images"
                       options="{
                           'childImageField': 'image_1920',
                           'extraData': {
                               'categ_id': 1,
                               'enable_zoom': true,
                               'previewImage': 'image_128',
                               'cssStyles': 'width:150px; height:200px; border-radius:15px;'
                           }
                       }"/>
            </page>

      .. rubric:: Options Explained:
         :name: options-explained

      - ``childImageField``: Specifies the field in the child model
        where the binary image data is stored. This is mandatory for the
        widget to function correctly. If not specified, image_1920 will
        be used.
      - ``extraData``: Allows you to pass additional data to the child
        records. This can include:

        - ``categ_id``: An example field that sets a default category
          ID. This feature allows you to add any additional field and
          its value if your model has a required field and without it,
          it cannot create new records, or a field that you need to fill
          with static data.
        - ``sale_ok``: This is another example field and you can pass
          any bool value if your required field is bool type
        - ``previewImage``: Specifies a smaller image field to use for
          previews, which is important if you want to show a smaller
          size image to save bandwidth. This value should be used if
          your model is inherited from ``image.mixin`` and you want to
          display a smaller preview image.
        - ``cssStyles``: Custom CSS styles for the image display.
          Example:
          ``"width:150px; height:200px; border-radius:15px; object-fit:cover;"``.

      - ``acceptedFileExtensions``: Determines which file types are
        acceptable for upload. Default is ``"image/*"``.

.. container:: section section
   :name: user-guides

   .. container::

      .. rubric:: 
         User Guide
         :name: user-guide-1
         :class: text-center mb-5 fw-bold

      .. rubric::  Updating Existing Image Fields
         :name: updating-existing-image-fields-1

      You can update any existing binary image field to use our drag and
      drop widget without altering your custom modules. Simply update
      your XML views by setting the widget attribute to:

      .. container:: code-snippet

         ::

            <field name="image_field" widget="d_and_d_image" options="{
              "image_size": "150x150",
              "preview_image": "image_128",
              "acceptedFileExtensions": "image/*",
              "enableZoom": true,
              "additionalStyles": "border:2px solid #007bff;"
            }>
            </field>

      **Options Explained:**

      - ``image_size``: Defines the display size of the widget. Example:
        "150x150" sets the width to 150px and height to 150px.
      - ``preview_image``: Specifies the field used for the image
        preview. If not set, it defaults to the binary field name.
      - ``acceptedFileExtensions``: Determines which image formats can
        be uploaded.
      - ``enableZoom``: If true, hovering over the image displays a zoom
        popup.
      - ``additionalStyles``: Custom CSS styles that are appended to the
        widget's inline styles.

      .. rubric::  Detailed O2M Setup & Custom Integration
         :name: detailed-o2m-setup-custom-integration-1

      For One2Many fields, our widget transforms the standard image
      upload into a dynamic drag and drop area. **Note:** The related
      model *must* have a Kanban view defined that includes at least the
      ``name`` and ``image`` (or ``image_1920``) fields.

      **Why a Kanban View?** The Kanban view enables the widget to
      render image previews instead of just record IDs. Without it, you
      may only see numerical identifiers.

      **Form View for Videos & Manual Entry:** If you wish to add videos
      or manually add images in the traditional way, ensure that your
      One2Many field is also accessible via a form view.

      .. rubric:: Example of One2Many Field Integration
         :name: example-of-one2many-field-integration-1

      .. container:: code-snippet

         ::

            <page name="media" string="Extra Media">
                <field name="media_ids" widget="d_and_d_images"
                       options="{
                           'childImageField': 'image_1920',
                           'extraData': {
                               'categ_id': 1,
                               'enable_zoom': true,
                               'previewImage': 'image_128',
                               'cssStyles': 'width:150px; height:200px; border-radius:15px;'
                           }
                       }"/>
            </page>

      .. rubric:: Options Explained:
         :name: options-explained-1

      - ``childImageField``: Specifies the field in the child model
        where the binary image data is stored. This is mandatory for the
        widget to function correctly. If not specified, ``image_1920``
        will be used.
      - ``extraData``: Allows you to pass additional data to the child
        records. This can include:

        - ``categ_id``: An example field that sets a default category
          ID. This feature allows you to add any additional field and
          its value if your model has a required field and without it,
          it cannot create new records, or a field that you need to fill
          with static data.
        - ``sale_ok``: This is another example field and you can pass
          any bool value if your required field is bool type.
        - ``previewImage``: Specifies a smaller image field to use for
          previews, which is important if you want to show a smaller
          size image to save bandwidth. This value should be used if
          your model is inherited from ``image.mixin`` and you want to
          display a smaller preview image.
        - ``cssStyles``: Custom CSS styles for the image display.
          Example:
          ``"width:150px; height:200px; border-radius:15px; object-fit:cover;"``.

      - ``acceptedFileExtensions``: Determines which file types are
        acceptable for upload. Default is ``"image/*"``.

      .. container:: alert alert-danger

         .. rubric::  Important Notice!
            :name: important-notice
            :class: alert-heading

         Do not create the models described in the following example.
         Odoo already includes these models. This example is provided
         for educational purposes to help you understand the
         implementation.

      .. rubric:: Complete Example (Taken from Odoo builtin Code):
         :name: complete-example-taken-from-odoo-builtin-code

      .. rubric:: Adding Multiple Image Support to ``product.template``
         :name: adding-multiple-image-support-to-product.template

      Let's say we have a model ``product.template`` and we need to add
      multiple image support to it. We will create a model
      ``product.image`` by inheriting from the ``image.mixin`` class.
      This way, we automatically get fields like ``image_1920`` and
      other related fields for our model ``product.image``.

      Here are the steps to achieve this:

      #. **Create the ``product.image`` Model:**

         Inherit from ``image.mixin`` to automatically get image-related
         fields.

         .. container:: code-snippet

            ::

               class ProductImage(models.Model):
                   _name = 'product.image'
                   _inherit = 'image.mixin'

                   product_tmpl_id = fields.Many2one('product.template', string='Product Template')
                   sequence = fields.Integer('Sequence')
                   video_url = fields.Char('Video URL')

      #. **Extend the ``product.template`` Model:**

         Add a One2Many field to link multiple images.

         .. container:: code-snippet

            ::

               class ProductTemplate(models.Model):
                   _inherit = 'product.template'

                   product_template_image_ids = fields.One2many('product.image', 'product_tmpl_id', string='Images')

      #. **Create a Kanban View for ``product.image``:**

         Add a Kanban view with the necessary fields.

         .. container:: code-snippet

            ::

               <record id="view_product_image_kanban" model="ir.ui.view">
                           <field name="name">product.image.kanban</field>
                           <field name="model">product.image</field>
                           <field name="arch" type="xml">
                       <kanban>
                           <field name="id"/>
                           <field name="name"/>
                           <field name="image_1920" widget="image"/>
                           <field name="sequence"/>
                       </kanban>
                           </field>
                       </record>

      #. **Create a Form View for ``product.image``:**

         Add a form view with fields for video URL and image.

         .. container:: code-snippet

            ::

               <record id="view_product_image_form" model="ir.ui.view">
                            <field name="name">product.image.form</field>
                            <field name="model">product.image</field>
                                        <field name="arch" type="xml">
                       <form>
                           <field name="id"/>
                           <field name="name"/>
                           <field name="video_url"/>
                           <field name="image_1920" widget="image"/>
                       </form>
                           </field>
                           </record>

      #. **Update the ``product.template`` Form View:**

         Add the One2Many field with the drag-and-drop widget.

         .. container:: code-snippet

            ::

               <record id="view_product_template_form" model="ir.ui.view">
                               <field name="name">product.template.form</field>
                               <field name="model">product.template</field>
                               <field name="inherit_id" ref="product.product_template_only_form_view"/>
                               <field name="arch" type="xml">
                       <form>
                           <sheet>
                               <group>
                                   <field name="product_template_image_ids" widget="d_and_d_images" options="{
                                       'childImageField': 'image_1920',
                                       'extraData': {
                                           'cssStyles': 'width:150px;height:150px;'
                                       }
                                       }"/>
                                           </group>
                                       </sheet>
                                   </form>
                               </field>
                           </record>

      .. container:: alert alert-warning

         **Important Considerations for Product Image Management (Odoo
         17 and 18)**
         This guide outlines the necessary steps for integrating
         d_and_d_images widget for product template, specifically when
         using the ``website_sale`` module, across Odoo 17 and 18.
         Please carefully follow the instructions for your respective
         Odoo version to avoid conflicts and ensure proper
         functionality.

         **Odoo 17:**

         #. **Do not duplicate the ``product.image`` model or its
            views.** This model is already provided by the
            ``website_sale`` module in Odoo. Creating a duplicate will
            lead to conflicts.
         #. **Inherit the ``product.template`` form view.**. You will
            modify the form view ``product.product_template_form_view``
            to integrate d_and_d_images customizations seamlessly with
            Odoo's core functionality.
         #. **Customize the image field:** Replace the
            ``product_template_image_ids`` field in the inherited form
            view with d_and_d_images widget as described above to
            enhance the product image management functionality.

         **Odoo 18:**

         Odoo 18 has modified the ``product.image`` Kanban view by
         removing certain fields. So, to make it compatible again with
         our d_and_d_images widghet, here's how to adjust Odoo 18:

         #. **Inherit the ``product.image`` Kanban view.**
            ``website_sale.product_image_view_kanban``. Add the
            necessary ``id`` and ``name`` fields back into the view to
            maintain existing functionality. That's it.
         #. **Enable modifications through the module's manifest:**

            - Declare dependency on ``website_sale`` in our
              eis_drag_drop module's ``__manifest__.py`` file to ensure
              proper loading order. You jsut need to uncomment the line
              having website_sale with key depends and then comment the
              existing depend key.
            - Reference the XML file containing your Kanban view
              modifications in the ``data`` key of the manifest to apply
              these changes automatically when your module is installed
              or updated.

         #. **Alternative approach:** Manually define the Kanban view
            inheritance in a ``product.xml`` file if you prefer more
            direct control over the modifications.

         Our module has pre-configured these enhancements for you. To
         activate them, modify the ``__manifest__.py`` file to uncomment
         the dependency on ``website_sale`` and the reference to
         ``/views/product.xml`` in the ``data`` key. This ensures all
         functionalities are seamlessly integrated when you install or
         update the module.

.. container:: section section
   :name: screenshots

   .. container::

      .. rubric:: 
         Screenshots Explaination
         :name: screenshots-explaination
         :class: text-center mb-5 fw-bold

      .. container:: screenshot-full

         .. container:: screenshot-number

            01

         .. rubric:: Drag and Drop Widget Overview
            :name: drag-and-drop-widget-overview

         |Drag and Drop Widget Overview|
         A clear view of the drag and drop widget areas for single
         binary image and for one2many images., allowing users to
         effortlessly update images.

      .. container:: screenshot-full

         .. container:: screenshot-number

            02

         .. rubric:: One2Many Drag And Drop Explained
            :name: one2many-drag-and-drop-explained

         |One2many Field Enhancement|
         In this screenshot, you can see a simple explaination of the
         view. Each record's thumbnail, have a small cross on top right
         corner to remove a record, view also display video thumbnail,
         and buttons.

      .. container:: screenshot-full

         .. container:: screenshot-number

            04

         .. rubric:: Add Video Button
            :name: add-video-button

         |image1|
         This screenshot illustrates how the one2many field widget
         ``'Add Video'`` button is working. You can access odoo builtin
         method being used in website_sale module of odoo to add extra
         media including videos or images.

      .. container:: screenshot-full

         .. container:: screenshot-number

            05

         .. rubric:: Manual File Uploding Button Display
            :name: manual-file-uploding-button-display

         |image2|
         This screenshot illustrates how the one2many field widget
         manual upload button is working. If you want to upload images
         manually from file uploader, you can click on this button and
         it will open finder / file explorer for you. It will only allow
         images to upload with jpg, jpeg, png, svg etc

      .. container:: screenshot-full

         .. container:: screenshot-number

            06

         .. rubric:: Iamges Dragging over One2many Field Display
            :name: iamges-dragging-over-one2many-field-display

         |image3|
         This screenshot illustrates how the one2many field is being
         used to drop 4 images into drag drop area. Notice the blue
         border that is highlighted when we dragged the images over it.
         As soon as we will drop the images, they will be uploaded
         automatically

.. container:: section section
   :name: video

   .. container::

      .. rubric:: 
         Video Explaination
         :name: video-explaination
         :class: text-center mb-5 fw-bold

      .. container:: screenshot-full

         .. container:: screenshot-number

            01

         .. rubric:: Drag and Drop Widget Overview
            :name: drag-and-drop-widget-overview-1

         .. container:: video-container

            .. container:: iframe

               .. container::
                  :name: player

               .. container:: player-unavailable

                  .. rubric:: ایک خرابی پیش آ گئی۔
                     :name: ایک-خرابی-پیش-آ-گئی
                     :class: message

                  .. container:: submessage

                     `اس ویڈیو کو www.youtube.com پر دیکھنے کی کوشش
                     کریں <https://www.youtube.com/watch?v=JRPchiEhS9U>`__
                     یا اگر آپ کے براؤزر میں JavaScript غیر فعال ہے تو
                     اسے فعال کریں۔

         Watch the video to see how it works.

.. container:: section section
   :name: version-info

   .. container::

      .. rubric:: 
         Module Version Information & Changelog
         :name: module-version-information-changelog
         :class: text-center mb-5 fw-bold

      .. container:: version-info

         - **v1.0.0** - Initial release with basic drag and drop
           functionality.
         - **v1.1.0** - Added support for one2many fields and improved
           preview handling.
         - **v1.2.0** - Enhanced UI, added zoom popup, and refined
           installation instructions.
         - **v1.3.0** - Bug fixes and performance improvements for large
           image uploads.
         - **v1.3.1** - New feature added to save dirty form to preserver new changes.
             - 1: - add new key 'showConfirm' in extraData, it is bool value. it will show a confirmation dialog to ask user to save changes in form or not.
             - 2: - If no option given, the default is true.

.. container:: section section
   :name: services

   .. container::

      .. rubric:: 
         90 Days Support
         :name: days-support
         :class: text-center mb-5 fw-bold

      .. container:: row text-center

         .. container:: col-md-4 mb-3

            .. container:: service-tile

               .. rubric:: Website
                  :name: website

               `www.expertpk.com <https://www.expertpk.com>`__

         .. container:: col-md-4 mb-3

            .. container:: service-tile

               .. rubric:: Email
                  :name: email

               support@expertpk.com

         .. container:: col-md-4 mb-3

            .. container:: service-tile

               .. rubric:: WhatsApp
                  :name: whatsapp

               +92 300 7888120

.. container:: section py-5 bg-light
   :name: services

   .. container::

      .. rubric:: 
         Our Services
         :name: our-services
         :class: text-center mb-5 fw-bold

      .. container:: row g-4

         .. container:: col-md-6 col-lg-3

            .. container:: card h-100 text-center border-0 shadow-sm

               .. container:: card-body

                  .. rubric:: Odoo Development
                     :name: odoo-development
                     :class: card-title

                  Build custom Odoo modules and applications tailored to
                  your business needs.

                  `Learn More <#contact>`__

         .. container:: col-md-6 col-lg-3

            .. container:: card h-100 text-center border-0 shadow-sm

               .. container:: card-body

                  .. rubric:: Customization
                     :name: customization
                     :class: card-title

                  Customize Odoo to fit your unique workflows and
                  business processes.

                  `Learn More <#contact>`__

         .. container:: col-md-6 col-lg-3

            .. container:: card h-100 text-center border-0 shadow-sm

               .. container:: card-body

                  .. rubric:: Upgradation
                     :name: upgradation
                     :class: card-title

                  Upgrade your Odoo instance to the latest version with
                  zero downtime.

                  `Learn More <#contact>`__

         .. container:: col-md-6 col-lg-3

            .. container:: card h-100 text-center border-0 shadow-sm

               .. container:: card-body

                  .. rubric:: Consultancy
                     :name: consultancy
                     :class: card-title

                  Get expert advice on Odoo implementation,
                  optimization, and best practices.

                  `Learn More <#contact>`__

.. container:: section section
   :name: other-modules

   .. container::

      .. rubric:: Explore Our Other Modules
         :name: explore-our-other-modules

      .. container:: carousel slide module-slider
         :name: modulesCarousel

         .. container:: carousel-inner

            .. container:: carousel-item active

               |Module 1|

               .. container:: carousel-caption d-none d-md-block

                  .. rubric:: Module 1: Advanced Reporting
                     :name: module-1-advanced-reporting

            .. container:: carousel-item

               |Module 2|

               .. container:: carousel-caption d-none d-md-block

                  .. rubric:: Module 2: CRM Enhancements
                     :name: module-2-crm-enhancements

            .. container:: carousel-item

               |Module 3|

               .. container:: carousel-caption d-none d-md-block

                  .. rubric:: Module 3: Inventory Optimizer
                     :name: module-3-inventory-optimizer

         Previous
         Next

.. container:: section section
   :name: best-practices

   .. container::

      .. rubric:: Best Practices & Troubleshooting
         :name: best-practices-troubleshooting

      .. container:: tips

         .. rubric:: Best Practices
            :name: best-practices

         - Always backup your database before applying new modules.
         - Test the module in a staging environment prior to production
           deployment.
         - Ensure that the related one2many models have the required
           Kanban view with mandatory fields.
         - Regularly update your Odoo instance to keep up with security
           and performance improvements.

      .. container:: troubleshooting

         .. rubric:: Troubleshooting Steps
            :name: troubleshooting-steps

         - If image previews are not displaying, verify that your Kanban
           view contains the ``name`` and ``image``/``image_1920``
           fields.
         - Check the browser console for JavaScript errors related to
           the widget.
         - Ensure file permissions are correctly set in your addons
           folder.
         - Review the server logs for any errors during file upload or
           service restart.

.. container:: section section
   :name: code-snippets

   .. container::

      .. rubric:: Code Snippets
         :name: code-snippets

      Below are examples of typical XML view definitions where the new
      drag and drop fields are highlighted:

      .. container:: code-snippet

         .. rubric:: Single Image Widget
            :name: single-image-widget

         This snippet shows how to integrate a single image drag and
         drop field into an Odoo form view:

         ::

            <form string="Product Form">
                <sheet>
                    <group>
                        <field name="name" />
                        <field name="description" />
                        <!-- Our new drag and drop image field is highlighted below -->
                         <field name="image_1920" widget="d_and_d_image" class="oe_avator" options="{
                            "image_size": "200x200",
                            "preview_image": "image_128",
                            "acceptedFileExtensions": "image/*",
                            "enableZoom": true
                        }" />
                        <field name="price" /> 
                    </group>
                </sheet>
            </form>

         **Explanation:** This code defines a form view for a product.
         The ``product_image`` field uses the ``d_and_d_image`` widget,
         which allows users to drag and drop images. The ``options``
         attribute specifies settings like image size, preview image,
         accepted file extensions, and zoom functionality.

      .. container:: code-snippet

         .. rubric:: One2Many Image Widget
            :name: one2many-image-widget

         This snippet demonstrates how to integrate a One2Many image
         drag and drop field into an Odoo form view:

         ::

            <form string="Product Form">
                <sheet>
                    <group>
                        <field name="name" />
                        <field name="description" />
                        <!-- One2Many drag and drop image field -->
                         <field name="product_images" widget="d_and_d_images" options="{
                            "childImageField": "image_1920",
                            "extraData": {
                                "cssStyles": "width:150px;height:150px;"
                            }
                        }" />
                        <field name="price" /> 
                    </group>
                </sheet>
            </form>

         **Explanation:** This code defines a form view for a product
         with a One2Many field ``product_images``. The
         ``d_and_d_images`` widget allows users to drag and drop
         multiple images. The ``options`` attribute specifies the child
         image field and additional CSS styles for the image display.

© 2025 Expert IT Solutions. All rights reserved.

.. |Logo| image:: ../static/description/img/logo.png
.. |Hero Vector| image:: ../static/description/img/hero.svg
.. |Drag and Drop Widget Overview| image:: ../static/description/img/image1.png
   :class: screenshot-img
.. |One2many Field Enhancement| image:: ../static/description/img/image3.png
   :class: screenshot-img
.. |image1| image:: ../static/description/img/image4.png
   :class: screenshot-img
.. |image2| image:: ../static/description/img/image5.png
   :class: screenshot-img
.. |image3| image:: ../static/description/img/image6.png
   :class: screenshot-img
.. |Module 1| image:: module1.png
   :class: d-block w-100
.. |Module 2| image:: module2.png
   :class: d-block w-100
.. |Module 3| image:: module3.png
   :class: d-block w-100