nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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("Location: ${Name} " +

"DVR: ${DVR} " +

"IP Address: ${IPaddress} " +

"Year Installed: ${YearInst} " +

"Make: ${Make} " +

"Model: ${Model} " +

"Comments: ${Comments} " +

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

Vind meer berichten getagd met

Accepted answers

RickeyFight

This is how I do that:

All comments

DavidMc_Laughlin

Has anyone tried this within the configure Pop-ups dialog in the new map viewer?

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;

}));

});

RickeyFight

Yes change height or width to auto:

WIDTH=150 HEIGHT=Auto

This will keep the ratio of the image.

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

This is how I do that:

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.