Insert first two images only

Hi,

Sorry if this isn’t correct, I am new to all thos, but I believe the below is HTML / CSS that uses Django

<p style="text-align:center;">
    {% for image in images%}
  <img src="{{ image | image_size:'400px' }} " style="padding: 4px 4px 4px 4px; width: 40%; min-wdith: 300px; max-width: 400px;">
  {% endfor %}
</p>

At the moment it pulls all uploaded images and inserts them one after another. How do I edit the code so it only inserts the first two images?

Hi!

Take a look at for Tag | Django Template Tags and Filters

You can loop images until forloop.counter0 == 1.

Sorry again, not to sound stupid, where to I input that into my current code?

No problem.

Within for loops, Django provides some variables. One of them is counter0.

For example:

{% for image in images %}

    <!-- Display only the first two images -->
    {% if forloop.counter0 <= 2 %} 
        <!-- Your image goes here -->
    {% endif %}

        <!-- Every other image will be captured here -->
        
{% endfor %}

Hi, Thank you for that. Unfortunately when I put it into my page, it removes all images. This is the code I have inserted:

<p style="text-align:center;">
    {% for image in images %}
      {% if forloop.counter0 <= 2 %} 
  <img src="{{ image | image_size:'400px' }} " style="padding: 4px 4px 4px 4px; width: 40%; min-wdith: 300px; max-width: 400px;">
     {% endif %}
  {% endfor %}
</p>

Any idea what I am doing wrong?

Hmm, I don’t see anything wrong.

What are you sending from views.py?

I am not sure what this is sorry. Its a HTML template editor I am using in inkFrog (ebay HTML description editor). They host the images, hence their enforcement of the {{ image }} tag instead of me uploading them myself

The solution I proposed is for Django templates.
Are you sure inkFrog uses the same templating language?