-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
602 additions
and
0 deletions.
There are no files selected for viewing
5 changes: 5 additions & 0 deletions
5
docs/versioned_docs/version-0.1.5/customization/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"label": "Customization", | ||
"position": 4 | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
--- | ||
sidebar_position: 1 | ||
--- | ||
|
||
# Colors | ||
|
||
To customize the image uploader widget colors you can use your own css file to override the css variables defined by the `image-uploader-inline.css`, `image-uploader-inline.min.css`, `image-uploader-widget.css` and `image-uploader-widget.min.css`. See an example, taken from another personal private project: | ||
|
||
```scss | ||
body { | ||
--iuw-background: #{$dashdark} !important; | ||
--iuw-border-color: #{$dashborder} !important; | ||
--iuw-color: #{$dashgray} !important; | ||
--iuw-placeholder-text-color: #{$dashgray} !important; | ||
--iuw-dropzone-background: #{$dashlight} !important; | ||
--iuw-image-preview-border: #{$dashborder} !important; | ||
--iuw-image-preview-shadow: rgba(0, 0, 0, 0.3); | ||
--iuw-add-image-background: #{$dashlight} !important; | ||
--iuw-add-image-color: #{$dashgray} !important; | ||
} | ||
``` | ||
|
||
**Observation**: To see better the variables name, check the scss file at the GitHub repository: [here](https://github.com/inventare/django-image-uploader-widget/blob/main/src/styles/_variables.scss). |
5 changes: 5 additions & 0 deletions
5
docs/versioned_docs/version-0.1.5/inline_admin/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"label": "Inline Admin", | ||
"position": 3 | ||
} | ||
|
160 changes: 160 additions & 0 deletions
160
docs/versioned_docs/version-0.1.5/inline_admin/tutorial.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,160 @@ | ||
--- | ||
sidebar_position: 1 | ||
--- | ||
|
||
# Tutorial | ||
|
||
First, we need of some context: the image uploader inline is an inline admin editor (like the [StackedInline](https://docs.djangoproject.com/en/4.0/ref/contrib/admin/#django.contrib.admin.StackedInline) or the [TabularInline](https://docs.djangoproject.com/en/4.0/ref/contrib/admin/#django.contrib.admin.TabularInline) of the original django). This inline editor is created to make an multiple images manager widget using an model with an image field. | ||
|
||
## Creating a django project | ||
|
||
First, create a project folder. Here we call it as `my-ecommerce`: | ||
|
||
```bash | ||
mkdir my-ecommerce | ||
cd my-ecommerce | ||
``` | ||
|
||
And, now, create a django project in this folder: | ||
|
||
```bash | ||
django-admin startproject core . | ||
``` | ||
|
||
And, then, we have the folder structure: | ||
|
||
``` | ||
| - my-ecommerce | ||
| - core | ||
| - asgi.py | ||
| - __init__.py | ||
| - settings.py | ||
| - urls.py | ||
| - wsgi.py | ||
| - manage.py | ||
``` | ||
|
||
Create our **django** application by running the command: | ||
|
||
``` | ||
python manage.py startapp ecommerce | ||
``` | ||
|
||
And, now, we have a new, and more complex, folder structure: | ||
|
||
``` | ||
| - my-ecommerce | ||
| - core | ||
| - asgi.py | ||
| - __init__.py | ||
| - settings.py | ||
| - urls.py | ||
| - wsgi.py | ||
| - ecommerce | ||
| - migrations | ||
| - __init__.py | ||
| - admin.py | ||
| - apps.py | ||
| - __init__.py | ||
| - models.py | ||
| - tests.py | ||
| - views.py | ||
| - manage.py | ||
``` | ||
|
||
## Installing the widget | ||
|
||
To install the widget, is possible to use the same instructions of the [Introduction](../intro.md), and the first step is to install the package with pip: | ||
|
||
```bash | ||
pip install django-image-uploader-widget | ||
``` | ||
|
||
then, add it to the `INSTALLED_APPS` on the `settings.py`, in the case of this example: `core/settings.py` file. To understand better the Applications, see the django documentation: [Applications](https://docs.djangoproject.com/en/3.2/ref/applications/). | ||
|
||
```python | ||
# core/settings.py | ||
# ... | ||
|
||
INSTALLED_APPS = [ | ||
'django.contrib.admin', | ||
'django.contrib.auth', | ||
'django.contrib.contenttypes', | ||
'django.contrib.sessions', | ||
'django.contrib.messages', | ||
'django.contrib.staticfiles', | ||
'image_uploader_widget', | ||
] | ||
|
||
# ... | ||
``` | ||
|
||
### Warning | ||
|
||
**Observation**: note that the application name to be added on the `INSTALLED_APPS` are not equals to the pip package name / install name. | ||
|
||
## Using the inline editor | ||
|
||
This inline editor is created to be used directly with the django-admin interface. To show how to use it, go to create two basic models inside the `ecommerce` app (Add your app, `ecommerce` in my case, at `INSTALLED_APPS` is recommended): | ||
|
||
```python | ||
# ecommerce/models.py | ||
from django.db import models | ||
|
||
class Product(models.Model): | ||
name = models.CharField(max_length=100) | ||
|
||
def __str__(self): | ||
return self.name | ||
|
||
class Meta: | ||
verbose_name = 'Product' | ||
verbose_name_plural = 'Products' | ||
|
||
class ProductImage(models.Model): | ||
product = models.ForeignKey( | ||
Product, | ||
related_name="images", | ||
on_delete=models.CASCADE | ||
) | ||
image = models.ImageField("image") | ||
|
||
def __str__(self): | ||
return str(self.image) | ||
|
||
class Meta: | ||
verbose_name = 'Product Image' | ||
verbose_name_plural = 'Product Images' | ||
``` | ||
|
||
Now, inside our admin, we can create an primary ModelAdmin for the product: | ||
|
||
```python | ||
# ecommerce/admin.py | ||
from django.contrib import admin | ||
from ecommerce.models import Product, ProductImage | ||
|
||
@admin.register(Product) | ||
class ProductAdmin(admin.ModelAdmin): | ||
pass | ||
``` | ||
|
||
And, now, we can define our inline widget: | ||
|
||
```python | ||
# ecommerce/admin.py | ||
from django.contrib import admin | ||
from ecommerce.models import Product, ProductImage | ||
from image_uploader_widget.admin import ImageUploaderInline | ||
|
||
class ProductImageAdmin(ImageUploaderInline): | ||
model = ProductImage | ||
|
||
@admin.register(Product) | ||
class ProductAdmin(admin.ModelAdmin): | ||
inlines = [ProductImageAdmin] | ||
``` | ||
|
||
And we got the inline editor working as well: | ||
|
||
![Image Uploader Widget](/img/tutorials/admin_demo.png) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
--- | ||
sidebar_position: 1 | ||
--- | ||
|
||
# Introduction | ||
|
||
The **django-image-uploader-widget** is a widget to **django**, specially **django-admin** to handle better image uploads with a modern and beautiful user interface. | ||
|
||
## Features | ||
|
||
Some of the features of this widget is: | ||
|
||
- Beautiful user interface. | ||
- Handle drop files from your file manager. | ||
- Handle select file by click in the widget or by droping the image (previous item). | ||
- Inline editor provided to work with multiple images. | ||
- Modal to view the full image (The images are adjusted as cover in the preview box, then, in some cases, that is very useful). | ||
|
||
![Drag and Drop Image](/img/beautiful.gif) | ||
|
||
![Select by click](/img/click.gif) | ||
|
||
![Inline handle](/img/inline_multiple.gif) | ||
|
||
## Getting Started | ||
|
||
To get started, install this plugin with the pip package manager: | ||
|
||
```sh | ||
pip install django-image-uploader-widget | ||
``` | ||
|
||
then, go to the `settings.py` file and add the `image_uploader_widget` to the installed apps: | ||
|
||
```python | ||
INSTALLED_APPS = [ | ||
'my_app.apps.MyAppConfig', | ||
'django.contrib.admin', | ||
'django.contrib.auth', | ||
'django.contrib.contenttypes', | ||
'django.contrib.sessions', | ||
'django.contrib.messages', | ||
'django.contrib.staticfiles', | ||
'django.forms', | ||
'image_uploader_widget', | ||
] | ||
``` | ||
|
||
## Using | ||
|
||
Now, you must be able to use the widget in your forms: | ||
|
||
```python | ||
# forms.py | ||
from django import forms | ||
from image_uploader_widget.widgets import ImageUploaderWidget | ||
|
||
class ExampleForm(forms.ModelForm): | ||
class Meta: | ||
widgets = { | ||
'image': ImageUploaderWidget(), | ||
} | ||
fields = '__all__' | ||
``` | ||
|
||
## Code Example | ||
|
||
For code direct examples, check the `image_uploader_widget_demo` folder in the Github [repository](https://github.com/inventare/django-image-uploader-widget). | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"label": "Widget", | ||
"position": 2 | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
--- | ||
sidebar_position: 2 | ||
--- | ||
|
||
# Resumed | ||
|
||
If you want to read a more complete description of how to use this widget, see the [Tutorial](./tutorial.md). But, if you is an advanced user, only install the package: | ||
|
||
```bash | ||
pip install django-image-uploader-widget | ||
``` | ||
|
||
and add the `image_uploader_widget` to the `INSTALLED_APPS` in the `settings.py`: | ||
|
||
```python | ||
# ... | ||
|
||
INSTALLED_APPS = [ | ||
'django.contrib.admin', | ||
'django.contrib.auth', | ||
'django.contrib.contenttypes', | ||
'django.contrib.sessions', | ||
'django.contrib.messages', | ||
'django.contrib.staticfiles', | ||
'image_uploader_widget', | ||
] | ||
|
||
# ... | ||
``` | ||
|
||
And go to use it with your forms: | ||
|
||
|
||
```python | ||
from django.forms import ModelForm | ||
from ecommerce.models import Product | ||
from image_uploader_widget.widgets import ImageUploaderWidget | ||
|
||
class ProductForm(ModelForm): | ||
class Meta: | ||
model = Product | ||
fields = ['name', 'image'] | ||
widgets = { | ||
'image': ImageUploaderWidget() | ||
} | ||
``` | ||
|
||
![Image Uploader Widget](/img/tutorials/form_demo.png) |
Oops, something went wrong.