Code (HTML, CSS, Script)

Lockup broken Image

List Layout Display

Broken image/link over Lockup Items

Go Back

Code (HTML, CSS, Script)

Challenge / Fix

When broken image icon overlays background image. Should be clear png overlay.

Updates Required

HTML

Global-ImageSettingsProc

CSS

Scripts

Content

Requires Global Updates

Custom_Content

Requires Custom Updates per site

Fonts

Requires Custom Updates per site

Plug-Ins

Requires Custom Updates per site

HTML

Where to find HTML1 Code

Global-ImageSettingsProc

/admin/snippets

Notes

Copy from EPIC4: https://goepic4.com/admin/snippets/27987

HTML1

REPLACE: 
{% if ListLayoutDisplay == 'Card' or this.Image == null -%}

UPDATE code at top:

{% if this.Image != null -%}
        {% assign mainImg = this.Image %}
        {% if this.DisplayImage != null -%}
            {% assign DisplayImage = this.DisplayImage %}
            {% else -%}
            {% assign DisplayImage = this.Image | replace: ' ', '%20' | replace: '(', '%28'  | replace: ')', '%29' | replace: ',', '%2C' | replace: "'", "%27" %}
            {% endif -%}
    {% elsif this.DisplayImage != null -%}
        {% assign DisplayImage = this.DisplayImage | replace: ' ', '%20' | replace: '(', '%28'  | replace: ')', '%29' | replace: ',', '%2C' | replace: "'", "%27" %}
        {% assign mainImg = DisplayImage %}
        {% assign ImageContain = false %}
    {% else -%}
        {% assign DisplayImage = '/img/no.jpg' %}
        {% assign mainImg = '/img/no.jpg' %}
    {% endif -%}

{% if ThumbSettings != 'Logo only' -%} 
{% assign srcImg = "/img/_clear.png" %} 
{% elsif this.Image != null -%} 
{% assign srcImg = this.Image | replace: ' ', '%20' | replace: '(', '%28' | replace: ')', '%29' | replace: ',', '%2C' | replace: "'", "%27" %} 
{% else -%} 
{% assign srcImg = '/img/no.jpg' %} 
{% endif -%}

{% unless ThumbSettings == 'Logo only' -%}
    {% comment -%}{% endcomment -%}
    {% if mainImg != '' -%}
        {% assign Img = mainImg %}
        {% elsif bkupImg != '' -%}
        {% assign Img = bkupImg %}
        {% elsif this.Image != null -%}
        {% assign Img = this.Image | replace: ' ', '%20' | replace: '(', '%28'  | replace: ')', '%29' | replace: ',', '%2C' | replace: "'", "%27" %}
        {% else -%}
        {% assign Img = '/img/no.jpg' %}
        {% endif -%}

{% endunless -%}

CSS

Scripts

Script1

References

Reference1

https://goepic4.com/admin/snippets/27987