Python and Django Full Stack - Include Image and CSS References

In the previous blog post, we looked at template tags to render custom text. In this post, we will see how to refer to images and css files.  

The steps are the same as for template tags, except for the following differences:

1.      Create a folder called static in the top level project folder. Inside the static directory, create two folders - 
        i. images to store the pictures. (save any picture e.g. mypicture.jpg in this directory)
        ii. css to store the css file (e.g. mystyles.css)
2.     Include this folder to the settings.py file, so Django knows where to find it. Note that the variable STATIC_URL comes pre-defined from versions 1.9 and up. Ensure there are no duplicate declarations of the variables.

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    'static',
]
3.      Test if this works, by going to 127.0.0.1:8000/static/images/mypicture.jpg. This will confirm the paths are set up correctly.
4.      Now, we set up a template tag for this.
5.      At the top of the html file, add a specific tag {% load static%} just below <!DOCTYPE html> tag
6.      Insert the image where you want it in the html file with the tag
<img src={{%static “images/mypicture.jpg%} />
Notice that the image template tag is {%%}, different from the text template {{}}
7.   To also include a css file, create a css folder under /static. Under static/css, create a css file (e.g. mystyle.css). In the index.html file, define it using the “<link>” tag as shown below:

 

<!DOCTYPE html>

{% load static%} //include this

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>First App</title>

    <link rel="stylesheet" href="{% static "css/mystyle.css" %}" />

 

</head>

<body>

    <h1>Hello, this is a picture of Django himself from index.html</h1>

    <img src = "{% static "images/django.jpg"%}" alt = "Uh Oh, didn't show">

</body>

</html>

 
8. Now, when you reload the app, this is what you should see.


Comments

Post a Comment

Popular posts from this blog

Python and PostgreSQL – Creating database, schema, tables and inserting data using python library psycopg2

In this post, we will learn to create a database called 'foodApp' in postgreSQL,a schema called 'foodschm' within the database, a table called 'menu' within the schema, and finally, insert data into the table 'menu'.   Install PostgreSQL from https://www.postgresql.org/download/ .  Install psycopg2 using pip install.  C reate a folder under your working directory. Let's call it 'foodApp'. Inside  'foodApp', create a directory called backend.Next, i nside the folder backend, create the program called main.py with the code as follows: 1.       Import psycopg2  import psycopg2 2.       Define database connection properties and connect to the host. Connect to the default database ‘postgres’ with whatever password you gave it during installation.    Make sure to keep the autocommit to true. Without this, postgresql will throw up a transaction error.  Use the connection object to create a cu...
Read more

Full Stack Web Developer BootCamp. (A course by Jose Portilla on Udemy) - Updated for recent versions of Python and Django

Image
      Welcome to a step by step write up to creating a web application using Python (V3.10) and dJango (v4.1.5). While going through the course by Jose Portilla on Udemy for a full stack web development bootcamp by Jose Portilla, I realised that the course followed much older versions of python and Django. Hence, I noted updated findings and hope that it may help someone chart their path through a bit easily. I am skipping the parts in learning HTML/CSS/JavaScript etc and going straight to Section 16 (Django Level One Basics) of the course.   1.      Install Django using Python pip feature. Command prompt: pip install django 2.      Create your project under your working directory. Let us call it "first_project". Command prompt:   django-admin startproject first_project This command will create the following files under the first_project directory -   asgi.py, settings.py, urls,py and wsgi.py:  ...
Read more

Python and Django Full Stack - Have React speak to PostgreSQL

Backend Overview The most popular way of getting ReactJS to speak to PostgreSQL is using a backend framework that can handle the communication between the two, such as Express.js or Django.  While the PERN stack (PostgreSQL, Express, React, Node.js) is a popular full-stack solution for building web applications with React and PostgreSQL, the  React/Django/PostgreSQL stack is popular for its versatility and ease of use, and is suitable for large-scale web applications that require a solid backend. In this post, we will work with the Django framework and achieve our objective of having react communicate with PostgreSQL. ReactJS/Django/PostgreSQL stack Here's a general overview of how to connect ReactJS, Django, and PostgreSQL to build a full-stack web application: Setting up the backend: Install Django using pip:  pip install django Create a new Django project using the command line:  django-admin startproject projectname Create a new Django app within the project:...
Read more