Jump to content
Alf S.

How do I inline an SVG (that was uploaded by an image field)

Recommended Posts

Hello there. I was wondering if there is a more elegant way inlining an SVG that was uploaded in the backend by an image field?

// /processwire/site/assets/files/1101/monitor.svg <- this is what I get
//                ../assets/files/1101/monitor.svg <- this is what I need
$iconURL = $page->icon->url;
$findThis   = '/assets/';
$iconURL_arr = explode($findThis, $iconURL);
$iconURL = "..".$findThis.$iconURL_arr[1];
echo "<span class='icon'>".file_get_contents($iconURL)."</span>

... and before somebody is asking:

- yes, I want it inline.

- and no, I do not want to use an icon font.

Share this post


Link to post
Share on other sites

Rather than trying to hack the url for file_get_contents, you should use ->filename instead and then you can just do:

file_get_contents($page->icon->filename);

 

  • Like 6

Share this post


Link to post
Share on other sites

Great. This is significantly shorter and it works ... at least on the xampp local installation...

$page->icon->filename
// gives me this: D:/xampp/htdocs/processwire/site/assets/files/1099/battery.svg

Probably I can assume that this works on a "real" server too. I'll give it a try next days.

Thank you. PW is great.

Share this post


Link to post
Share on other sites
1 minute ago, Alf S. said:

Probably I can assume that this works on a "real" server too

Yep - it will work on all servers - it will always be the full disk path to the image, which is what file_get_contents wants. Of course with the right PHP settings it can also use a full URL, but disk path is easier and more universally supported.

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By arnd
      Hi,
      I have a repeater with some images in it.
      As Superuser I can work with the Actions (rotate...). But my Users with lower Rights can't use this Actions.
      The same User can use the Actions on images outsite a Repeter-Field. So I think it's not a Problem of Rights-Management but from Images in Repeater Fields.
      ProcessWire 3.0.164.  Bug? Or can I manage this in the settings?
      Thanks in advance
    • By Chris Bennett
      Quick tip for 2020 web manifests, which I couldn't find anywhere else.

      Wanted web manifest on Chrome/Edge to download the tiny favicon svg, instead of the larger 192x192 png it wanted to by default.
      Not a big deal, but mildly annoying: 15kb (non-scalable) png vs 1.5kb (infinitely scalable) svg.
      After a little head-scratching and fiddling around, came up with a solution that seems to do the trick.
      Declare it last, after your png fallbacks - last one that is suitable size *must* get the nod. Counter-intuitively, declare that your svg is 150x150.   Mine isn't. Never has been, it's a scalable vector graphic.
      Simply declaring it is 150x150 in the manifest is enough to get the job done.

      Suspect the Chrome/Edge engine declares that any non-specified svgs are given that 150x150 size and anything else returns as a "fail".
      Without declaring a size on it, or declaring it as anything other than 150x150, it just wouldn't load. 
      Weird, but works, so I'm happy 😊
       
      { "name": "Longer App/Business Name", "short_name": "Short Name", "description": "Description of App/Business", "start_url": "/", "display": "standalone", "background_color": "#880000", "theme_color": "#880000", "icons": [ { "src": "favicon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "favicon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }, { "src": "favicon.svg", "sizes": "150x150", "type": "image/svg+xml", "purpose": "any" } ] }  
    • By Mats
      BETA: SplashAndGrab
      https://github.com/madebymats/InputfieldSplashAndGrab
      This module attaches a search input to selected image fields that lets you search and download images from Unsplash.
      (Unsplash is a stock photo service where you can download images for free and use as you wish. No strings attached.)   
      You can search by string, colors, orientation/crop and order by relevance or time published
      I find Unsplash useful both for placeholder images when building sites but also as a time saver for editors if they don’t have any images at hand, just search, download and publish.

      Thanks to @apeisa for building the  FlickrInputField Module and @Robin S for AddImageUrls,  took a lot ideas and code from those modules.
    • By markus_blue_tomato
      We have created a module to create BlurHash strings for images while uploading in ProcessWire. This blurry images will be saved in the database because they are very small (20-30 characters) and can be used for Data-URL's  as placeholders for image-lazy loading.
      https://github.com/blue-tomato/ImageBlurhash
      E.g. where we use this in production:
      https://www.blue-tomato.com/en-INT/blue-world/ https://www.blue-tomato.com/en-INT/blue-world/products/girls-are-awesome/ https://www.blue-tomato.com/en-INT/buyers-guides/skateboard/skateboard-decks/ https://www.blue-tomato.com/en-INT/team/anna-gasser/
    • By EyeDentify
      Hello dear PW gurus.

      I have stumbled over a strange error that i all of sudden got when trying to upload an image to a images field on a page.
      There where images allready stored in the field that i wanted to keep, but during the upload the error apear and after that all images are gone from the field and i can´t upload any, i just get the error every time.
      I am running ProcessWire 3.0.153 dev.
      Update:
      After looking in the assets folder i find the folder for the page and the image files seems to be there including the ones i tried to upload when the error occured.
      But they don´t show up in the images field in the page editor.
       
      The error reported:
       
      SQLSTATE[01000]: Warning: 1265 Data truncated for column 'ratio' at row 1 And here is a screenshot of the event:

      The TracyDebugger Error reporting:

      I hope you fine folks could point me in a direction.
      But it seems our old pal set_time_limit() is back.

      Regards, EyeDentify
×
×
  • Create New...