title: resize image height and width dynamically based on variable retrieved in django HTML Template
body: <p>This seems like a very trivial doubt but I have spent a lot of time on it now and have not found any satisfactory solution.</p>
  
  <p>I am working on Django. I have an image on a <code>dummy.html</code>. This html is being rendered from a function <code>ipdtest()</code> in my <code>views.py</code>. </p>
  
  <p>These are the respective code snippets of the views function and the HTML.</p>
  
  <pre><code>def ipdtest(request, frameslug):
    frame= VTryON.objects.get(slug=frameslug)
    image_of_frame=frame.image.url
    frame_path=("D:/Work-Backup/LiClipse Workspace/vTryON_DJango_Integration/vTryON/templates"+str(image_of_frame))
    d=Frame_Superimposition()
    resize_factor,height_frame,width_frame=Frame_Superimposition.frameSuperimpose(d,frame_path)
    context={'frame':frame,'resize_factor':resize_factor, 'height_frame':height_frame,'width_frame':width_frame}
    return render_to_response('dummy.html', context,context_instance=RequestContext(request))
  </code></pre>
  
  <p>My code in the <code>dummy.html</code> is as follows</p>
  
  <pre><code>&lt;body class="body"&gt;
  &lt;div id="pageContainer"&gt;
  
       RETURNED FROM VIEW      
       resize factor={{resize_factor}}&lt;br&gt;          
       height={{height_frame}}&lt;br&gt;
       width={{width_frame}}&lt;br&gt;        
      &lt;img id="original" src="{{frame.image.url}}" width="" height=""/&gt;&lt;br&gt;
      &lt;img id="resized" src="{{frame.image.url}}" width="" height=""/&gt;
  
      &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>where <code>height</code> and <code>width</code> are the height and width of original image respectively. My problem is that based on the <code>resize factor</code> variable I want to dynamically change the height and width of my resized image. I can see all the values of resize factor, height and width displayed on to my django HTML page</p>
  
  <p>To solve this, I googled and found that javascript was a possible solution and this is what I used in my HTML django template</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          alert('JS in Dummy')            
          document.getElementById('resized').style.width='100px';
          alert('###')            
          document.getElementById('resized').style.height='250px';
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Instead of the '100px' and the '250px' (which I had set just to see whether the JavaScript works or not) for width and height here I should have the value for {{width * resize factor }} and {{height * resize factor}} here.</p>
  
  <p>How should I do that so that based on the resize factor the width and height of the resized image is set. Is JavaScript the proper way to do this? I don't even see the code in the JavaScript going beyond the first alert in the JavaScript.</p>
  
  <p>Please help. I have been stuck for a long while. Thanks in advance :)</p>
  
  <p>EDIT:</p>
  
  <p>The javascript should retrieve the django context variables in this way</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
  function resizeFrame(){
          alert('resfac###')
          var resize_factor="{{resize_factor}}";
          var height_frame ="{{height_frame}}";
          var width_frame ="{{width_frame}}";
          var resized_ht= (height_frame * resize_factor)
          var resized_wt= (width_frame * resize_factor)
          alert(resized_ht)
          alert(resized_wt)
          document.getElementById('resized').style.height= resized_ht+"px";
          alert('###')
          document.getElementById('resized').style.width= resized_wt+"px";
  </code></pre>
  
  <p>};
      </p>