[Resolved] Adding 'tooltip' popups on maps

[Author]

Posts

[mikes-33]

I am trying to Add a pop-up on a map

I want a featured image to appear as the background to a DIV. As a DIV background, it won't display at all.

I think the problem is that I have to use url("image") for the DIV... but the extra quotation marks break your shortcodes. The html output looks like this.

<img width="150" height="150" src="[wpv-post-featured-image output=" url']'="" class="attachment-thumbnail size-thumbnail popimg wp-post-image" alt="" loading="lazy">

The shortcode is not rendering properly.

Also, and far more annoying... if I insert any shortcode... I do not get the shortcode... I get the result of the shortcode, highlighted in yellow - making it impossible to move. The shortcode is also ALWAYS placed at the end of the HTML - instead of at the cursor. So if I need to amend it, i have to write the whole HTML from scratch so the shortcode goes where it should.

I'd really like to see (a) just the shortcode so I can move it. (b) the shortcode inserted at cursor, not at the end. I think this would also fix the issue with the quotation marks.

[Christian Cox]

<img width="150" height="150" src="[wpv-post-featured-image output=" url']'="" class="attachment-thumbnail size-thumbnail popimg wp-post-image" alt="" loading="lazy">

Sorry I'm a bit confused because you mentioned a div tag with an image background, but I only see an image tag here. Maybe the forum stripped out some code from your example? Please use the "Formatting instructions" link above the reply editor to mark up code snippets using code tags in the editor, so I can see the full div code you mentioned.

In the code you shared, I can see some broken nested quotation marks and attributes. Normally I would recommend this adjustment for an image tag using the featured image shortcode:

<img width="150" height="150" src="[wpv-post-featured-image output='url']" class="attachment-thumbnail size-thumbnail popimg wp-post-image" alt="" loading="lazy">

Or you can just use the wpv-post-featured-image shortcode to output an image tag like the one you're creating manually here:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-153425
See the "attr" attribute for adding attributes to the image tag produced by the featured image shortcode.

[mikes-33]

Hi Christian, thanks for looking at this.

First the DIV. If I type this into the 'edit tooltip' editor.

<div style="width:100%; height:100px; background: url("[wpv-post-featured-image output='url']") cover;">

It turns it into this:

<div style='width:100%; height:100px; background: url('<em><u>hidden link</u></em> url highlighted in yellow') cover;'>

Note (if this help ticket editor doesn't change it) that all " (double) have become ' (single quotes). This I think breaks the background style. It can't cope with the URL in nested ' (quotes).

When I then view the tooltip on the live page the HTML looks like this:

<div style="width:100%; height:100px; background: url("[wpv-post-featured-image output=" url']'="") cover;">

As you have seen - the shortcode is broken - not in the tooltip editor, but once rendered.

I provided an IMG tag as it was shorter to explain, sorry if it was confusing - it's the div I'd like to use. But I am unable to use dynamic background images, because the way the tooltip editor forces the shortcode to be a 'live url' - and they way it forces single quotes - combine to break the styling - and several other attempts I made to have an image of full width but fixed height have failed.
(users will upload images and can't be relied upon to keep aspect ratios consistent.)
I'd love a fix so I can use a div with background... but if there's a better way (I'd really like a background image with the writing over). I have tried using a content template, but it loses all the styling if inserted in a tooltip.

Just a side issue: Another reason that having shortcodes 'forced' into actual URLs (in yellow) is annoying, is that they are hard to copy. Plus, they are always inserted AT THE END of the html... not at the cursor. So cannot be inserted using the shortcode finder - only manually (requiring an excellent memory or constant referral to docs).

[Christian Cox]

Okay thanks, I understand the situation a bit better now. It seems that shortcodes are not supported when nested inside HTML tag attributes in the popup editor interface. I will look for a workaround - are you displaying multiple markers in a map using Views, or are you displaying only a single marker in one map?

[mikes-33]

Thanks. I'm adding multiple markers from a view - with a final aim that there may be hundreds of markers.

[Shane]

Hi Mike,

Christian is currently on a public holiday today but he will be back tomorrow to continue assisting you with this one.

Thank you for the patience and understanding.

[Christian Cox]

Okay I think I have a workaround available. I tested this out on my own local site and it seems to work.
1. Select the map block and remove the marker you currently have configured there in the Block Editor (see the screenshots).
2. Note the map ID in the map block configurations (see the screenshots).
3. In the View's loop, insert a Custom HTML block.
4. Use the following syntax to add a map marker shortcode in the Custom HTML block:

[wpv-map-marker map_id='your-map-id' marker_id='marker-1' marker_field='wpcf-your-address-field-slug']
  <div style="width:100%; height:100px; background: url('[wpv-post-featured-image output='url']');">Popup content</div>
[/wpv-map-marker]

- Replace your-map-id with the ID of the map you noted just earlier
- Replace your-address-field-slug with the slug of the address field you want to use for the marker location. The wpcf- prefix is required here. So if your address field slug in wp-admin is store-address, you would use wpcf-store-address here.
- Replace Popup content with whatever content you want to display in the open popup.

FYI - not sure about the 'cover' shorthand you had in your original div style for background. It seems to break the background completely for me. Docs here indicate background-size 'cover' is not supported as a background shorthand property: https://www.w3schools.com/css/css_background_shorthand.asp
You may need to add background-size separately.

[mikes-33]

Thanks Christian... this is a very clever work-around and I now have it in my pocket if I need it.
I consider this resolved now. All the best.
Mike

[mikes-33]

My issue is resolved now. Thank you!