Resize image in popup

[RoxanneWilson]

I'm creating my first web app based on the javascript API.  I'm creating a custom popup that has an image that when clicked on takes you to a specified link.  I've got the popup setup complete, with the exception of the image size.  I can't figure out where the resizing information gets placed.  Below is popup code.

var infoTemplate = new InfoTemplate();

          infoTemplate.setTitle("${FacilityID}");

          infoTemplate.setContent("<b>Location: </b>${Name}<br/>" +

                                  "<b>DVR: </b>${DVR}<br/>" +

                                  "<b>IP Address: </b>${IPaddress}<br/>" +

      "<b>Year Installed: </b>${YearInst}<br/>" +

      "<b>Make: </b>${Make}<br/>" +

      "<b>Model: </b>${Model}<br/>" +

      "<b>Comments: </b>${Comments} <br/>" +

      "<b>Camera: </b> Click image to see live feed <br/> <br/> <a target = '${HTMLlink}' href=${HTMLlink} </a>  <img src= https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/images/115334main_image_... </a>  <br/>") ;

[RickeyFight · Accepted solution]

This is how I do that:

<a href=http://gis.ashland.or.us/cemetery/${Photo_loc} target='_blank'> <img src=${Photo_loc} WIDTH=150 HEIGHT=150></a> <br/>

[RoxanneWilson]

That worked!

Do you know if there is a way to resize to maintain proportion?  At this point, I'm not sure if each image will be at the same resolution size.

[RickeyFight]

Yes change height or width to auto:

WIDTH=150 HEIGHT=Auto

This will keep the ratio of the image.

[RobertScheitlin__GISP]

Roxanne,

I would use a function to set the content that way you can calculate the size for width and height in the JS code to maintain aspect ratio.

require(['dojo/Deferred', 'dojo/_base/lang'], function(Deferred, lang){

    function getMeta(url){

         var def = new Deffered();

        var img = new Image();

        img.onload = function(){

             def.resolve({width: this.width, height: this.height});

        };

        img.src = url;

        return def;

    }

    var imgSize;

    getMeta("your image url").then( lang.hitch(this, function(value){

        imgSize = value;

        var imgWidth = 150;

        var imgHeight = (150/imgSize.width) * imgSize.height;

    }));

});