Skip to content

Commit 45e2ff0

Browse files
EduardoJMEduardoJM
committed
Merge branch 'release/0.1.4' into main
2 parents b333fac + 7e7c01b commit 45e2ff0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+8532
-137
lines changed

‎.github/workflows/docs.yml

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
name: documentation
2+
3+
on:
4+
pull_request:
5+
branches: [main]
6+
push:
7+
branches: [main]
8+
9+
jobs:
10+
checks:
11+
if: github.event_name != 'push'
12+
runs-on: ubuntu-latest
13+
steps:
14+
- uses: actions/checkout@v1
15+
- uses: actions/setup-node@v1
16+
with:
17+
node-version: '12.x'
18+
- name: Test Build
19+
run: |
20+
cd docs
21+
if [ -e yarn.lock ]; then
22+
yarn install --frozen-lockfile
23+
elif [ -e package-lock.json ]; then
24+
npm ci
25+
else
26+
npm i
27+
fi
28+
npm run build
29+
gh-release:
30+
if: github.event_name != 'pull_request'
31+
runs-on: ubuntu-latest
32+
steps:
33+
- uses: actions/checkout@v1
34+
- uses: actions/setup-node@v1
35+
with:
36+
node-version: '12.x'
37+
- uses: webfactory/[email protected]
38+
with:
39+
ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}
40+
- name: Release to GitHub Pages
41+
env:
42+
USE_SSH: true
43+
GIT_USER: git
44+
run: |
45+
cd docs
46+
git config --global user.email "[email protected]"
47+
git config --global user.name "Eduardo Oliveira"
48+
if [ -e yarn.lock ]; then
49+
yarn install --frozen-lockfile
50+
elif [ -e package-lock.json ]; then
51+
npm ci
52+
else
53+
npm i
54+
fi
55+
npm run deploy

‎README.md

Lines changed: 1 addition & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1 @@
1-
<h2 align="center">Simple Image Upload Widget</h2>
2-
<p align="center">
3-
<img src=".github/images/single.gif" />
4-
</p>
5-
<h2 align="center">Inline Multiple Images Upload</h2>
6-
<p align="center">
7-
<img src=".github/images/multiple.gif" />
8-
</p>
9-
10-
## Introduction
11-
12-
One of the things that i did't like in the **django-admin** is the arcaic appearance and usability of the forms, specially in the image upload, then i decided to create this plugin (for a use in a personal project, but i decided to publish here).
13-
14-
## Some Informations
15-
16-
**Warning**: This was developed using the more recent version of django and i have not tested this with older django versions (because i created this for use in some recent projects). Is not my intentions to made this complete compatible with old versions of django, but if you want to try to use this with older versions of django and get some erros, please **contact-me** (or open a **issue** here) and we can talk about the errors and made this compatible to the version that you are geting errors.
17-
18-
## Install
19-
20-
### 1. Install using the pip:
21-
22-
```
23-
pip install django-image-uploader-widget
24-
```
25-
26-
### 2. Add this to the INSTALLED_APPS:
27-
28-
Go to your `settings.py` and add `image_uploader_widget` to installed apps, then they like this:
29-
30-
```python
31-
INSTALLED_APPS = [
32-
'my_app.apps.MyAppConfig',
33-
'django.contrib.admin',
34-
'django.contrib.auth',
35-
'django.contrib.contenttypes',
36-
'django.contrib.sessions',
37-
'django.contrib.messages',
38-
'django.contrib.staticfiles',
39-
'django.forms',
40-
'image_uploader_widget',
41-
]
42-
```
43-
44-
## Using for single Image File Uploader
45-
46-
### 1. Create the model in the models.py
47-
48-
```python
49-
from django.db import models
50-
51-
class ExampleModel(models.Model):
52-
image = models.ImageField('Image', null = True, blank = True)
53-
54-
def __str__(self):
55-
return 'Example Model'
56-
57-
class Meta:
58-
verbose_name = 'Example Model'
59-
verbose_name_plural = 'Example Models'
60-
```
61-
62-
### 2. Create the form in the forms.py
63-
64-
```python
65-
from django import forms
66-
from image_uploader_widget.widgets import ImageUploaderWidget
67-
68-
class ExampleForm(forms.ModelForm):
69-
70-
class Meta:
71-
widgets = {
72-
'image': ImageUploaderWidget(),
73-
}
74-
fields = '__all__'
75-
```
76-
77-
### 3. Create the admin in the admin.py
78-
79-
```python
80-
from django.contrib import admin
81-
from . import models
82-
from . import forms
83-
84-
class ExampleAdmin(admin.ModelAdmin):
85-
form = forms.ExampleForm
86-
87-
admin.site.register(models.ExampleModel, ExampleAdmin)
88-
```
89-
90-
## Using for multiple Image File Uploader Inline
91-
92-
This is designed to be used with a model to store **ONLY** the image. See a example:
93-
94-
95-
### 1. The model in models.py
96-
97-
```python
98-
from django.db import models
99-
100-
class ExampleModel(models.Model):
101-
image = models.ImageField('Image', null = True, blank = True)
102-
103-
def __str__(self):
104-
return 'Example Model'
105-
106-
class Meta:
107-
verbose_name = 'Example Model'
108-
verbose_name_plural = 'Example Models'
109-
110-
class ExampleModelImage(models.Model):
111-
example = models.ForeignKey(ExampleModel, on_delete = models.CASCADE)
112-
image = models.ImageField('Image')
113-
```
114-
115-
**Note**: See that the **ExampleModelImage** is a model created to store only images, that are linked to the **ExampleModel**, like the photos of a product in a shop basic model.
116-
117-
### 2. Defining the inline editor in the admin.py
118-
119-
```python
120-
from django.contrib import admin
121-
from image_uploader_widget.admin import ImageUploaderInline
122-
123-
from . import models
124-
from . import forms
125-
126-
class ExampleModelImageAdmin(ImageUploaderInline):
127-
model = models.ExampleModelImage
128-
fields = ['image']
129-
130-
class ExampleAdmin(admin.ModelAdmin):
131-
form = forms.ExampleForm
132-
inlines = [ExampleModelImageAdmin]
133-
134-
admin.site.register(models.ExampleModel, ExampleAdmin)
135-
```
1+
New readme is comming...

