title: Combining Python code inside HTML with variables passed in
body: <p>I am creating a web store with <code>HTML</code> and <code>Bottle</code> (<code>Python</code>). I know how to pass data between <code>HTML</code> and <code>Python</code>, as well as how to write <code>Python</code> code inside <code>HTML</code> (reference: <a href="http://karrigell.sourceforge.net/en/pythoninsidehtml.html" rel="nofollow noreferrer">http://karrigell.sourceforge.net/en/pythoninsidehtml.html</a>).</p>
  
  <p>What I struggle with is writing <code>Python</code> code inside the reference that gets passed from <code>HTML</code> to <code>Python</code>.</p>
  
  <p>I load images from a database since I have a lot of them. I set and pass the variables <code>image_name(index)</code> to <code>HTML</code> like this:</p>
  
  <pre><code>@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)
  </code></pre>
  
  <p>The relevant part of <code>store.html</code>:</p>
  
  <pre><code>&lt;!-- Portfolio Gallery Grid --&gt;
  
  &lt;div class="row"&gt;
      &lt;% for i in range(1, number_of_images+1): %&gt;
        &lt;div class="column"&gt;
          &lt;div class="content"&gt;
            &lt;img src="static/images/{{image_name&lt;%i%&gt;}}.jpg"&gt;
            &lt;h3&gt; {{image_title&lt;%i%&gt;}} &lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Since <code>Bottle</code> is not that well known: <code>{{image_title}}</code> in <code>HTML</code> gets the value passed in from the <code>template (html, variables)</code>. Block <code>&lt;% %&gt;</code> enables you to write <code>Python</code> code inside it.</p>
  
  <p>Everything worked properly when I didn't use indexing of image properties inside the <code>HTML</code>, so <code>HTML</code> and the <code>for loop</code> do work, the problem is with this part: </p>
  
  <pre><code>{{image_title&lt;%i%&gt;}}
  </code></pre>
  
  <p><code>&lt;%i%&gt;</code> should in my opinion create a variable <code>image_title</code><strong>i</strong> but apparently it doesn't.</p>
  
  <p>I get a <code>template not found</code> error, probably because the variables I am passing in (from the <code>.py</code> file) do not exist in the <code>HTML</code>.</p>
  
  <p>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. </p>
  
  <p>I would appreciate any help with proper combining <code>Python</code> inside <code>HTML</code> with variables passed in since I really want to do it dynamically</p>