I embedded an base64 image like this:
<img alt="Embedded Image" title="My image" alt=""My image" src="data:image/png;base64,AUa4GWAoUW...
If I drag-and-drop that image from the browser to my desktop I just get a HTML document shown instead of a PNG image. (Firefox / Opera)
How to make drag and drop for base64 images possible?
Thanks
Related
I recently added a video on a readme file on GitHub. Although I was able to drag and drop the video, it automatically fills the entire width of the readme. I was wondering if there was a way to adjust the height and width the video?
I'm not entirely sure what you mean by "I was able to drag and drop the video", but assuming that generates a <video> tag you should be able to add a height or width attribute to it, e.g. as shown in the MDN documentation:
<video controls width="250">
<!-- ^^^^^^^^^^^ -->
<source src="/media/cc0-videos/flower.webm" type="video/webm">
<source src="/media/cc0-videos/flower.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
I need to resize a local image from the assets folder in my markdown file.
I currently have this image that does display in my .md file.
I need to resize the image to make it a bit smaller.
Is it possible with the current package?
You can use inline HTML <img/> with providing size.
<img src = "assets/images/image01.png" width="x" height="x" />
Or
[<img src ="assets/images/image01.png" width="100" height="x"/> ](assets/images/image01.png)
More and ref: Changing image size in Markdown
<img src="drawing.jpg" alt="drawing" width="200"/>
This the github discussion on this, https://gist.github.com/uupaa/f77d2bcf4dc7a294d109
I am using Tinymce as an email editor. When inserting an embedded image as attachment, the images are inserted as:
<img src="cid:mycid#sth" />
This works for the email sending part - but of course not for the editor. The image is not displayed...
Question: Is there a "content" and "display" layer in Tinymce where I can hook into?
My goal is to save the content as
<img src="cid:mycid#sth" />
and transform it in the editor window as
<img src="/mypreview/image/2000" />
I am using Tinymce 4.
The editor relies on the browser for the rendering of HTML so anything like your <img src="cid:mycid#sth" /> won't render in the editor - its simply not valid HTML.
What you can do is rely on data-xxx attributes in HTML to store the data you really want and transform the HTML when you go to load it into TinyMCE.
For example...
When someone inserts the image you could create the following HTML
<img data-src="cid:mycid#sth" src="/mypreview/image/2000" />
...this would allow the editor to actually render an image while you still keep the data you need. When you save the content you can strip out the existing src data and copy the data-src content back into the src if that is what your app needs for its server side processing.
If someone edits the content you can just reverse the process and change the src back to HTML that TinyMCE can render.
Rather than have to upload/copy across each individual image in my table, I want to display the images based on their image url (which I have). With ordinary images one can check "reduce or enlarge" (Inspector>Format) in order for images to fill the box (even if they are of different sizes). I can use the Web Viewer to create a box which includes the image, but I can't edit Format in the Inspector.
How can I fill the Web Viewer box with the image from a url (which ends in .jpg)?
You can specify the image height and with within the Web Viewer using either HTML or CSS. A simple example of this using inline CSS could be something like this:
"data:text/html,
<img src='" & Image::URL & "' style='width:100%; height:100%;' />"
You can specify the image height and width within the Web Viewer using HTML and CSS. If the ImageURL was referenced in Image::URL you could include it as follows:
"data:text/html, <style type='text/css'>
/* Remove margins from the 'html' and 'body' tags */
html, body {height:100%; margin:0; padding:0;} </style>
<img src='" & Image::URL & "' style='width:100%; height:100%;' />"
Uncheck "Allow interaction...", "Display progress bar" and "Display status messages" (in the Web Viewer Setup)
I'm working on a site, where I have 3 images of an item displayed, but there are can be more than 3 images of an item. I want to use fancybox to display them, but I couldn't figure out how it could be done.
I know how to create a gallery "manually", but I don't know how to add images manually to an existing gallery which is identified by a class.
Thanks.
It doesn't look like there are any methods in Fancybox for programatically adding an image to a gallery. Perhaps you could contact the author and request it, or you could modify the script.
You will need to recreate the fancybox gallery each time you add a new image. As simshaun said, there is no method for adding new images to an existing fancybox gallery.
From the Fancybox example page, you need to have the same ref parameter on each image in order to create the gallery.
<div style="display: none;"> <a class="fancybox-effects-c"
href="images/test.jpg" data-fancybox-group="groupname" ><img
src="test.jpg" alt="" /></a> </div>
This should work as the image will be there and added to the fancybox but just not shown.