I'm trying to upload images in Silverstripe and have them treated as images rather than a document link.
I've added SVG to the allowed filetypes and can upload an SVG file but when I hit insert the editor inserts the tag as
somefile.svg
I would like to treat SVG as any other image format where inserting will insert the tag as a regular image
<img src="/assets/uploads/somefile.svg">
What is the best way to achieve this?
After debugging around HtmlEditorField.js, I found that the issue for SVGs not displaying was that the "Insert Media" screen's upload field does not consider an SVG as an image. (I originally thought the problem was TinyMCE but that wasn't the case)
I knew that the File class has a static property called app_categories which contains things like all the extensions SS thinks are images. By default, SVG is not in this list.
In Silverstripe 3.1, if you specify the following, it will add SVG to the "image" category:
$categories = File::config()->app_categories;
$categories['image'][] = 'svg';
File::config()->app_categories = $categories;
Alternatively as a YAML config:
File:
app_categories:
image:
- svg
That simple change was enough for the file upload on the "Insert Media" screen to correctly treat a SVG as an image which in turn triggered the right entwine function to use the <img> tag rather than an anchor.
While this method solves your specific issue, there could be side effects throughout other parts in Silverstripe for adding SVG to the image app category.
One additional thing, I needed to update my .htaccess file in my assets folder for it to allow viewing of SVG files otherwise I got a 403 Forbidden error.
in SS3 just use this in your config.yml:
File:
allowed_extensions:
- svg
Image:
allowed_extensions:
- svg
I've written a SilverStripe module to do exactly that (treat SVG as image instead of file): https://github.com/micschk/silverstripe-svg-images/
See the README for general pointers on how to set up SVG-as-image if you don't want to require the module.
Related
Does cake have a way to php include svg assets? I know how to use helpers to create an <img> tag pointing to the SVG for the img's src attribute, but I'd like to actually include the file rather than reference it within an <img> tag.
No, CakePHP doesn't ship with such functionality, you'll have to come up with something on your own, or use one of the many PHP based SVG inliners out there, it should be easy enough to wrap that in a custom helper.
If you just need to embed the file, then you could even stick to simply reading and outputting the file contents with the XML declaration and doctype removed, something like:
$svg = file_get_contents($path);
$svg = preg_replace('/^<\?xml.*?\?>\s*(<!DOCTYPE.*?>\s*)?/is', '', $svg);
In the end, this was a silly question. You can of course just use <?php include 'img/thefile.svg' ?> assuming your svg is in webroot/img folder. If the svg or file is not in a publicly accessible folder I would look to creating a custom helper as another post suggested.
I have SVG version of USA map, and wanted to modify each state there, however, the SVG file was attribute to img tag.
Code Fig. 1:
<img src="https://www.domain.com/path/to/svg/usa-map.svg" alt="">
Each State (svg path) from usa-map.svg will need to update from the admin, where it should be highlighted from the output where if the State (svg path) have property location. Shown in Example.
Image Fig. 1:
Note: Dark colored States have property locations
Case:
Previously in our code, we've managed to use direct SVG in our code and update the State (svg path) via admin using jQuery css to highlight certain State (svg path).
Code Fig. 2:
<script>$("{{$california_state}}").css({ fill: "#9DC75B" });</script>
We decide to use the img tag instead of full raw svg element to reduce weight of the file and speed-up the SEO performance.
Question:
Is it possible to update/modify the SVG path (while it was viewable in img tag) via internal PHP file where this internal file calling the SVG element and inject the css to highlight certain states using jQuery script using our method or is there better alternative solutions for this?
Maybe using webserver rewrites to an svg file path wich originally is an php file that opens the real svg and modifies it could be an solution.
So you could still include the image over an img tag.
I have been trying to change the images in the WampServer Index.php File... When I looked at the Index.php File I saw something Interesting. The File its self was containing the Image in the RAW format. Latter in the Code the PHP Script Calls the Image using the URL like http://localhost/index.php?img=pngFolder called a Image file stored RAW in the PHP file as a png.
Here is a link to a website that has the index.php code...
Link
I would Like to know how to replicate this same process to work for other images. Granted the File will be larger but its a Price to pay for what I am doing for a project. The Reason I want some help with this is so I can do it correctly. I have Tried 2 times already. I managed to get it to call one image correctly but not some of the others. I'm not sure if the image is just a different encoding or what..... Any Help would be Appreciated.
They are using BASE64 to encode the images into text. You can google for a base64 encoder that will convert your images to text. You can then put the text directly in an <img src="..base64 text.." />
Here's one..
https://www.base64-image.de/
As far as getting the image from the url index.php?img=pngfolder..
You could put this at the top of the file
if(isset($_GET['img'])){
echo "...base64 string.."; exit;
}
Then you can use the index url as the src for your image and it will simply retrieve the base64 image
I want to dynamically create an svg that I can use in an <img/> tag. This in itself is easy; create an svg, set the header and echo the generated parts in their correct place.
The problem is, I want to be able to embed fonts in the svg.
I've tried using the #font-face rule in the css of the svg, but that didn't work (MDN says that it only works on Android and Safari).
Is there any cross-browser way to do this?
Solutions I've Considered:
Possible Solution #01:
The solution:
In my main file, create an svg file which uses the #font-face css rule, and then use exec() to use inkscape to convert that svg into another svg, which converts all letters into paths. I then could use echo file_get_contents($inkscape_file) with the correct headers to output it as a svg which can be used with an <img/> tag.
The problem with this:
This creates 2 additional files, so seems very inefficient. Furthermore, since each user will end up generating several images, the space it takes up would grow phenomenally.
Possible Solution #02:
The solution:
Make a template in illustrator, then save it as svg, and tick the embed all glyphs option. Then replace the text & the styles with the options from the PHP script. Use the correct header and output this.
The problem with this:
This severely limits the amount of fonts that can be used, as it is limited to only those which I create a template for. My desired behaviour was to add the option for users to upload their own fonts and use them. This solution does not allow for that.
Additional information that may be of some relevance:
My development server runs fedora, and the production server uses redhat.
The #font-face rule I am currently using is as follows:
#font-face {
font-family: Potato;
src: url("/fonts/potato.otf");
}
You can't load any external resources declared in the svg from the <img> tag.
The only solutions would be some crappy ways to append the glyphs or the fonts into the svg file itself.
Actually there is a not so crappy way to do it as you found in this answer by lèse-majesté.
The best way is then still IMO to not use an <img> tag to display the svg documents, but rather use an <iframe> or an <object> tag, with the #font-face declared inside the svg file, or even directly include an inline version into the document. These methods do allow the loading of external resources such as fonts.
Then you just have to save the fonts on your server or just an url to the font in the #font-face declaration.
i am displaying an image usign readfile() function of php
HMTL:
<img src='image.php?id=232'/>
PHP: image.php
<?php
$id=$_GET["id"];
if(image_view_allow($id)){
$path=get_image_path($id);
readfile($path);
}else{
readfile("images/not_allow.png");
}
image_view_allow and get_image_path is two that i have defined to check validation and get path
I am doing this because i want show image only to the allow person.
Does this affect speed of downloading an image ?
what is normal(means direct path in src attribute of img tag) or trick that is shown above?
Just loading an image probably same,but it is always better if you handle images with php, because when you resize image with php you load the needed size. But with html you load the bigger size than you need and resize.
first -> Does this affect speed of downloading an image ?
answer: no, because when the page is loaded, the php code is already translated to html before page is loaded in the borwser.
second -> what is normal(means direct path in src attribute of img tag) or trick that is shown above?
answer: both are same as both involve php code. When code executes in either way it will enter the source of the image in the image tag.