Forum

Thread tagged as: Problem, Error, Configuration

SVGs not appearing in image field within Perch

Yo.

I'm on the latest version of Perch. When adding an SVG to an image field and saving a page, the SVG disappears from the field.

The SVG appears on the frontend, but then it's not apparent that it's been added to the page (You can't remove it, replace it etc...)

I'm using PHP7, but it was happening locally too (php 5.6). Any ideas?

David Maxwell-Wood

David Maxwell-Wood 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Can you show us your template?

Yup sure, it's a block within <perch:blocks>...

The SVG bit is here:

<img src="<perch:content type="image" id="a_block_svg" label="SVG Icon" order="3" />" class="block__img block__img--svg" />

and the full block:

<perch:block type="grid_w_icons" label="Grid – Blocks">
    <section class="section">
        <div class="wrapper">
            <div class="grid grid--<perch:content type="radio" id="grid_repeater_col_count" label="Number of items per row" options="One|1, Two|2, Three|3, Four|4" allowempty="false" required="true" /> grid--flex">
                <perch:repeater id="grid_repeater" label="Item in Grid">
                <div class="grid__col">
                    <div class="block block--flex">
                        <perch:if exists="a_block_svg">
                        <img src="<perch:content type="image" id="a_block_svg" label="SVG Icon" order="3" />" class="block__img block__img--svg" />
                        <perch:else />
                        <perch:if exists="a_block_image">
                        <img src="<perch:content type="image" id="a_block_image" label="Image" width="387" height="260" crop="true" order="1" divider-before="SVG/ICON, IMAGE or BOTH" />" alt="<perch:content type="text" id="a_block_image_alt" label="Image ALT text" order="2" />" class="block__img" />
                        </perch:if>
                        </perch:if>

                        <perch:if exists="a_block_header">
                        <h2 class="heading--3 block__heading"><perch:content type="text" id="a_block_header" label="Block Header" /></h2>
                        </perch:if>

                        <perch:if exists="a_block_text">
                        <div class="block__text block__text--large">
                            <perch:content type="textarea" id="a_block_text" label="Block Text" size="xs" divider-before="Add some Text" html="true" editor="redactor" />
                        </div>
                        </perch:if>

                        <perch:if exists="a_block_links_to">
                        <a href="<perch:content id="a_block_links_to" />" data-real-link=".block__link" class="u--faux-link"></a>
                        </perch:if>

                        <perch:if exists="a_block_links_to">
                        <a href="<perch:content type="pagelist" id="a_block_links_to" label="Links to" />" class="block__link"> 
                            <span>
                                <perch:if exists="a_block_link_text">
                                    <perch:content type="text" id="a_block_link_text" label="Link text (optional)" />
                                <perch:else />
                                    See more
                                </perch:if>
                            </span>
                        </a>
                        </perch:if>

                        <perch:if exists="a_block_svg AND a_block_image">
                        <img src="<perch:content id="a_block_image" />" alt="<perch:content id="a_block_image_alt" />" class="block__img" />
                        </perch:if>

                    </div>
                </div>
                </perch:repeater>
            </div>
        </div>
    </section>
    </perch:block>
Drew McLellan

Drew McLellan 2638 points
Perch Support

I can't reproduce any problem here. Are you on the latest version? Can you post your diagnostics report?

This is happening to me too. When I first uploaded the SVG, it displayed correctly in the perch admin, but when I refreshed the page, it disappeared. The SVG image is still displayed on the front end and if I replace the image with a JPEG or PNG, it works as expected. If I then replace with the SVG again, I get the same problem - not displayed in perch admin.

my template is simple:

<img class="footer-logo" src='<perch:content type="image" id="footerLogo" label="Footer logo" required="true" />' alt='<perch:content id="companyName" type="text" label="Company name" required="true" order="1" />'>

I'm using the latest version.

My diagnostics report is: PERCH INFORMATION

Perch: 2.8.26 Production mode: (PERCH_DEVELOPMENT) Installed apps: content (2.8.26), assets (2.8.26), categories (2.8.26), perch_blog (5.0) DB driver: PDO DB tables: perch2_blog_authors (1), perch2_blog_comments (0), perch2_blog_index (119), perch2_blog_posts (3), perch2_blog_posts_to_tags (0), perch2_blog_sections (2), perch2_blog_tags (0), perch2_blogs (1), perch2_categories (0), perch2_category_counts (0), perch2_category_sets (1), perch2_content_index (615), perch2_content_items (64), perch2_content_regions (5), perch2_navigation (0), perch2_navigation_pages (0), perch2_page_templates (1), perch2_pages (10), perch2_resource_log (188), perch2_resource_tags (0), perch2_resources (50), perch2_resources_to_tags (0), perch2_settings (22), perch2_user_passwords (0), perch2_user_privileges (34), perch2_user_role_privileges (16), perch2_user_roles (2), perch2_users (1) Users: 1 App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', ); Scheduled tasks for perch_blog: delete_spam_comments (1440 mins) Editor plug-ins: markitup, tinymce H1: d43bacd6a30e7b0d74ae68d24828b643 L1: 30ee6844f58fbf4a70cbecff71b2bad0 F1: 2edba60ed1f613d6dd804feb202456a2 headerColour: #ffffff content_singlePageEdit: 1 helpURL: siteURL: / hideBranding: 0 content_collapseList: 1 lang: en-gb update_2.8.26: done latest_version: 2.8.15 on_sale_version: 2.8.26 perch_blog_update: 5.0.1 perch_blog_post_url: /blog/post.php?s={postSlug} headerScheme: light perch_blog_site_name: KOTC Event Hire perch_blog_slug_format: %Y-%m-%d-{postTitle} perch_blog_akismet_key: perch_blog_max_spam_days: 30 dashboard: 0 hide_pwd_reset: 0 content_hideNonEditableRegions: 0 content_frontend_edit: 0 perch_blog_comment_notify: 0 PERCH_DEVELOPMENT: 10 PERCH_STAGING: 50 PERCH_PRODUCTION: 100 PERCH_DB_USERNAME: admin PERCH_DB_SERVER: localhost PERCH_DB_DATABASE: kotc_perch PERCH_DB_PREFIX: perch2_ PERCH_PRODUCTION_MODE: PERCH_DEVELOPMENT PERCH_TZ: UTC PERCH_EMAIL_FROM: jon@vitalworks.co.uk PERCH_EMAIL_FROM_NAME: Jon Young PERCH_LOGINPATH: /perch PERCH_PATH: E:\Vital\Local Projects\KOTC\trunk\KOTC\perch PERCH_CORE: E:\Vital\Local Projects\KOTC\trunk\KOTC\perch\core PERCH_RESFILEPATH: E:\Vital\Local Projects\KOTC\trunk\KOTC\perch\resources PERCH_RESPATH: /perch/resources PERCH_HTML5: 1 PERCH_RUNWAY: PERCH_ERROR_MODE: DIE PERCH_DATE_LONG: %d %B %Y PERCH_DATE_SHORT: %d %b %Y PERCH_TIME_SHORT: %H:%M PERCH_TIME_LONG: %H:%M:%S PERCH_RUNWAY_ROUTED: PERCH_STRONG_PASSWORDS: PERCH_DEBUG: PERCH_PREVIEW_ARG: preview PERCH_TEMPLATE_PATH: E:\Vital\Local Projects\KOTC\trunk\KOTC\perch\templates PERCH_DEFAULT_DOC: index.php PERCH_DEFAULT_EXT: .php PERCH_RWD: PERCH_HTML_ENTITIES: PERCH_SSL: PERCH_STRIPSLASHES: PERCH_PROGRESSIVE_FLUSH: 1 PERCH_PARANOID: PERCH_FORCE_SECURE_COOKIES: PERCH_PASSWORD_MIN_LENGTH: 6 PERCH_MAX_FAILED_LOGINS: 10 PERCH_AUTH_LOCKOUT_DURATION: 1 HOUR PERCH_VERIFY_UPLOADS: PERCH_AUTH_PLUGIN: PERCH_DB_CHARSET: utf8 PERCH_DB_PORT: PERCH_DB_SOCKET: PERCH_SESSION_TIMEOUT_MINS: 20 HOSTING SETTINGS

PHP: 5.6.11 Zend: 2.6.0 OS: WINNT SAPI: apache2handler Safe mode: not detected MySQL client: mysqlnd 5.0.11-dev - 20120503 - $Id: 3c688b6bbc30d36af3ac34fdd4b7b5b787fe5555 $ MySQL server: 5.6.25 Free disk space: 116.64 GB Extensions: Core, bcmath, calendar, ctype, date, ereg, filter, ftp, hash, iconv, json, mcrypt, SPL, odbc, pcre, Reflection, session, standard, mysqlnd, tokenizer, zip, zlib, libxml, dom, PDO, bz2, SimpleXML, wddx, xml, xmlreader, xmlwriter, apache2handler, openssl, curl, mbstring, exif, gd, gettext, mysql, mysqli, Phar, pdo_mysql, pdo_sqlite, soap, sockets, sqlite3, xmlrpc, xsl, mhash GD: Yes ImageMagick: No PHP max upload size: 5M PHP max form post size: 8M PHP memory limit: 128M Total max uploadable file size: 5M Resource folder writeable: Yes Session timeout: 24 minutes Native JSON: Yes Filter functions: Yes Transliteration functions: No MIBDIRS: D:/xampp/php/extras/mibs MYSQL_HOME: \xampp\mysql\bin OPENSSL_CONF: D:/xampp/apache/bin/openssl.cnf PHP_PEAR_SYSCONF_DIR: \xampp\php PHPRC: \xampp\php TMP: \xampp\tmp HTTP_HOST: kotc.dev:81 HTTP_CONNECTION: keep-alive HTTP_ACCEPT: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8 HTTP_UPGRADE_INSECURE_REQUESTS: 1 HTTP_USER_AGENT: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36 HTTP_REFERER: https://kotc.dev:81/perch/core/settings/diagnostics/ HTTP_ACCEPT_ENCODING: gzip, deflate, sdch HTTP_ACCEPT_LANGUAGE: en-GB,en-US;q=0.8,en;q=0.6 HTTP_COOKIE: cmsa=1; PHPSESSID=pbpddahj1uhiu59i29l72lhvq4 PATH: C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files\nodejs\;C:\Program Files\TortoiseSVN\bin;;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\The Youngs\AppData\Roaming\npm SystemRoot: C:\WINDOWS COMSPEC: C:\WINDOWS\system32\cmd.exe PATHEXT: .COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC WINDIR: C:\WINDOWS SERVER_SIGNATURE: <address>Apache/2.4.16 (Win32) OpenSSL/1.0.1p PHP/5.6.11 Server at kotc.dev Port 81</address> SERVER_SOFTWARE: Apache/2.4.16 (Win32) OpenSSL/1.0.1p PHP/5.6.11 SERVER_NAME: kotc.dev SERVER_ADDR: 127.0.0.1 SERVER_PORT: 81 REMOTE_ADDR: 127.0.0.1 DOCUMENT_ROOT: E:/Vital/Local Projects/KOTC/trunk/KOTC REQUEST_SCHEME: http CONTEXT_DOCUMENT_ROOT: E:/Vital/Local Projects/KOTC/trunk/KOTC SERVER_ADMIN: postmaster@localhost SCRIPT_FILENAME: E:/Vital/Local Projects/KOTC/trunk/KOTC/perch/core/settings/diagnostics/index.php REMOTE_PORT: 61168 GATEWAY_INTERFACE: CGI/1.1 SERVER_PROTOCOL: HTTP/1.1 REQUEST_METHOD: GET QUERY_STRING: extended REQUEST_URI: /perch/core/settings/diagnostics/?extended SCRIPT_NAME: /perch/core/settings/diagnostics/index.php PHP_SELF: /perch/core/settings/diagnostics/index.php REQUEST_TIME_FLOAT: 1456577873.431 REQUEST_TIME: 1456577873

I am actually still having this issue...

Drew McLellan

Drew McLellan 2638 points
Perch Support

My question from a month ago still stands - can you post your diagnostics?

Hi Drew. Do my diagnostics help with this?

Apologies for the delay on this... Here are my diagnostics.

PERCH INFORMATION

Perch: 2.8.24
Production mode: Production (100)
Installed apps: content (2.8.24), assets (2.8.24), categories (2.8.24), perch_blog (4.6), perch_gallery (2.8.6)
DB driver: PDO
DB tables: perch2_blog_authors (2), perch2_blog_comments (0), perch2_blog_index (84), perch2_blog_posts (1), perch2_blog_posts_to_tags (0), perch2_blog_sections (1), perch2_blog_tags (0), perch2_categories (0), perch2_category_counts (0), perch2_category_sets (1), perch2_content_index (2179), perch2_content_items (312), perch2_content_regions (33), perch2_gallery_albums (0), perch2_gallery_image_versions (0), perch2_gallery_images (0), perch2_navigation (2), perch2_navigation_pages (3), perch2_page_templates (6), perch2_pages (34), perch2_resource_log (1425), perch2_resource_tags (0), perch2_resources (290), perch2_resources_to_tags (0), perch2_settings (27), perch2_user_passwords (0), perch2_user_privileges (38), perch2_user_role_privileges (29), perch2_user_roles (2), perch2_users (2)
Users: 2
App runtimes:
<?php
    $apps_list = array(
        'content', 
        'categories',
        'perch_gallery',
        'perch_blog'
    );
Scheduled tasks for perch_blog: delete_spam_comments (1440 mins)
Editor plug-ins: markitup, redactor
H1: 8e7cc29b20a346e4f9c8c0c377eb3ef7
L1: 7ea3689f599656f9dab07b36aa6615fd
F1: dc1fef2ad0fcd9f943c02ebb43d85dbc
headerColour: #ffffff
content_singlePageEdit: 1
helpURL:
siteURL: /
hideBranding: 1
content_collapseList: 0
lang: en-gb
update_2.8.23: done
latest_version: 2.8.15
on_sale_version: 2.8.26
perch_blog_update: 5.0
perch_blog_post_url: /blog/post.php?s={postSlug}
update_2.8.24: done
perch_gallery_update: 2.8.5
headerScheme: light
perch_gallery_bucket_mode: single
perch_gallery_bucket: default
perch_blog_slug_format: %Y-%m-%d-{postTitle}
perch_blog_akismet_key:
perch_blog_max_spam_days: 0
dashboard: 0
hide_pwd_reset: 0
content_hideNonEditableRegions: 0
content_frontend_edit: 0
perch_gallery_basicUpload: 0
perch_blog_comment_notify: 0
logoPath: /perch/resources/logo-text.png
PERCH_DEVELOPMENT: 10
PERCH_STAGING: 50
PERCH_PRODUCTION: 100
PERCH_DB_USERNAME: forburyp_mud
PERCH_DB_SERVER: localhost
PERCH_DB_DATABASE: forburyp_main
PERCH_DB_PREFIX: perch2_
PERCH_TZ: Europe/London
PERCH_EMAIL_FROM: hello@ournameismud.co.uk
PERCH_EMAIL_FROM_NAME: Matt Powell
PERCH_LOGINPATH: /perch
PERCH_PATH: /home/forburyplace/public_html/perch
PERCH_CORE: /home/forburyplace/public_html/perch/core
PERCH_RESFILEPATH: /home/forburyplace/public_html/perch/resources
PERCH_RESPATH: /perch/resources
PERCH_HTML5: 1
PERCH_RUNWAY:
PERCH_ERROR_MODE: DIE
PERCH_DATE_LONG: %d %B %Y
PERCH_DATE_SHORT: %d %b %Y
PERCH_TIME_SHORT: %H:%M
PERCH_TIME_LONG: %H:%M:%S
PERCH_RUNWAY_ROUTED:
PERCH_STRONG_PASSWORDS:
PERCH_DEBUG:
PERCH_PREVIEW_ARG: preview
PERCH_TEMPLATE_PATH: /home/forburyplace/public_html/perch/templates
PERCH_DEFAULT_DOC: index.php
PERCH_DEFAULT_EXT: .php
PERCH_PRODUCTION_MODE: 100
PERCH_RWD:
PERCH_HTML_ENTITIES:
PERCH_SSL:
PERCH_STRIPSLASHES:
PERCH_PROGRESSIVE_FLUSH: 1
PERCH_AUTH_PLUGIN:
PERCH_DB_CHARSET: utf8
PERCH_DB_PORT:
PERCH_DB_SOCKET:
PERCH_SESSION_TIMEOUT_MINS: 20
HOSTING SETTINGS

PHP: 5.5.30
Zend: 2.5.0
OS: Linux
SAPI: apache2handler
Safe mode: not detected
MySQL client: mysqlnd 5.0.11-dev - 20120503 - $Id: 15d5c781cfcad91193dceae1d2cdd127674ddb3e $
MySQL server: 5.6.29
Free disk space: 126.12 GB
Extensions: Core, date, ereg, libxml, openssl, pcre, sqlite3, zlib, bcmath, bz2, calendar, ctype, curl, dom, hash, fileinfo, filter, ftp, gd, gettext, SPL, iconv, session, json, mbstring, mcrypt, standard, mysqlnd, mysqli, mysql, Phar, Reflection, imap, SimpleXML, sockets, exif, tidy, tokenizer, xml, xmlreader, xmlwriter, xsl, zip, apache2handler, PDO, pdo_sqlite, imagick, pdo_mysql
GD: Yes
ImageMagick: Yes
PHP max upload size: 4M
PHP max form post size: 8M
PHP memory limit: 128M
Total max uploadable file size: 4M
Resource folder writeable: Yes
Session timeout: 24 minutes
Native JSON: Yes
Filter functions: Yes
Transliteration functions: No
UNIQUE_ID: VtQjCgWZ@xgAAHsPMpQAAAAF
HTTP_HOST: forbury.mudbank.uk
HTTP_CONNECTION: keep-alive
HTTP_ACCEPT: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
HTTP_UPGRADE_INSECURE_REQUESTS: 1
HTTP_USER_AGENT: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36
HTTP_REFERER: https://forbury.mudbank.uk/perch/core/settings/diagnostics/
HTTP_ACCEPT_ENCODING: gzip, deflate, sdch
HTTP_ACCEPT_LANGUAGE: en-US,en;q=0.8,es;q=0.6
HTTP_COOKIE: cmsa=1; PHPSESSID=c644f87987b3311074775b3d3c5eddd9
PATH: /usr/local/jdk/bin:/usr/kerberos/sbin:/usr/kerberos/bin:/usr/lib/courier-imap/sbin:/usr/lib/courier-imap/bin:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/usr/X11R6/bin:/usr/local/bin:/usr/X11R6/bin:/root/bin:/opt/bin
LD_LIBRARY_PATH: /usr/local/apache/lib
SERVER_SOFTWARE: Apache
SERVER_NAME: forbury.mudbank.uk
SERVER_ADDR: 5.153.251.24
SERVER_PORT: 80
REMOTE_ADDR: 217.34.34.185
DOCUMENT_ROOT: /home/forburyplace/public_html
REQUEST_SCHEME: http
CONTEXT_DOCUMENT_ROOT: /home/forburyplace/public_html
SERVER_ADMIN: webmaster@forburyplace.com
SCRIPT_FILENAME: /home/forburyplace/public_html/perch/core/settings/diagnostics/index.php
REMOTE_PORT: 51131
GATEWAY_INTERFACE: CGI/1.1
SERVER_PROTOCOL: HTTP/1.1
REQUEST_METHOD: GET
QUERY_STRING: extended
REQUEST_URI: /perch/core/settings/diagnostics/?extended
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
PHP_SELF: /perch/core/settings/diagnostics/index.php
REQUEST_TIME_FLOAT: 1456743178.17
REQUEST_TIME: 1456743178
argc: 1
Drew McLellan

Drew McLellan 2638 points
Perch Support

What does your asset badge look like when the SVG displays? Should be something like this: https://cl.ly/0L0C073l0e2n

I just get an upload link (Like an asset hasn't been uploaded yet) – but the asset appears on the site.

Drew McLellan

Drew McLellan 2638 points
Perch Support

In this in your content region?

It's in a repeater, which is in a block in a blocks content region.

Drew McLellan

Drew McLellan 2638 points
Perch Support

I'm not having that problem with your template here - it works as expected.

It's certainly an odd one. It was happening locally too, so unlikely to be anything to do with the server setup.

I'll update Perch.

Okay, I've updated to the latest version of Perch.

Interestingly I'm getting a JS error – Uncaught TypeError: Cannot read property 'id' of undefined.

It seems to be relating to line 785 in this pastebin – https://pastebin.com/tjshiHCG

Difficult when JS is minified to pinpoint.

Also when the SVG is first saved, I just get a blank white box (inspecting the asset thumb, the img has height and width set to 0. Setting these to the width and height of the SVG shows the SVG as expected). When the page is saved, the SVG thumbnail disappears completely.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Does the SVG show in the assets panel?

It does

Drew McLellan

Drew McLellan 2638 points
Perch Support

That's very odd. Why would it appear there and not in the badge?

Hey Drew - I get this asset badge when I initially upload the SVG - https://i.imgur.com/CeV64hl.png

When I save, the asset badge disappears, and I get - https://i.imgur.com/Omn86pX.png

(the image is white, hence you cant see it, but it's there)