0

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.

I am working on Django. I have an image on a dummy.html. This html is being rendered from a function ipdtest() in my views.py.

These are the respective code snippets of the views function and the HTML.

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))

My code in the dummy.html is as follows

<body class="body">
<div id="pageContainer">

     RETURNED FROM VIEW      
     resize factor={{resize_factor}}<br>          
     height={{height_frame}}<br>
     width={{width_frame}}<br>        
    <img id="original" src="{{frame.image.url}}" width="" height=""/><br>
    <img id="resized" src="{{frame.image.url}}" width="" height=""/>

    <br>
</div>

where height and width are the height and width of original image respectively. My problem is that based on the resize factor 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

To solve this, I googled and found that javascript was a possible solution and this is what I used in my HTML django template

<script type="text/javascript">
        alert('JS in Dummy')            
        document.getElementById('resized').style.width='100px';
        alert('###')            
        document.getElementById('resized').style.height='250px';

</script>

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.

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.

Please help. I have been stuck for a long while. Thanks in advance :)

EDIT:

The javascript should retrieve the django context variables in this way

 <script type="text/javascript">
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";

};

sriram
  • 407
  • 2
  • 8
  • 19
naiveDeveloper
  • 625
  • 2
  • 11
  • 28
  • http://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio – Priyanka Jul 23 '14 at 10:02
  • Hi @priyanka but I dont think that solves my problem. My main issue is stroring {{resize_factor}}, {{height_frame}} and {{width_frame}} in a way that HTML /JavaScript can understand and use it for setting the height and width attribute. It needs to be dynamic based on what it receives from the python code. – naiveDeveloper Jul 23 '14 at 10:15
  • Hi all, solved this! Problem was with the way I was retrieving my Django context variable in my HTML template.Please see the edit for the answer. – naiveDeveloper Jul 23 '14 at 10:39

0 Answers0