‎docs/.gitignore

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Misc
12+
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*

‎docs/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Website
2+
3+
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
```
8+
$ yarn
9+
```
10+
11+
### Local Development
12+
13+
```
14+
$ yarn start
15+
```
16+
17+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```
22+
$ yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
27+
### Deployment
28+
29+
Using SSH:
30+
31+
```
32+
$ USE_SSH=true yarn deploy
33+
```
34+
35+
Not using SSH:
36+
37+
```
38+
$ GIT_USER=<Your GitHub username> yarn deploy
39+
```
40+
41+
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

‎docs/babel.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3+
};

‎docs/docs/customization/_category_.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"label": "Customization",
3+
"position": 4
4+
}
5+

‎docs/docs/customization/comming.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Comming

‎docs/docs/inline_admin/_category_.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"label": "Inline Admin",
3+
"position": 3
4+
}
5+

‎docs/docs/inline_admin/comming.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Comming

‎docs/docs/intro.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Introduction
6+
7+
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.
8+
9+
## Features
10+
11+
Some of the features of this widget is:
12+
13+
- Beautiful user interface.
14+
- Handle drop files from your file manager.
15+
- Handle select file by click in the widget or by droping the image (previous item).
16+
- Inline editor provided to work with multiple images.
17+
- Modal to view the full image (The images are adjusted as cover in the preview box, then, in some cases, that is very useful).
18+
19+
![Drag and Drop Image](/img/beautiful.gif)
20+
21+
![Select by click](/img/click.gif)
22+
23+
![Inline handle](/img/inline_multiple.gif)
24+
25+
## Getting Started
26+
27+
To get started, install this plugin with the pip package manager:
28+
29+
```sh
30+
pip install django-image-uploader-widget
31+
```
32+
33+
then, go to the `settings.py` file and add the `image_uploader_widget` to the installed apps:
34+
35+
```python
36+
INSTALLED_APPS = [
37+
'my_app.apps.MyAppConfig',
38+
'django.contrib.admin',
39+
'django.contrib.auth',
40+
'django.contrib.contenttypes',
41+
'django.contrib.sessions',
42+
'django.contrib.messages',
43+
'django.contrib.staticfiles',
44+
'django.forms',
45+
'image_uploader_widget',
46+
]
47+
```
48+
49+
## Using
50+
51+
Now, you must be able to use the widget in your forms:
52+
53+
```python
54+
# forms.py
55+
from django import forms
56+
from image_uploader_widget.widgets import ImageUploaderWidget
57+
58+
class ExampleForm(forms.ModelForm):
59+
class Meta:
60+
widgets = {
61+
'image': ImageUploaderWidget(),
62+
}
63+
fields = '__all__'
64+
```
65+
66+
## Advanced Use Cases
67+
68+
Better writed widget use cases and more effective examples is comming. Other examples with the inline is comming. For now, check the `image_uploader_widget_demo` folder in the Github [repository](https://github.com/inventare/django-image-uploader-widget).

0 commit comments

Comments
 (0)