Workarounds like the one posted by @kaostc above are necessary when working with third-party user interfaces such as Divi, GenerateBlocks, Elementor, and others because the authors of those interfaces decide what data gets associated with the menu items.
Page Builders with user interfaces closely associated to templates
Because each of those editors closely associates the presented menus with the stylization of their templates, it’s not usually simple to change their behavior unless those developers provide filters.
Working around by editing after the page renders
The solution provided works around the challenge by outputting the value from Pods in plain HTML, then using JavaScript to take a value from that custom HTML and attach it to the builder output after the page renders.
Alternative workarounds
When an existing template, page builder, plugin, or theme outputs highly customized templates that don’t integrate with custom data structures as intended, workaround almost always involve one of these:
- Check third-party plugin code or documentation for PHP filters, such as
apply_filters()
to modify data.
- Modify HTML output with JavaScript, as above.
- Modify HTML output with PHP, such as with
ob_start()
and DOM functions. This is necessary over JavaScript if the content matters for search engines or other non-JavaScript-enabled visitors.
Attachment ID to URL
The WordPress function for getting an attachment URL from the attachment ID is wp_get_attachment_url()