Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-131721

Background images that have been mapped in Fragments using Collection Display are not visualized

    Details

    • Branch Version/s:
      7.3.x
    • Backported to Branch:
      Committed
    • Fix Priority:
      2

      Description

      There is a problem when using fragments, and you try to map background images in a collection display.

      Steps to reproduce:

      1. Create a Web Content Structure with an image field.
      2. Create a Web Content with the created structure.
      3. Create a collection and select the Web Content created in the previous step.
      4. Create a fragment with the following HTML content:
        • <div class="fragment_536846">
                <div class="sc_section oib-banner text-white text-break" data-lfr-background-image-id="one-info-banner">
           		<div class="sc_section_overlay" style=" padding:45px;">
                                    <div class="sc_section_content ">
          					test1
                                   </div>
                         </div>
                  </div>
          </div>
        • And this CSS:
          .fragment_536846 {}
          .oib-banner {
          	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAkSURBVHgB7cxBEQAACAIwtH8Pzw52kxD8OBZgNXsPQUOUwCIgAz0DHTyygaAAAAAASUVORK5CYII=");
          	background-position: center;
          	background-size: cover;
          	border-radius: 4px; 
          	box-shadow: 1px 2px #e8eaec;
          	margin-bottom: 25px;
          }
          
          .sc_section_content > h1 > div { 
            background-color: rgba(0,0,0, 0.4);
            color: #fff; 
            display: inline;
            padding: 0;
            /* Needs prefixing */
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
          }
          
      5. Create a page.
      6. Add a collection display and select the collection created previously.
      7. Add the fragment created to the Collection Display.
      8. In the fragment configuration, map the field "one-info-banner" to the web content image field.

       Expected result:
      You can see the image in the edition mode and published page too.

       Actual result:
      You can see the image in the edition mode but not on the published page.

       

        Attachments

          Activity

            People

            Assignee:
            chao.wang Chao Wang
            Reporter:
            david.tello David Tello
            Participants of an Issue:
            Recent user:
            Clarissa Velazquez
            Engineering Assignee:
            David Tello
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Days since last comment:
              25 weeks, 4 days ago

                Packages

                Version Package
                7.3.7 CE GA8
                7.3.10 DXP FP2
                7.3.X