I am working on create an extension. My content got a upload part to upload image in the backend. I want to get that uploaded image to use as background image in css. Are there any ways to get the upload image url and which between inline css and css file which one i should use in this situation?
My element i want to set the background image:
I would prefer to use inline styles for the background image. You can get the URL of the image with the f:uri.image view helper:
<div style="background-image:url({f:uri.image(src: '{imageField}')});">
Related
I’m using capacitor pdf-generator plugin to create a pdf. I managed to do so as long as the html code is limited to non image tag, code in which I inject some dynamic data by nesting variable using ${ }.
Now, my aim is to bind the src attribute of an ```img`` tag to a variable so that I can change the logo displayed in the created PDF.
Where I fail: what appears on the PDF is a white space with dashed borders (check picture attached). So I guess that the path must be correct because if not it would show the missing icon (issue I went through before I could format correctly the path).
Anyone who already had that trouble?
Finally bypassed this issue by storing the base64 data when selecting a logo and using it directly in the img tag.
<img src="data:image/png;base64,${base64data} " />
You can convert the images to base64 here https://www.base64-image.de/
then add the codes directly to your image tag
I'd like to use ionic icons dynamically like this:
<ion-icon src="https://eu.ui-avatars.com/api/?background=0D8ABC&color=fff"></ion-icon>
Any idea how to make this work? (if it's possible)
The ion-icon component only accepts valid .svg files for src='/path/to/file.svg' attribute. As stated from the Ionicon documentation.
Custom icons
To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.
<ion-icon src="/path/to/external/file.svg"></ion-icon>
The image in your src attribute is a .png format instead of a .svg which the component is expecting. This will then cause the component not to render the icon. If you instead use .svg it will turn out the way you expect.
Is there have any way to do this ? I am trying load some local file in the UIwebview, if the content include Image, loadHTMLString is taking much longer to finish page loading just because have to waiting the download of image file.
As I think if the image can be load in progressive mode, the UIwebview can display the html text on the very beginning to prevent the user keep too long time to waiting for the whole page loading.
P.S. The Image is from the internet,but the html string is on the local file
All you need to do is to have the images to be loaded in the Progressive JPEG format. To convert them using ImageMagick you can type:
convert somefile.xxx -interlace JPEG somefile_progressive.jpg
for example.
Another possible solution could be to load the images using JavaScript, once the page has been loaded fully.
Ie just leave the src blank in the html and set it via JavaScript later.
I would really use Javascript. You'd show a blank page or one with just a part of your content and after your document is ready (maybe use jQuery?) you load the other content.
document.getElementById('content1').innerHTML = "<img src="./images/something.png" alt="" />"
I am currently using tinyMCE to edit content within my site and I am looking for a way display an image within the tinyMCE once it has been uploaded to the site.
Note: I am not looking for a means to upload an image directly into tinyMCE. I am looking for the tinyMCE command which would allow me to display an image within the content in the editor after I have uploaded it.
Thanks
You could insert a regular img-tag inside tinymce using a custom plugin or using the setup parameter in your tinymce init. The src should refer to the html location of the image to be uploaded. As soon as the image is available the image will become visible on next reload of the editors content. If you need further assistance feel free to ask.
After successfull uploaded you have the source of the image (img_src). Now you need to add it to the editor like this
tinymce.activeEditor.insertContent('<img alt="photo" src="' + img_src + '"/>');
This is question about tinymce... Current image editor is slow for because it demands opening popup for every new picture I want to add. I have my own external image gallery where each image contains it's url so copy-paste of url's is very easy and fast...
I would like to have button similar to Bold that does following:
To editor I paste url of image (for example: www.site.com/image.jpg) and when i select this url and click on my new button it converts image url to <img src='www.site.com/image.jpg'> and shows image in editor.
I searched plugins and found nothing similar to this.
Any ideas?
Thanks in advance!
Ilija
solved!
In documentation there is example how to manipulate text in editor from external commands... end even set them as button