Django front-end loop interception data display

When making a website, the original template of the website needs to display three pictures. When I define the model, I define the relevant pictures to store

class ApplicationRelatedImage(models.Model):
    image = models.ImageField(upload_to=application_directory_path, verbose_name="应用相关图片", blank=True,
                              null=True)
    application = models.ForeignKey(Application, on_delete=models.CASCADE, blank=True, null=True)

    def __str__(self):
        return self.application.title

    class Meta:
        verbose_name = "应用相关图片"
        verbose_name_plural = verbose_name

When doing front-end display, the pictures can be displayed by loop calling, but the three pictures have their own styles, and the style cannot be changed by directly using the loop, which can be done by using forloop.counter

{
    
    % for image in application.applicationrelatedimage_set.all %}
                    {
    
    % if forloop.counter == 1 %}
                        <li class="pull_left"><img src="{
    
    { image.image.url }}" width="291" height="197"
                                                   alt=""/>
                        </li>

                    {
    
    % endif %}
                    {
    
    % if forloop.counter == 2 %}
                        <li class="pull_right"><img src="{
    
    { image.image.url }}" width="212" height="197" alt=""
                                                    class="frist"/></li>

                    {
    
    % endif %}
                    {
    
    % if forloop.counter == 3 %}
                        <li class="pull_right"><img src="{
    
    { image.image.url }}" width="212" height="197" alt=""
                                                    class="frist"/></li>

                    {
    
    % endif %}
                {
    
    % empty %}
                    <div class="no-post">暂时还没有banner图片!</div>
                {
    
    % endfor %}

reference link

Django front-end loop interception data display

Guess you like

Origin blog.csdn.net/cll_869241/article/details/120032854