Skip to content

Commit

Permalink
Merge branch 'release/0.1.4' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
EduardoJM committed Jan 18, 2022
2 parents b333fac + 7e7c01b commit 45e2ff0
Show file tree
Hide file tree
Showing 50 changed files with 8,532 additions and 137 deletions.
55 changes: 55 additions & 0 deletions .github/workflows/docs.yml
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
136 changes: 1 addition & 135 deletions README.md
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...
20 changes: 20 additions & 0 deletions docs/.gitignore
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*
41 changes: 41 additions & 0 deletions docs/README.md
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.
3 changes: 3 additions & 0 deletions docs/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
5 changes: 5 additions & 0 deletions docs/docs/customization/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"label": "Customization",
"position": 4
}

5 changes: 5 additions & 0 deletions docs/docs/customization/comming.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
sidebar_position: 1
---

# Comming
5 changes: 5 additions & 0 deletions docs/docs/inline_admin/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"label": "Inline Admin",
"position": 3
}

5 changes: 5 additions & 0 deletions docs/docs/inline_admin/comming.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
sidebar_position: 1
---

# Comming
68 changes: 68 additions & 0 deletions docs/docs/intro.md
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).
5 changes: 5 additions & 0 deletions docs/docs/widget/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"label": "Widget",
"position": 2
}

5 changes: 5 additions & 0 deletions docs/docs/widget/comming.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
sidebar_position: 1
---

# Comming
Loading

0 comments on commit 45e2ff0

Please sign in to comment.