Displaying multiple images in a blog post

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Displaying multiple images in a blog post

hbat
Suppose I have two images, "\media\images\image1.jpg" and "\media\images\image2.jpg". I want to display them in a blog post that I've written. I thought I should create a model for images but with multiple images I cannot figure out how to add them to the body of my blog post. It seems like I have to write full locations to the body like this:
 <img src="\media\images\image1.jpg" alt="My Desrciption" />
instead of something like this:
 <img src="{{ post.images.image.url[1] }}" alt="{{ post.images.image.url[2] }}" />
I prefer a method like the latter one.
 
Here is my app structure:
# models.py:
class Post(models.Model):
    title = models.CharField(max_length=250)
    body = models.TextField()
    slug = models.SlugField(max_length=250)
    publish = models.DateTimeField(default=timezone.now)

class Images(models.Model):
    post = models.ForeignKey(Post, default=None, related_name='images')
    description = models.TextField()
    image = models.ImageField()


# views.py:
def post_detail_view(request, year, month, day, postslug):
    post = get_object_or_404(Post,
                             slug=postslug,
                             publish__year=year,
                             publish__month=month,
                             publish__day=day
                             )
    return render(request=request,
                  template_name='blogapp/post/detail.html',
                  context={'post': post})

				  
<raw># detail.html:
{% extends "blogapp/base.html" %}
{% block title %}{{ post.title }}{% endblock %}
{% block content %}
    <h1>{{ post.title }}</h1>
    {{ post.body|safe }}
{% endblock %}


post.body = """
<h2>Example blog post</h2>
  <p>Here is some text. And image for this part:</p>
  <img src="{{ post.image1.filename }}" alt="{{ post.image1.description }}" />
  <p>Here is some other text and image for this part:</p>
  <img src="{{ post.image2.filename }}" alt="{{ post.image2.description }}" />
  <p>I'm ending my blog post here.</p>
"""
 
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Displaying multiple images in a blog post

