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 Markus Breitinger
      I want to use Particle.js as background of my page. What modules do i need and where must i put the code?
      The usage of particle.js in plain HTML is in the attached files.
      index.css
      index.html
    • By rst
      I am having problems uploading svg images in the the latest pw 3.0.98. It shows the preview and has the spinner on top of it, and just gets stuck on that.
      Worked fine in the previous version of PW
    • By Noel Boss
      Hi, I'm stuck since hours and don't know what to do. Here is my Problem:
      I try to generate Previews of PDF using imagick. I have 4 PDF, I generate a preview of the first page of the pdf, save it to a temporary file and want to import it using the api into an image field. It works for the later 3 pdf but not the first. I add it to the image field and save it. Inside the function that saves it, the image is stored in 'data' as well as in 'itemsAdded' but as soon as i leave the function, its nowhere to be found.
      Process:
      1. create previewimage using imagick and create Pageimage > works
      2. add image to filed 'filepreviews', returns Pageimages array with image added > okay
      3. save page > returns true
      4. Outside renderPreview method, image is not anymore in 'filepreviews'
      // mymodule // … // foreach($files as $file){ $preview = wire('page')->filepreviews->get('name*='.$file->basename(false)); // if there is no preview image… if (!$preview instanceof Pageimage) { $this->renderPreview($file) // we create one using $this->renderPreview > should return true on successful save dump(wire('page')->filepreviews); // my Image is nowhere to be found $preview = wire('page')->filepreviews->get('name*='.$file->basename(false)); } // end for each // render a preview of an otherwhise not supported file format // return true if sucessfull save private function renderPreview($file) { $page = wire('page'); // get path to temporary image $tempFile = $path.$file->basename(false).'-preview.jpg'; // … some imagick code // … and save it: $imagick->writeImage($tempFile); $img = new Pageimage($page->filepreviews, $tempFile); $img->description = $file->basename(false); // destroy temp image unlink($tempFile); // this is my Pageimage, all good… dump($img); // save image, my Pageimage can be found in data and itemsAdded – all good dump($page->filepreviews->add($img)); $page->of(false); $success = $page->save(); // sucess = true dump($success); return $success; }
       
      Second question:
      Would there a generally better approach? Like using pageFiles somehow. Goal is to be able to use the image api like scale etc – I don't generally need the images to be stored in an image field.
       
    • By Marc
      I want to use the API to duplicate an image from one field to another (on the same page). The duplicated image should be a new file so both fields should not point to the same physical file. The field that holds the image that I want to duplicate is called 'image_front' and the duplicated image should go to a field called 'image_thumb'. Any image that is already attached to image_thumb should be removed because it should hold only one file. The same goes for image_front, it should have only one image. Here's what I have so far:
      $original = $page->image_front; $file = $original->getFile($original); $new = $original->clone($file); $page->save(); $page->image_thumb = $new; $page->save('image_thumb'); This works in the sense that the image is successfully cloned but it is attached to both fields so both fields end up have their original image plus the cloned image. 'Image_thumb' should only have the cloned image and 'image_front' should only have the original image. What would be the best way to remove those images and am I even approaching this correctly?