Skip to content

Commit

Permalink
add versioned documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
EduardoJM committed Apr 1, 2022
1 parent 768e545 commit 2a330d6
Show file tree
Hide file tree
Showing 10 changed files with 602 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"label": "Customization",
"position": 4
}

23 changes: 23 additions & 0 deletions docs/versioned_docs/version-0.1.5/customization/colors.md
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).
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 docs/versioned_docs/version-0.1.5/inline_admin/tutorial.md
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)
69 changes: 69 additions & 0 deletions docs/versioned_docs/version-0.1.5/intro.md
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).

5 changes: 5 additions & 0 deletions docs/versioned_docs/version-0.1.5/widget/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"label": "Widget",
"position": 2
}

48 changes: 48 additions & 0 deletions docs/versioned_docs/version-0.1.5/widget/resumed.md
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)
Loading

0 comments on commit 2a330d6

Please sign in to comment.