# creation de post avec django

**URL:** <https://forum.djangoproject.com/t/creation-de-post-avec-django/33681>\
**Category:** Getting Started\
**Created:** [August 8, 2024, 4:42pm UTC](https://forum.djangoproject.com/t/creation-de-post-avec-django/33681 "2024-08-08T16:42:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kevinoomou](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kevinoomou/32/23118_2.png) [@Kevinoomou](https://forum.djangoproject.com/u/Kevinoomou)\
**Post date:** [August 8, 2024, 4:42pm UTC](https://forum.djangoproject.com/t/creation-de-post-avec-django/33681/1 "2024-08-08T16:42:15Z")

</div>

Je souhaite développer une application Django permettant aux utilisateurs de créer des publications avec plusieurs images. Les utilisateurs doivent pouvoir télécharger jusqu’à 8 images dans une seule publication, qui seront prévisualisées avant la soumission. Sur la page d’accueil, une seule image par publication sera affichée avec un titre et une description. Lorsqu’un utilisateur clique sur l’image ou le lien “voir plus”, il doit accéder à une vue détaillée présentant toutes les images et les informations complètes de la publication.

```auto
myproject/
│
├── myproject/
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
│
├── post/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── forms.py
│ ├── models.py
│ ├── tests.py
│ ├── urls.py
│ ├── views.py
│ └── templates/
│ └── post/
│ ├── post_create.html
│ ├── home.html
│ └── post_detail.html
│
├── media/
│ └── images/
│
├── manage.py
└── requirements.txt

```

. **Modèles (`models.py`)**

```auto
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()

    def __str__ (self):
        return self.title

class Image(models.Model):
    post = models.ForeignKey(Post, related_name='images', on_delete=models.CASCADE)
    image = models.ImageField(upload_to='images/')

    def __str__ (self):
        return f"Image for {self.post.title}"

```

Formulaires (`forms.py`)

```auto
from django import forms
from .models import Post, Image
from django.forms import inlineformset_factory

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'description']

class ImageForm(forms.ModelForm):
    class Meta:
        model = Image
        fields = ['image']

ImageFormSet = inlineformset_factory(Post, Image, form=ImageForm, extra=1, can_delete=True)

```

**Vues (`views.py`)**

```auto
from django.shortcuts import render, redirect, get_object_or_404
from .models import Post, Image
from .forms import PostForm, ImageFormSet

def post_create(request):
    if request.method == 'POST':
        post_form = PostForm(request.POST)
        image_formset = ImageFormSet(request.POST, request.FILES, queryset=Image.objects.none())

        if post_form.is_valid() and image_formset.is_valid():
            post = post_form.save()
            images = image_formset.save(commit=False)
            for image in images:
                image.post = post
                image.save()
            return redirect('home')
    else:
        post_form = PostForm()
        image_formset = ImageFormSet(queryset=Image.objects.none())
    
    return render(request, 'post/post_create.html', {
        'post_form': post_form,
        'image_formset': image_formset
    })

def home(request):
    posts = Post.objects.all()
    return render(request, 'post/home.html', {'posts': posts})

def post_detail(request, pk):
    post = get_object_or_404(Post, pk=pk)
    images = post.images.all()

    # Débogage
    print(f"Post: {post.title}")
    for image in images:
        print(f"Image URL: {image.image.url}")

    return render(request, 'post/post_detail.html', {'post': post})

```

**URL Configuration (`urls.py` dans `post/`)**

```auto
# post/urls.py

from django.urls import path
from .views import post_create, home, post_detail

urlpatterns = [
    path('', home, name='home'),
    path('post/create/', post_create, name='post_create'),
    path('post/<int:pk>/', post_detail, name='post_detail'),
]

```

### **Templates**

#### `post_create.html`

```auto
<!-- post/templates/post/post_create.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Post</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: auto; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input[type="text"], textarea { width: 100%; padding: 10px; box-sizing: border-box; }
        .image-preview { display: flex; flex-wrap: wrap; gap: 10px; }
        .image-preview img { max-width: 100px; max-height: 100px; }
        .form-group input[type="submit"] { padding: 10px 20px; }
        .nav-links { margin-bottom: 20px; }
        .nav-links a { margin-right: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav-links">
            <a href="{% url 'home' %}">Home</a>
            <a href="{% url 'post_create' %}">Create Post</a>
        </div>
        <h1>Create a New Post</h1>
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ post_form.as_p }}
            {{ image_formset.management_form }}
            {% for form in image_formset %}
                {{ form.as_p }}
            {% endfor %}
            <button type="submit">Publish</button>
            <div class="form-group">
                <label for="images">Upload Images (Up to 8)</label>
                <input type="file" name="image" id="images" multiple>
            </div>
            <input type="submit" value="Submit">
        </form>
    </div>
</body>
</html>

```

home.html

```auto
<!-- post/templates/post/home.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: auto; }
        .post { border: 1px solid #ddd; padding: 15px; margin-bottom: 20px; border-radius: 5px; background-color: #f9f9f9; }
        .post img { max-width: 100%; height: auto; border-radius: 5px; }
        .post h2 a { text-decoration: none; color: #333; }
        .nav-links { margin-bottom: 20px; }
        .nav-links a { margin-right: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav-links">
            <a href="{% url 'home' %}">Home</a>
            <a href="{% url 'post_create' %}">Create Post</a>
        </div>
        <h1>All Posts</h1>
        {% for post in posts %}
            <div class="post">
                <h2><a href="{% url 'post_detail' post.pk %}">{{ post.title }}</a></h2>
                {% if post.images.exists %}
                    <img src="{{ post.images.first.image.url }}" alt="Image for {{ post.title }}">
                {% endif %}
                <p>{{ post.description }}</p>
            </div>
        {% empty %}
            <p>No posts available.</p>
        {% endfor %}
    </div>
</body>
</html>

```

#### `post_detail.html`####

```auto
<!-- post/templates/post/post_detail.html-->
<!DOCTYPE html>
<html>
<head>
    <title>{{ post.title }}</title>
</head>
<body>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
    <div>
        <div>
            {% for image in post.images.all %}
                <img src="{{ image.image.url }}" alt="Image for {{ post.title }}" style="max-width: 100%; height: auto; margin-bottom: 10px;">
            {% endfor %}
        </div>
    </div>
    <a href="{% url 'home' %}">Back to Home</a>
</body>
</html>

```

# chattona/urls.py (url principal )

```auto
from django.contrib import admin
from django.urls import path, include  
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('post.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

```

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 8, 2024, 4:58pm UTC](https://forum.djangoproject.com/t/creation-de-post-avec-django/33681/2 "2024-08-08T16:58:24Z")

</div>

Welcome @Kevinoomou !

Side note: When posting code here, enclose the code between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code properly formatted. (I’ve taken the liberty of fixing your original post for you.)

---

<div class="post-metadata">

**Author:** ![Kevinoomou](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kevinoomou/32/23118_2.png) [@Kevinoomou](https://forum.djangoproject.com/u/Kevinoomou)\
**Post date:** [August 8, 2024, 5:06pm UTC](https://forum.djangoproject.com/t/creation-de-post-avec-django/33681/3 "2024-08-08T17:06:00Z")

</div>

Objective  
Create a Django application that allows users to:

Create posts with up to 8 images.  
Preview images before submitting post.  
Display one image per post on the home page with a title and description.  
Go to a detailed view to see all images and full post information.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 8, 2024, 5:19pm UTC](https://forum.djangoproject.com/t/creation-de-post-avec-django/33681/4 "2024-08-08T17:19:41Z")

</div>

You have posted a lot of code, and a set of objectives.

What are you looking for from the community here?

Is there a particular issue or problem that you would like assistance with?

Is there something here that isn’t working as intended? If so what? (What errors or other symptoms are you seeing?)