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 gregory
      Hi guys.
      I would like to show only the first image as a preview of a slideshow. The code below shows the first image but is repeated. Do you know a solution? Thank you
      //Call image foreach($story->galleria as $img) { echo "<img src='{$story->galleria->first()->url}' alt='{$story->galleria->first()->description}'>"; }  
    • By Noel Boss
      EDIT:
      What I'm actually really looking for is a way to edit and add children of a page in a similar way as RepeaterMatrix fields:
      Easy to add new ones and easy to move, hide and modify inline:

      ––––
      I have a problem and am so close to a solution, but everything i've found so far only gets me about 95% and before I create something on my own want to ask is anyone knows a soltion or if I miss something.
      My simple requirement: Editing Children and creating new ones inside the current parent page context – eighter inline or in a Lightbox.
       
      Not working Option A:
      With page relation fields I can create new pages – but it requires me to select a fixed parent. If I don't provide a parent, no new link is present.

      Not working Option B:
      With the awesome AdminPageFieldEditLinks Module I can create new Pages directly without the need to provide a parant beforehand – but then I need to select it at runtime.

      There is a new link now – the link is: parent_id=0&amp;template_id=51&amp;modal=1 … if it only provided the correct parent_id!!!

      But now i have to select the parent:

      Not working Option C :
      That's what I do right now… Reordering the Child-Field to the first tab – but to maintain the context, I would need the edit and new button to open a lightbox instead of a page reload.
       
      Possible solutions:
      For A+B: If I could provide a selector as parent, this would solve my issue: "parent=page.id" or a checkbox "use parent page for new pages". Or I could use some hook?
      For C : I could write my own javascript to open the links in a Lightbox.
       
    • By Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
    • By gonzz
      I'm doing an artist site and they want to be able to upload a large .tiff to their portfolio. I need to keep to a copy of the original file in the server for the art distributers, and of course serve jpg in the web front end.
      I had the idea of extending the file or image upload input so that if the image is tiff, keep it, and also convert it to jpg, so I could access through something like $image->originalUrl or $image->size(100, 100)->url 
      I was wondering if you thought this a good idea, or if i'm over-engineering something that could be done simply. Also, I've never extended an input, so any examples are welcome.
      Thanks!
    • 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