How can I get the image to show in the img container, using Django template tags?

Question

So I am at the last couple details of my portfolio website, and everything has gone relatively smoothly. I have not had an issue with images before, but this time I am using a {% for loop %} to iterate over the code for the card and I just have the variable template tags that create a new object every time I add something new in the django admin interface.

I feel like there is some small detail I am just completely missing, because I had it working at one point, but then decided to do the iteration instead of hard-coding it in, and it just won't show up. Another pair of eyes would be nice.

This is the section of my index.html:

{% block content %}
  {% load static %}

  
  
  
    Jordan Miracle
    
    
    
    

    
    

  


  
    
      
    
    Developer and Aspirant Data
      Scientist
  

  
    Home
    
    
      
        
          Github
        
        
          Twitter
        
        
          LinkedIn
    
    
      Blog
  

  
    
      About Me
      
        
          
        
      
      
        
        
I enjoy web development, and have a true love for analyzing data. Whether creating visualizations and
          interpreting what I find,

          or creating a machine learning model to try and make predictions. 

          Things that interest me the most are the climate and our ecosystem, consciousness, and the cosmos that we live
          in.
        
      
      
        
          
        
        
          {% for project in projects %}
            
              {{ project.title }}

              
              

              
              {% if project.image %}
              
                
              
              {{ project.description }}
              


              
                Live Site
                Code
              
            {% endif %}
            

          {% endfor %}


  
{% endblock %}

My style.css:

  font-family: 'Oswald', sans-serif;
  text-align: center;
  background-color: #00FF00;
  color: #303030;
}

/* ---------- HOME ---------- */

/* create color-hover-effect for M logo and buttons */
.highlight-orange:hover {
  color: #417FD5;
  border-color: #ffa000;
}

.highlight-green:hover {
  color: darkred;
  border-color: indianred;
}


button a {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: darkslateblue;
  color: inherit;
  /* increase the clickable area */
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 1.3em;
  margin: -1.3em;
}

.nav-button {
  font-size: 1.1em;
  margin: 20px;
  padding: 10px;
  border: 2px solid #303030;
  border-radius: 25px;
  color: #303030;
  background-color: #fdfdfd;
  box-shadow: #417FD5;
}


.button-row-mobile,
.button-row-portfolio-mobile {
  display: none;
}

/* ---------- PORTFOLIO ---------- */

.portfolio {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.project {
  margin: 20px;
  padding: 20px;
  border: 3px solid #303030;
  border-radius: 20px;
  color: transparent;
  background-color: transparent;
  max-width: 300px;
}

.project-links {
  display: flex;
  justify-content: space-around;
}

.project-links a {
  color: #4DAAE3;
}

.project-links a:visited {
  color: #ffffff;
}

.project-links a:hover {
  color: #4DAAE3;
}

.button-row-portfolio {
  position: fixed;
  width: 100%;
  justify-content: space-between;
  bottom: 5px;
}

.button-row-portfolio .nav-button {
  opacity: 0.8;
}

/*
  restrict img to uniform size automatically,
  while showing the center portion of the screenshot. adapted from:
  https://stackoverflow.com/questions/15866223/how-to-make-images-get-cut-off
*/
.img-container {
  height: 200px;
  width: 250px;
  color: transparent;
  background-position: center;
  border: 1px solid #303030;
  border-radius: 20px;
  background-repeat: no-repeat;
}

/* ---------- FOOTER ---------- */

.separator {
  display: none;
}

  #footer {
    position : absolute;
    bottom : 0;
    height : 40px;
    margin-top : 40px;
  }


footer {
  font-size: 16px;
  color: #303030;
}

.site-footer {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #aa2222;
  color: white;
  font-style: italic;
  text-align: center;
}

.icon {
  height: 36px;
  width: auto;
  padding: 8px;
}

.overflow {
  color: #fdfdfd;
  font-size: 2.5em;
}

/* ---------- RESPONSIVE ELEMENTS ---------- */

/* TODO: remove blue highlighting when buttons are clicked */
@media only screen and (max-width: 768px) {

  .logo {
    font-size: 14em;
  }

  .button-row-main,
  .button-row-portfolio {
    display: none;
  }

  .button-row-mobile {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-around;
  }

  .button-row-portfolio-mobile {
    display: flex;
    position: fixed;
    width: 100%;
    justify-content: space-around;
    bottom: 5px;
  }

  .button-row-portfolio-mobile .nav-mobile {
    opacity: 0.8;
  }

  .nav-mobile {
    font-family: 'Oswald', sans-serif;
    font-size: 1em;
    border: none;
    border-radius: 100px;
    background-color: #fdfdfd;
  }

  .highlight-orange {
    color: #4DAAE3;
    border-color: #4DAAE3;
    fill: #4DAAE3;
  }

  .highlight-green {
    color: lightgreen;
    border-color: lightgreen;
    fill: lightgreen;
  }

  .highlight-blue {
    color: lightblue;
    border-color: lightblue;
    fill: lightblue;
  }

  .separator {
    display: block;
  }

  footer {
    margin-top: 24px;
  }

  .icon {
    height: 45px;
    width: auto;
    padding: 20px;
  }
}

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: "Ubuntu Mono", serif;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    width: 75%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

My models.py:



class Project(models.Model):
    title = models.CharField(max_length=100)
    description = models.CharField(max_length=120)
    image = models.FilePathField(path='portfolio/images')
    url = models.URLField(blank=True)
    code_url = models.URLField(blank=True)

    def __str__(self):
        return self.title

Here is my file structure.

If anybody needs more information, or if I need to provide more details, just let me know. This is the last thing really standing in my way of deploying and it's been a pain.

Before changing it to img class

After changing it from a div class to img class

Jordan Miracle · Accepted Answer

The images needed to be registered properly in the Django admin shell.

Once in the shell, I had to import the models.

from portfolio.models import Project

Then, p2 = Project.objects.get(id=2)

p2.image =

And so on. Once they were registered in the DB, they popped up right away.

How can I get the image to show in the img container, using Django template tags?

Answers (2)

Related Questions