Image size in popup is not respected

[rtola-wpc]

Thrilled to see Leaflet flying in Backdrop. This is such a milestone.

If I assign a content image to the description content on popups, JavaScript appears to override the expected size of the image. I expect the field's image style - as specified in the view field - to determine the rendered image size in the leaflet map, but it appears not to be so.

For example, if I specify an image style of 300x250 pixels for a given field (an image), then select that image field in the view's format settings - in the description content - I'd expect each node's image field to be rendered at that size. However, in Firefox's inspector, although I can see the correct size properties within the image tag, the parent leaflet-popup-content div imposes, in this case, a width of 54px, with the result being a badly shrunk popup for each node. [Attached screenshot shows desired image size highlit by green outline, rendered size highlit by red outline.]

I can't see where in the code you'd remove that imposition, but I think it should be removed.

[indigoxela]

Hi @rtola-wpc,

many thanks for reporting. My suspicion is, that the leaflet library does the resizing. Need to dig a little deeper, though, to verify. If that's really the case, it might be a little hard to fix. We'll see.

[rtola-wpc]

Indeed, Leaflet may be responsible for the resizing, although when it was wrapped by IP Geolocation Views & Maps in Drupal 7, I don't recall resizing happening. I've tried to override the size in CSS but JS intercedes.

[indigoxela]

The Drupal 7 module uses a much older Leaflet, the newest version they support is 0.7. The Backdrop module uses 1.7.1 - that makes comparing difficult.

I confirmed the small popup size when the content is only an image, but I'm not sure if that's by design or a bug. There are options in the library https://leafletjs.com/reference-1.7.1.html#popup

Maybe we could use minWidth to let people set a value that fits the image size.

A quick workaround with CSS (for you) could be to set the min width:

.leaflet-popup-content {
  min-width: 200px;
}

[rtola-wpc]

I think that allowing people to input their own minWidth value for popup content would be the way to go. Very neat.

Thanks for the CSS. I had attempted something like that but had some other CSS further down the sheet - from a D7 configuration - that annulled it. This works nicely and will do well until a minWidth solution can be provided. Again, thanks.

Comparison across versions could be a nightmare, so the above approach would probably be best.

[indigoxela]

The latest commit provides the new feature, minWidth can be set via user interface.

@rtola-wpc testing and feedback is welcome!

[rtola-wpc]

That's cool - and obviates the need for CSS overrides. Thanks very much, @indigoxela.