Python Variables in HTML

Question

I recently coded a script that scrapes headlines and images off of https://thestar.com ( The Toronto Star ), It takes the first 10 h3 elements from the site and the corresponding images ( 10 img elements ), and displays them on my news aggregator website.

However , my index.html file is having a problem.

As you can see, instead of displaying the images in order by its corresponding headline, its just displaying ALL of the images in every single headline.

All i need is for each image from the 10 images seen in the screenshot i put up above to show one by one in order next to each headline.

Here's the code for the container element that is displaying the headlines and images in my html file :

<div class="col-6">
        <center><i><u><h3 class="text-centre">Live News from The Toronto Star</h3></u></i></center>
        {% for n in toi_news %}
        <strong><h5>{{n}}</h5></strong>
        {% for i in images %}
        <img src="{{i}}">
        {% endfor %}
        <hr>
        {% endfor %}
        <br>
    </div>

Can anyone help me? Any help would be greatly appreciated.

Musa · Accepted Answer · 2022-04-13 18:40:42Z

1

You need to loop through the images and the headlines concurrently not nesting the image loop in the headline loop.

<div class="col-6">
    <center><i><u><h3 class="text-centre">Live News from The Toronto Star</h3></u></i></center>
    {% for i, n in zip(images, toi_news) %}
    <strong><h5>{{n}}</h5></strong>
    <img src="{{i}}">
    <hr>
    {% endfor %}
    <br>
</div>

If you cant you the above syntax you can loop over an index for both lists

<div class="col-6">
    <center><i><u><h3 class="text-centre">Live News from The Toronto Star</h3></u></i></center>
    {% for x in range(len(toi_news)) %}
    <strong><h5>{{toi_news[x]}}</h5></strong>
    <img src="{{images[x]}}">
    <hr>
    {% endfor %}
    <br>
</div>

edited Apr 13, 2022 at 18:40

answered Apr 13, 2022 at 18:21

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

codingnewbie12345 Over a year ago

Its giving me this error: TemplateSyntaxError at / 'for' statements should use the format 'for x in y': for i, n in zip(images, toi_news)

Musa Over a year ago

Well maybe try iterating via an index

codingnewbie12345 Over a year ago

its now giving me this error lol : TemplateSyntaxError at / Could not parse the remainder: '(len(toi_news))' from 'range(len(toi_news))'

codingnewbie12345 Over a year ago

Apparently you cant perform method calls in django templates. is there any other alternative you can help me out with?

Collectives™ on Stack Overflow

Python Variables in HTML

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related