using jquery and javascript to change the size of an image

Question

first of all let me say I have a very short knowledge of javascript and jquery. I'm currently following a tutorial for those topics. With that being said, I was wondering if I can change the size of an image with jquery. For example, I have a code ` this displays image fine, but size is sometimes big and sometimes small. I was looking over some article here https://blog.openshift.com/day-16-goose-extractor-an-article-extractor-that-just-works/ The have this code;

<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
    $("#myform").on("submit", function(event){
        $("#result").empty();
        event.preventDefault();
        $('#loading').show();
        var url = $("#url").val()
        $.get('/api/v1/extract?url='+url,function(result){
            $('#loading').hide(); 
            $("#result").append("<h4>"+result.title+"</h4>");
            $("#result").append("<img src='"+result.image+"' height='300' width='300'</img>");
            $("#result").append("<p class='lead'>"+result.text+"</p>");
    })


    });

</script>

what interests me is "#result").append("<img src='"+result.image+"' height='300' width='300'</img>"); would I be able to do the same thing with my code {{post.image}}? `

Answer 1

You can mix {{ post.image }} with your javascript without any problems in a Django template.

For instance, you could do this in your Django template:

<script type="text/javascript">
  var image = "{{post.image}}";
  // Beginning of the javascript implementation here.
  $("#result").append("<img src='"+image+"' height='300' width='300'</img>");
  // More javascript.
</script>