hbat
(I don't know what happened to original post.)

Suppose I have two images, "\media\images\image1.jpg" and "\media\images\image2.jpg". I want to display them in a blog post that I've written. I thought I should create a model for images but with multiple images I cannot figure out how to add them to the body of my blog post. It seems like I have to write full locations to the body like this:

<img src="\media\images\image1.jpg" alt="My Desrciption" />

instead of something like this:

<img src="{{ post.images.image.url[1] }}" alt="{{ post.images.image.url[2] }}" />

I prefer a method like the latter one. 
 
Here is my app structure:
# models.py:
class Post(models.Model):
    title
= models.CharField(max_length=250)
    body
= models.TextField()
    slug
= models.SlugField(max_length=250)
    publish
= models.DateTimeField(default=timezone.now)

class Images(models.Model):
    post
= models.ForeignKey(Post, default=None, related_name='images')
    description
= models.TextField()
    image
= models.ImageField()


# views.py:
def post_detail_view(request, year, month, day, postslug):
    post
= get_object_or_404(Post,
                             slug
=postslug,
                             publish__year
=year,
                             publish__month
=month,
                             publish__day
=day
                             
)
   
return render(request=request,
                  template_name
='blogapp/post/detail.html',
                  context
={'post': post})




 
# detail.html:
{% extends "blogapp/base.html" %}
{% block title %}{{ post.title }}{% endblock %}
{% block content %}
   
<h1>{{ post.title }}</h1>
   
{{ post.body|safe }}
{% endblock %}



post.body = """
<h2>Example blog post</h2>
  <p>Here is some text. And image for this part:</p>
  <img src="
{{ post.image1.filename }}" alt="{{ post.image1.description }}" />
  <p>Here is some other text and image for this part:</p>
  <img src="
{{ post.image2.filename }}" alt="{{ post.image2.description }}" />
  <p>I'm ending my blog post here.</p>
"""

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/2f098a0a-d711-44af-b22a-058447872f22%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Displaying multiple images in a blog post

ludovic coues
I would be a bit wary of a django blog making use of template tag.

Anyway, I believe your code should be more like that: {{
post.images[2].image.url }}.

Personally, I would delegate fetching the url to another part of the code.
Something like one endpoint would return a list of images. A piece of
javascript query that list and store it. When the user press a button,
put an image tag at the cursor position.

Or I would write a custom tag which would be used like {% image 2 %}
and would return the url of the second image of the current post.

2017-04-10 6:29 GMT+02:00 HBat <[hidden email]>:

> (I don't know what happened to original post.)
>
> Suppose I have two images, "\media\images\image1.jpg" and
> "\media\images\image2.jpg". I want to display them in a blog post that I've
> written. I thought I should create a model for images but with multiple
> images I cannot figure out how to add them to the body of my blog post. It
> seems like I have to write full locations to the body like this:
>
> <img src="\media\images\image1.jpg" alt="My Desrciption" />
>
> instead of something like this:
>
> <img src="{{ post.images.image.url[1] }}" alt="{{ post.images.image.url[2]
> }}" />
>
> I prefer a method like the latter one.
>
> Here is my app structure:
> # models.py:
> class Post(models.Model):
>     title = models.CharField(max_length=250)
>     body = models.TextField()
>     slug = models.SlugField(max_length=250)
>     publish = models.DateTimeField(default=timezone.now)
>
> class Images(models.Model):
>     post = models.ForeignKey(Post, default=None, related_name='images')
>     description = models.TextField()
>     image = models.ImageField()
>
>
> # views.py:
> def post_detail_view(request, year, month, day, postslug):
>     post = get_object_or_404(Post,
>                              slug=postslug,
>                              publish__year=year,
>                              publish__month=month,
>                              publish__day=day
>                              )
>     return render(request=request,
>                   template_name='blogapp/post/detail.html',
>                   context={'post': post})
>
>
>
>
>
> # detail.html:
> {% extends "blogapp/base.html" %}
> {% block title %}{{ post.title }}{% endblock %}
> {% block content %}
>     <h1>{{ post.title }}</h1>
>     {{ post.body|safe }}
> {% endblock %}
>
>
>
> post.body = """
> <h2>Example blog post</h2>
>   <p>Here is some text. And image for this part:</p>
>   <img src="{{ post.image1.filename }}" alt="{{ post.image1.description }}"
> />
>   <p>Here is some other text and image for this part:</p>
>   <img src="{{ post.image2.filename }}" alt="{{ post.image2.description }}"
> />
>   <p>I'm ending my blog post here.</p>
> """
>
> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [hidden email].
> To post to this group, send email to [hidden email].
> Visit this group at https://groups.google.com/group/django-users.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/2f098a0a-d711-44af-b22a-058447872f22%40googlegroups.com.
>
> For more options, visit https://groups.google.com/d/optout.



--

Cordialement, Ludovic Coues
+33 6 14 87 43 42

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAEuG%2BTZHW5%3DCnNidqtumDw5ccc7JHk%2B%3Dz9%3DFtKyNgrZ0VCyXMw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Displaying multiple images in a blog post

hbat
Thanks for the response. 

If I put a template tag within the post.body then the tags might not be rendered because only detail.html will be rendered the tags within the post.body will be seen as raw texts. 

Currently, I'm thinking about using an approach like Markdown images. And then, as the example you gave in your reply, put something like ![<slug of image 2>] to insert the <img src="<image2's url>" alt="<image2's description>" />. I don't know how to do this either but that's the direction I'm heading. Any input will be appreciated. 


On Monday, April 10, 2017 at 4:07:25 AM UTC-4, ludovic coues wrote:
I would be a bit wary of a django blog making use of template tag.

Anyway, I believe your code should be more like that: {{
post.images[2].image.url }}.

Personally, I would delegate fetching the url to another part of the code.
Something like one endpoint would return a list of images. A piece of
javascript query that list and store it. When the user press a button,
put an image tag at the cursor position.

