Simple Steps to Send Emails with Static Images in Django


I wanted to send an email with a template that included an image using send_mail from Django. The image was stored in the static folder of the Django project. I wanted to use the Django template system to generate the email content, but I was not sure how to reference the image in the template.


I asume you have a Django project with a static folder and a template that you want to use to generate an email.

Issue with {% static %} in Emails

The first thing I tried was to use the {% static %} template tag to generate the URL for the image. However, this tag does not generate a full URL, but a relative URL. This is not a problem when the template is rendered in the browser, but emails need a full URL to access the image.

This means that {% static %} only appends the relative path to the STATIC_URL, which is not sufficient for email clients to locate the image.

Solution - Generating Full URLs in the View (with code snippets)

The solution I found was to generate the full URL in the view and pass it as a context variable to the template.

This involves combining the site's domain with the static file path. This approach uses get_current_site to fetch the current site's domain and static to get the static file path, concatenating these to form a complete URL.

In the view

This is an example code to demonstrate how to create the full URL in a Django view:

This URL is then passed to the email template context and used in the src attribute of the img tag.

Please note that you need to adapt the paths to your project.

# in

# imports we need to create the full URL
from django.contrib.sites.shortcuts import get_current_site
from django.templatetags.static import static

# imports we need to render the template to use in the email
from django.template.loader import render_to_string

# imports we need to send the email
from django.core.mail import send_mail

