Combining Python code inside HTML with variables passed in

Question

I am creating a web store with HTML and Bottle (Python). I know how to pass data between HTML and Python, as well as how to write Python code inside HTML (reference: http://karrigell.sourceforge.net/en/pythoninsidehtml.html).

What I struggle with is writing Python code inside the reference that gets passed from HTML to Python.

I load images from a database since I have a lot of them. I set and pass the variables image_name(index) to HTML like this:

@get('/store')
def showStore():
    images = models.images() # reads from database
    data = ', number_of_images={}'.format(len(images))

    for (id, title, path) in images:
        data += ', image_name{}={}, '.format(id, path)
        data += 'image_title{}={}'.format(id, title)

    return template('store.html' + data)

The relevant part of store.html:

<!-- Portfolio Gallery Grid -->

<div class="row">
    <% for i in range(1, number_of_images+1): %>
      <div class="column">
        <div class="content">
          <img src="static/images/{{image_name<%i%>}}.jpg">
          <h3> {{image_title<%i%>}} </h3>
        </div>
      </div>
    <% end %>
</div>

Since Bottle is not that well known: {{image_title}} in HTML gets the value passed in from the template (html, variables). Block <% %> enables you to write Python code inside it.

Everything worked properly when I didn't use indexing of image properties inside the HTML, so HTML and the for loop do work, the problem is with this part:

{{image_title<%i%>}}

<%i%> should in my opinion create a variable image_titlei but apparently it doesn't.

I get a template not found error, probably because the variables I am passing in (from the .py file) do not exist in the HTML.

The reason I would very much like to do this dynamically instead of hardcoding every image is that I have a lot of those images and every image has a whole table of relevant data I left out here because I would retrieve it in the same way as image's name and title.

I would appreciate any help with proper combining Python inside HTML with variables passed in since I really want to do it dynamically

Daniel Roseman · Accepted Answer · 2017-12-30 17:33:08Z

4

There are a rather large number of things wrong here.

Your template not found error is actually nothing to do with the strange manipulations you are doing within that template. It is because you are concatenating the template name with the data string in your call to template() in the last line of your Python code. I don't know bottle, but I'm absolutely positive the data needs to be a second parameter to that function:

return template('store.html', data)

As for the rest, there's absolutely no need to do anything that you are doing there. Just pass the images as a list, and iterate through that list in the templates. Dynamic variables are always a bad idea, and that applies just as much to templates as it does to standard Python code.

(Although note that you don't even create any dynamic variables; you just have a single string, formatted to look like a set of variable assignments. But that doesn't make it actually assign any variables anywhere.)

answered Dec 30, 2017 at 17:33

Daniel Roseman

602k68 gold badges910 silver badges923 bronze badges

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

1 Comment

Larisa Over a year ago

Didn't realize I can just pass in the list itself, thank you :)

Collectives™ on Stack Overflow

Combining Python code inside HTML with variables passed in

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related