-
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.
Merge branch 'release/0.1.4' into main
- Loading branch information
Showing
50 changed files
with
8,532 additions
and
137 deletions.
There are no files selected for viewing
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,55 @@ | ||
name: documentation | ||
|
||
on: | ||
pull_request: | ||
branches: [main] | ||
push: | ||
branches: [main] | ||
|
||
jobs: | ||
checks: | ||
if: github.event_name != 'push' | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: actions/checkout@v1 | ||
- uses: actions/setup-node@v1 | ||
with: | ||
node-version: '12.x' | ||
- name: Test Build | ||
run: | | ||
cd docs | ||
if [ -e yarn.lock ]; then | ||
yarn install --frozen-lockfile | ||
elif [ -e package-lock.json ]; then | ||
npm ci | ||
else | ||
npm i | ||
fi | ||
npm run build | ||
gh-release: | ||
if: github.event_name != 'pull_request' | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: actions/checkout@v1 | ||
- uses: actions/setup-node@v1 | ||
with: | ||
node-version: '12.x' | ||
- uses: webfactory/[email protected] | ||
with: | ||
ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }} | ||
- name: Release to GitHub Pages | ||
env: | ||
USE_SSH: true | ||
GIT_USER: git | ||
run: | | ||
cd docs | ||
git config --global user.email "[email protected]" | ||
git config --global user.name "Eduardo Oliveira" | ||
if [ -e yarn.lock ]; then | ||
yarn install --frozen-lockfile | ||
elif [ -e package-lock.json ]; then | ||
npm ci | ||
else | ||
npm i | ||
fi | ||
npm run deploy |
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 |
---|---|---|
@@ -1,135 +1 @@ | ||
<h2 align="center">Simple Image Upload Widget</h2> | ||
<p align="center"> | ||
<img src=".github/images/single.gif" /> | ||
</p> | ||
<h2 align="center">Inline Multiple Images Upload</h2> | ||
<p align="center"> | ||
<img src=".github/images/multiple.gif" /> | ||
</p> | ||
|
||
## Introduction | ||
|
||
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). | ||
|
||
## Some Informations | ||
|
||
**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. | ||
|
||
## Install | ||
|
||
### 1. Install using the pip: | ||
|
||
``` | ||
pip install django-image-uploader-widget | ||
``` | ||
|
||
### 2. Add this to the INSTALLED_APPS: | ||
|
||
Go to your `settings.py` and add `image_uploader_widget` to installed apps, then they like this: | ||
|
||
```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 for single Image File Uploader | ||
|
||
### 1. Create the model in the models.py | ||
|
||
```python | ||
from django.db import models | ||
|
||
class ExampleModel(models.Model): | ||
image = models.ImageField('Image', null = True, blank = True) | ||
|
||
def __str__(self): | ||
return 'Example Model' | ||
|
||
class Meta: | ||
verbose_name = 'Example Model' | ||
verbose_name_plural = 'Example Models' | ||
``` | ||
|
||
### 2. Create the form in the forms.py | ||
|
||
```python | ||
from django import forms | ||
from image_uploader_widget.widgets import ImageUploaderWidget | ||
|
||
class ExampleForm(forms.ModelForm): | ||
|
||
class Meta: | ||
widgets = { | ||
'image': ImageUploaderWidget(), | ||
} | ||
fields = '__all__' | ||
``` | ||
|
||
### 3. Create the admin in the admin.py | ||
|
||
```python | ||
from django.contrib import admin | ||
from . import models | ||
from . import forms | ||
|
||
class ExampleAdmin(admin.ModelAdmin): | ||
form = forms.ExampleForm | ||
|
||
admin.site.register(models.ExampleModel, ExampleAdmin) | ||
``` | ||
|
||
## Using for multiple Image File Uploader Inline | ||
|
||
This is designed to be used with a model to store **ONLY** the image. See a example: | ||
|
||
|
||
### 1. The model in models.py | ||
|
||
```python | ||
from django.db import models | ||
|
||
class ExampleModel(models.Model): | ||
image = models.ImageField('Image', null = True, blank = True) | ||
|
||
def __str__(self): | ||
return 'Example Model' | ||
|
||
class Meta: | ||
verbose_name = 'Example Model' | ||
verbose_name_plural = 'Example Models' | ||
|
||
class ExampleModelImage(models.Model): | ||
example = models.ForeignKey(ExampleModel, on_delete = models.CASCADE) | ||
image = models.ImageField('Image') | ||
``` | ||
|
||
**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. | ||
|
||
### 2. Defining the inline editor in the admin.py | ||
|
||
```python | ||
from django.contrib import admin | ||
from image_uploader_widget.admin import ImageUploaderInline | ||
|
||
from . import models | ||
from . import forms | ||
|
||
class ExampleModelImageAdmin(ImageUploaderInline): | ||
model = models.ExampleModelImage | ||
fields = ['image'] | ||
|
||
class ExampleAdmin(admin.ModelAdmin): | ||
form = forms.ExampleForm | ||
inlines = [ExampleModelImageAdmin] | ||
|
||
admin.site.register(models.ExampleModel, ExampleAdmin) | ||
``` | ||
New readme is comming... |
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,20 @@ | ||
# Dependencies | ||
/node_modules | ||
|
||
# Production | ||
/build | ||
|
||
# Generated files | ||
.docusaurus | ||
.cache-loader | ||
|
||
# Misc | ||
.DS_Store | ||
.env.local | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
|
||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* |
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,41 @@ | ||
# Website | ||
|
||
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. | ||
|
||
### Installation | ||
|
||
``` | ||
$ yarn | ||
``` | ||
|
||
### Local Development | ||
|
||
``` | ||
$ yarn start | ||
``` | ||
|
||
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. | ||
|
||
### Build | ||
|
||
``` | ||
$ yarn build | ||
``` | ||
|
||
This command generates static content into the `build` directory and can be served using any static contents hosting service. | ||
|
||
### Deployment | ||
|
||
Using SSH: | ||
|
||
``` | ||
$ USE_SSH=true yarn deploy | ||
``` | ||
|
||
Not using SSH: | ||
|
||
``` | ||
$ GIT_USER=<Your GitHub username> yarn deploy | ||
``` | ||
|
||
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. |
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,3 @@ | ||
module.exports = { | ||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')], | ||
}; |
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,5 @@ | ||
--- | ||
sidebar_position: 1 | ||
--- | ||
|
||
# Comming |
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 | ||
} | ||
|
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 @@ | ||
--- | ||
sidebar_position: 1 | ||
--- | ||
|
||
# Comming |
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,68 @@ | ||
--- | ||
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__' | ||
``` | ||
|
||
## Advanced Use Cases | ||
|
||
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). |
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,5 @@ | ||
--- | ||
sidebar_position: 1 | ||
--- | ||
|
||
# Comming |
Oops, something went wrong.