def my_view(request): # or any other view
    # we get the current site to get the domain
    current_site = get_current_site(request)

    # we get the static file path and concatenate it with the domain
    logo_url = f'https://{current_site.domain}{static("images/your-logo.png")}'

    # we generate a context with the variables we want to use in the template
    context = {
                'logo_url': logo_url,
                # ... other context variables ...

    subject = 'Subject of your email'

    # we render the templates to use in the email
    message_plain = render_to_string('my_template.txt', context)
    message_html = render_to_string('my_template.html', context)

    email = '[email protected]'

    # we send the email
    send_mail(subject, message_plain, None, [email], html_message=message_html)

In the templates

When you send emails, it is recommended to provide both a plain text and an HTML version of the email. This is why we have two templates in the view.

HTML template

<!-- in my_template.html -->
<img src="{{ logo_url }}" alt="Your Logo">

Plain text template

In my case, I did not need to include the image in the plain text version of the email, but if you need to do so, you can use the same approach as in the HTML template.

<!-- in my_template.txt -->
Your Logo: {{ logo_url }}

Keep in mind

  • This approach is not limited to images. You can use it to generate full URLs for any static file.
  • This approach is not limited to emails. You can use it to generate full URLs for any static file in any context and render the templates.

Key Takeaways

  • Django's {% static %} template tag only generates a relative URL, which is not sufficient for email clients to locate the image.
  • To generate a full URL for a static file, you need to combine the site's domain with the static file path.
  • You can use get_current_site to fetch the current site's domain and static to get the static file path, concatenating these to form a complete URL.
  • You can use this approach to generate full URLs for any static file in any context and render the templates.
  • You construct the full URL in the view and pass it as a context variable to the template.

Happy coding!


Designing the User Experience: User Journeys and Visual Design | UX Series Part 3 of 6


Designing the user experience (UX) is a multifaceted process, involving the creation of user journeys and incorporating visual design elements to enhance user interaction.

What are User Journeys in UX

User journeys are the steps a user takes to complete a task, both online and offline. They are a critical component of UX design, as they help designers and other team members understand the user's needs and expectations.

You should always what tasks the user has to complete and the steps the user takes to complete it. This is not just an online process. It's also an offline process. For example, if you are designing a website for a restaurant, you need to take into account the user journey of the user when they are in the restaurant. If you are designing a complex system or an enterprise system, you need to take into account the user journey of the user from before the even use your product.

The 'Happy Path' and Alternatives

Designers anticipate the ideal path (happy path) users should follow, along with alternative routes that might include errors or unexpected user actions, typos in search, or other issues. This helps designers identify potential alternative routes and create a seamless user experience.

The Importance of Visual Design

Graphic and visual design is a way of telling your users how they should feel about you and your product before even using the product or knowing you. This can make r break the user experience. --

When I mean visual design I mean brand, graphic design and the look and feel of the product.

And this is a lot more than just adding pretty colours. These are some things you should keep in mind, as Visual Design encompasses elements beyond aesthetics:

  1. Typography: Choice of fonts and text styling.
  2. Colors: Use of color schemes to evoke emotions and clarity.
  3. Imagery: Deciding between photographic or illustrative styles.
  4. Layout Elements: Utilizing space, shapes, and lines for visual hierarchy.
  5. Symbols: Incorporating visual cues for intuitive navigation.
  6. Branding: Conveying the brand message through design elements.
  7. Accessibility: Ensuring that the design is accessible to all users.
  8. Consistency: Maintaining consistency across all design elements.
  9. Information Architecture: Organizing content for logical flow and navigation.

and these are just a few of the things you need to take into account when designing the visual design of a product.

In my opinion, all UX Teams should have a good graphic designer, or at least a good graphic designer should be part of the company.

All team members can and will contribute to the visual design, but a skilled designer adds the "Golden Touch" or "Designer's Touch" to the visual design efforts, providing that essential element that is usually unattainable without their expertise and that makes everything flow.

A skilled designer also understands that he/she needs to work with the team and not against the team and need all the different inputs to create the best possible design. She/ he also knows that the design is not about them and that it may and will change based on user feedback and other inputs.

Some tools for Visual Design

Mood Boards

Mood boards are a collection of images, colors, and other design elements that help designers visualize the look and feel of the product. They are a great way to communicate ideas and get feedback from stakeholders.

Colour Theory

Color theory is the study of how colors interact with each other and how they can be used to evoke emotions and convey meaning. It is a crucial element of visual design, as colors can be used to create a visual hierarchy and guide users through the design. (check our fictional example in the previous article)

When to Integrate Visual Design

  • Early Concepts: used to communicate ideas and generate interest.
  • During Analysis: During requirement gathering, interactive prototypes are encouraged. In this step is tempting to add visual design into the prototypes, but you have to take into account the effort and resources needed to do this, as this step is a highly iterative process.
  • Later in Design: When you are more confident about the features of your product, you can build more visual aspects into the prototype. This is called a High-fidelity prototype which is highly functional and can be interactive .

Information Architecture in UX

Information Architecture (IA) involves organizing and labeling content to ensure a logical and user-friendly flow. Key elements include content organization, navigation, search, and personalization. Testing and refinement are essential for effective IA.

In simple words, Information Architecture is how you organize your information for something. The outcome is a logical, clear and user-friendly flow through all the content of your sites.

Important: Test and refine: there will be parts that you did not understand correctly.


  • Good Information Architecture is invisible. You don't notice it when it's good, but you notice it when it's bad.
  • Good Information Architecture is important to Google and other search engines. If you have a good IA, your site will be easier to index and rank higher in search engines.

Key Elements of Information Architecture

  1. Organizing your content: How do you organize your content? How do you group your content? How do you label your content?
  2. Labelling (Words and icons) of the different parts
  3. Navigations (how does the user move around your site)
  4. Search
  5. Personalization. For example recommendations based on past activities.

Tools for Information Architecture

  • Card Sorting: A technique for organizing content into logical groups. It involves writing content on cards and asking users to group them into categories. This helps designers understand how users think about the content and how they expect it to be organized.
  • Tree Testing: A technique for testing the effectiveness of a site's navigation. It involves asking users to complete tasks by clicking through a site's navigation. This helps designers identify issues with the navigation and improve the IA.
  • User Testing: for identifying issues in the design and gathering valuable feedback for improvement.

Prototyping and User Testing

Prototyping involves creating models or mockups to visualize the design. It ranges from simple sketches to interactive, high-fidelity prototypes.

Prototype: a model or a mockup or an early version of a product before the real product is build. It’s faster and cheaper in the long term.

Humans are visual and tactile creatures and makes the idea tangible to start conversations.

-- from the course

The detail and tools used are going to change during he proces.

User Testing is essential for identifying issues in the design and gathering valuable feedback for improvement.

Key Takeaways

The journey of designing UX requires careful consideration of user journeys, visual design, and continuous user testing. Each element plays a vital role in creating an engaging and effective user experience.

-Discover more about User Journeys and Visual Design