[Resolved] Sizing the picture in the map marker popup

[Author]

Posts

[heinP]

Tell us what you are trying to do?
Sizing the picture in the map marker popup, to the thumbnail or 50x50 px

Whatever option I choose, the picture is never resized and stays in original format (which is way to big)
Is there any documentation that you are following?
no
Is there a similar example that we can see?
i can give you access to the site as for previous tickets
What is the link to your site?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

I've set your next reply as private, so that you can share the temporary admin login details, along with the link to an example page where this map marker pop-up can be seen.

Note: It is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing the admin access.

In the map marker's pop-up content, I noticed this shortcode is used for the image field:

[types field='picture' size='medium' resize='proportional' separator=', '][/types]

As the "medium" image thumbnail size is set to a maximum of 300px x 300px, the images in the pop-up will also use the image thumbnails in the same size.

For smaller images, you can change size from "medium" to "thumbnail" (150px x 150px):

[types field='picture' size='thumbnail' resize='proportional' separator=', '][/types]

Note: for limiting image size to an even smaller value, you can include some custom CSS code in the view, for example:

.gm-style-iw-d img {
max-width: 50px !important;
}

[heinP]

Hi,

I was aware of this shortcode, and I have changed it to every possible variation.

Even with the custom CSS you proposed, the result is just as before: the picture does not adapt it's size.

Something else must be going on. You can see what I mean on the custom post as described in privat.

Thanks

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

I've checked the page and the custom CSS code seems to be working now, to reduce the image size to the width of 50px.
( screenshot: hidden link )

Can you please clear all involved caches and check the page again?

[heinP]

Great! It works. I was basically looking in the wrong place. I was not looking on the preview, but on the 'edit page' page. In there the picture does not resize, but on the preview it does.

Small additional question:
Can I force the system to only show one/the first picture ?

[heinP]

My issue is resolved now. Thank you!
i found that 'index=0' forces the system to only show the first picture.