Or I would write a custom tag which would be used like {% image 2 %}
and would return the url of the second image of the current post.

2017-04-10 6:29 GMT+02:00 HBat <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="I7lLDBVkAAAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">hikmetb...@...>:

> (I don't know what happened to original post.)
>
> Suppose I have two images, "\media\images\image1.jpg" and
> "\media\images\image2.jpg". I want to display them in a blog post that I've
> written. I thought I should create a model for images but with multiple
> images I cannot figure out how to add them to the body of my blog post. It
> seems like I have to write full locations to the body like this:
>
> <img src="\media\images\image1.jpg" alt="My Desrciption" />
>
> instead of something like this:
>
> <img src="{{ post.images.image.url[1] }}" alt="{{ post.images.image.url[2]
> }}" />
>
> I prefer a method like the latter one.
>
> Here is my app structure:
> # models.py:
> class Post(models.Model):
>     title = models.CharField(max_length=250)
>     body = models.TextField()
>     slug = models.SlugField(max_length=250)
>     publish = models.DateTimeField(default=timezone.now)
>
> class Images(models.Model):
>     post = models.ForeignKey(Post, default=None, related_name='images')
>     description = models.TextField()
>     image = models.ImageField()
>
>
> # views.py:
> def post_detail_view(request, year, month, day, postslug):
>     post = get_object_or_404(Post,
>                              slug=postslug,
>                              publish__year=year,
>                              publish__month=month,
>                              publish__day=day
>                              )
>     return render(request=request,
>                   template_name='blogapp/post/detail.html',
>                   context={'post': post})
>
>
>
>
>
> # detail.html:
> {% extends "blogapp/base.html" %}
> {% block title %}{{ post.title }}{% endblock %}
> {% block content %}
>     <h1>{{ post.title }}</h1>
>     {{ post.body|safe }}
> {% endblock %}
>
>
>
> post.body = """
> <h2>Example blog post</h2>
>   <p>Here is some text. And image for this part:</p>
>   <img src="{{ post.image1.filename }}" alt="{{ post.image1.description }}"
> />
>   <p>Here is some other text and image for this part:</p>
>   <img src="{{ post.image2.filename }}" alt="{{ post.image2.description }}"
> />
>   <p>I'm ending my blog post here.</p>
> """
>
> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to <a href="javascript:" target="_blank" gdf-obfuscated-mailto="I7lLDBVkAAAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">django-users...@googlegroups.com.
> To post to this group, send email to <a href="javascript:" target="_blank" gdf-obfuscated-mailto="I7lLDBVkAAAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">django...@....
> Visit this group at <a href="https://groups.google.com/group/django-users" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://groups.google.com/group/django-users&#39;;return true;" onclick="this.href=&#39;https://groups.google.com/group/django-users&#39;;return true;">https://groups.google.com/group/django-users.
> To view this discussion on the web visit
> <a href="https://groups.google.com/d/msgid/django-users/2f098a0a-d711-44af-b22a-058447872f22%40googlegroups.com" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://groups.google.com/d/msgid/django-users/2f098a0a-d711-44af-b22a-058447872f22%40googlegroups.com&#39;;return true;" onclick="this.href=&#39;https://groups.google.com/d/msgid/django-users/2f098a0a-d711-44af-b22a-058447872f22%40googlegroups.com&#39;;return true;">https://groups.google.com/d/msgid/django-users/2f098a0a-d711-44af-b22a-058447872f22%40googlegroups.com.
>
> For more options, visit <a href="https://groups.google.com/d/optout" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://groups.google.com/d/optout&#39;;return true;" onclick="this.href=&#39;https://groups.google.com/d/optout&#39;;return true;">https://groups.google.com/d/optout.



--

Cordialement, Ludovic Coues
+33 6 14 87 43 42

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/5162e282-7843-4bcf-afce-5c417503c9ad%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Loading...