CODEWITHSUNDEEP
pythonhtmlcssdjangotwitter-bootstrap
Jhonny
Jhonny

Reputation: 145

Accommodate images according my template format

I have downloaded a free bootstrap for my practice project, that bootstrao only has html code, of course has css styles, js, and images too. My problem is that i have a project on django that print images from tags like this:

{% extends 'base.html' %}

{% block title %} Project Sample {% endblock %}

{% load static from staticfiles %}

{% block content %}

    <!-- Start Page Banner -->
    <div class="page-banner">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2>Portfolio</h2>
                    <p>Portfolio Subtitle</p>
                </div>
                <div class="col-md-6">
                    <ul class="breadcrumbs">
                        <li><a href="#">Home</a></li>
                        <li>Portfolio</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Banner -->

    <!-- Start Content -->
    <div id="content">
        <div class="container">
            {% for Product in products %}
            <div class=" portfolio-page portfolio-4column">
            <ul id="portfolio-list" data-animated="fadeIn">
                <li>
                    <img src="{{ Product.pimage0.url }}" alt="{{ Product.name }}" />
                    <div class="portfolio-item-content">
                        <span class="header">{{ Product.name }}</span>
                        <p class="body">{{ Product.size }}</p>
                    </div>
                    <a href="#"><i class="more">+</i></a>

                </li>
            </ul>
            </div>
            {% endfor %}
        </div>
    </div>
    <!-- End Content -->

{% endblock %}

As you saw my template, it has an heritage from my base.py, has a {% for Product in products %} tag that call some "items" founded here:

models.py

from django.db import models
from django.template.defaultfilters import slugify

class Product(TimeStampModel):

    name = models.CharField(max_length=200, unique=True)
    slug = models.SlugField(editable=False)
    # Product Images
    pimage0 = models.ImageField(upload_to = 'prodimg')
    pimage1 = models.ImageField(upload_to = 'prodimg')
    pimage2 = models.ImageField(upload_to = 'prodimg')
    pimage3 = models.ImageField(upload_to = 'prodimg')
    # END Product Images
    size = models.CharField(max_length=50)
    content = models.TextField()
    # Product Stats
    tolerance = models.CharField(max_length=3)
    efficiency = models.CharField(max_length=3)
    performance = models.CharField(max_length=3)
    lowrad = models.CharField(max_length=3)
    # END Product Stats
    # Other Features
    protection = models.TextField()
    environments = models.TextField()
    # END Other Features
    # Key Features
    kfeature0 = models.ImageField(upload_to = 'kfeats')
    kfeature1 = models.ImageField(upload_to = 'kfeats')
    # END Key Features
    category = models.ForeignKey(Category)


    def save(self, *args, **kwargs):
        if not self.id:
            self.slug = slugify(self.name)
        super(Product, self).save(*args, **kwargs)

    def __str__(self):
        return self.name

I don't have any problem importing that context, but when i do it i obtain this printing:

enter image description here

This is the original template view (as i wanna see my template):

enter image description here

How could I achieve that my printing looks as the original if i must represent my "products" form tags context?, I believe that this problem is for any html configuration because i look my class Product fine:

Look my views.py if is aid:

class SingleCatView(TemplateView):

    template_name = 'products/single_category.html'

    def get_context_data(self, **kwargs):
        context = super(SingleCatView, self).get_context_data(**kwargs)
        context['products'] = Product.objects.all().order_by('-created')[:6]
        context['categories'] = Category.objects.all()
        return context

finally this is the original code of the template:

<!-- Start Content -->
        <div id="content">
            <div class="container">
                <div class=" portfolio-page portfolio-4column">

                    <ul id="portfolio-list" data-animated="fadeIn">
                    <li>
                        <img src="images/Portfolio/1.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Town winter 2013</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/2.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Quarterly Musashino</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/3.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Mainichi April 2014</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/4.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Shitamachi Rocket</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/5.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Majesty express vol. 01</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/6.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/7.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/8.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/9.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/10.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/11.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/12.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                </ul>
                    <!-- End Portfolio Items -->

                </div>
            </div>
        </div>
        <!-- End Content -->

any contribution is wellcome, Thanks for evaluate!

Upvotes: 0

Views: 51

Answers (2)

Jhonny
Jhonny

Reputation: 145

I answer my own question, first thanking to rnevius, my problem was on situating my iteration tags in the template, I should has those tags like this:

<div class=" portfolio-page portfolio-4column">
        <ul id="portfolio-list" data-animated="fadeIn">
        {% for Product in products %}
            <li>
                <img src="{{ Product.pimage0.url }}" alt="{{ Product.name }}" />
                <div class="portfolio-item-content">
                    <span class="header">{{ Product.name }}</span>
                    <p class="body">{{ Product.size }}</p>
                </div>
                <a href="#"><i class="more">+</i></a>

            </li>
        {% endfor %}
        </ul>
        </div>

instead of my above question so i can replicate on good form the original style.

Upvotes: 0

rnevius
rnevius

Reputation: 27092

You can simply change the ul to an list-inline type:

<ul id="portfolio-list" class="list-inline" data-animated="fadeIn">

But you should really read up on Bootstrap first. It won't magically format your templates for you.

My suggestion will only work properly if your content has a fixed width, and your images are the proper size.

Upvotes: 1

Related Questions