How to parse the "src" of image tag in Django textfield?

user_18500643 0
Viewed 46

So I have code in my HTML template like this

<div class="blog-content">
    {{post.text|safe|linebreaks}}
    <p><img src="{{ image_dict.1.url }}" alt=""></p>
</div>

This above renders the image fine in HTML. My view is like this

def post_detail(request, slug):
post = BlogPost.objects.get(slug=slug)
images = post.images.all()
image_dict = {}
for image in images:
    image_dict[image.image_order] = image.image
    print(image.image)

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

Basically I'm setting it up so that I can render the images via {{image_dict.image_order.url}}

But I wanna render the images as per following to associate them with each paragraph of text like so

Lorem ipsum dolor sit amet, consectetur adipiscing elit. massa a posuere tempus, urna risus lacinia eros, et euismod.<a><img src="{{ image_dict.1.url }}" alt=""></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.

The above is the content from within Django textfield.

However, while the code within the template evaluates to the image url, for example say for an image with order '1'

<p><img src="{{ image_dict.1.url }}" alt=""></p> becomes
<p><img src="/media/images/codewithlewis.png" alt=""></p>

The exact same code I typed in django's textfield (as written in above string) remains like

<p><img src="{{ image_dict.1.url }}" alt=""></p>

within HTML and nothing gets rendered of course.

A screen shot of this:

I'm fairly new to Django but I feel like I have tried everything. How might I go about fixing this? Thank you.

django-templates django
1 Answers

It sounds like you are storing a Django Template in a TextField (instead of your templates folder).

If this is true you need to use Django's Template Engine to render that TextField similar to how Django renders Template files.

Here is a full working example of how to render a string as a template.

from django.template import Context, Template
image_dict = {
    0: {"url": "https://google.com"},
    1: {"url": "https://amazon.com"},
}
my_template_snippet = Template('<p><img src="{{ image_dict.1.url }}" alt=""></p>')
my_rendered_template_snippet = my_template_snippet.render(
    Context({"image_dict": image_dict})
)

It may look like the following in your view.

from django.template import Context, Template
def post_detail(request, slug):
    # Get BlogPost
    post = BlogPost.objects.get(slug=slug).prefetch_related("images")
    # Construct image_dict
    images = post.images.all()
    image_dict = {}
    for image in images:
        image_dict[image.image_order] = image.image
    # Convert my_text_field to Template
    my_template = Template(post.my_text_field)
    # Render Template using image_dict
    my_template_rendered = my_template.render(Context({"image_dict": image_dict}))
    # Set BlogPost.my_text_field to the Rendered Template
    post.my_text_field = my_template_rendered
    return render(
        request,
        "blog/post_detail.html",
        {
            "post": post,
            "images": images,
            "image_dict": image_dict,
        },
    )
user_38623250
Related