Can't map an image type field to an editable background image

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.4.13 DXP U3, Master
• Fix Version/s: 7.4.3.10 CE GA10, 7.4.3.11 CE GA11, Master
• Component/s: Fragment Administration, Pages > Content Pages
• Labels:
  • liferay-update-dxp-6-7413
• Fix Priority: 3
• Git Pull Request: https://github.com/liferay-echo/liferay-portal/pull/7048
• Bug Type: UX / Visual - Desktop

When creating a Content Page or a DPT for a given Web Content Structure, when I try to map an image of a web content (or structure) to an image element of a custom fragment that is defined like this

HTML:

<div class="fragment_1" data-lfr-background-image-id="title-area"><div class="fragment_1" data-lfr-background-image-id="title-area"> hello</div>

CSS:

.fragment_1 {.fragment_1 { height: 320px; background: red;}

(background image of a div)

then I can't select an image field of the structure in the Mapping menu (the dropdown shows only text fields).
 
Steps to reproduce: 

1. Create a Content Page
2. Drag and drop a fragment with an editable background image (one that uses the data-lfr-background-image-id attribute)
3. Click on the editable image of the fragment and in the Mapping menu, select a Web Content with an image field

 

Expected Result: 

I see the image type fields of the Web Content sructure in the Field dropdown menu

Current Result:

I see only text type fields  of the Web Content sructure in the Field dropdown menu