How to insert an external image in richtext editor in wagtail - wagtail

In wagtail RichtextField's editor, I can upload and insert an image without problem, however what if I want to insert an image from an external URL, what can I do? current Draftail editor doesn't provide such an option.
I tried the following options already:
"embed" button in RichtextField edtior. obviously it doesn't work for most external image URL, maybe it would work for some selected sources with oEmbed. Most of the time it gives error "Cannot find an embed for this URL."
demo site provided by Michael Yin
https://blog.michaelyin.info/wagtail-blog-demo-now-available/. The RichtextField editor has exactly the same buttons, and "embed" button gives exactly the same error. So this can rule out problem of my own configurare
draftail editor at https://www.draftail.org/ actually has a button to insert image by external URL, and the demo works very well.
so my question: why did Wagtail remove the support to insert external image URL, and how can I insert an image by URL in RichtextField editor?

Related

CodenameOne Cannot Add Image to Button Using GUI Builder

I am using the CodenameOne GUI builder to add an image to a button.
I added the image to the res file and then clicked [Pick Image] in the Property Inspector (see my screenshots). The button image (a plus sign) appears in the GUI.
I hit 'save' in the GUI Builder and then close it, then go back to NetBeans and run a debug simulation, and the icon appears, so far so good. .
But now I run the debug simulation again and the button image is gone!
I open the GUI Builder and it's gone there as well: the button has reverted to [Pick Image] and, when I click [Pick Image], my image is missing from the res file.
What is going on here? I repeated this three times with the same result- I literally ran the Debug sim twice without doing anything in between and the icon disappears, and there is no indication in the Output messages to indicate that there is a problem.
The Form1.gui file shows a reference to the icon image so maybe the resource file is being cleared in between makes?
<component type="Button" icon="resFile:plus.png" name="Up" actionEvent="true">
</component>
[EDIT] I found that if I add the images using the CNO Designer on the theme.res file, the images 'stick' and I can get a good build.
HOWEVER, when I make code changes and then open the GUI Builder again the images are removed from the res file.
can you add a code snippet of how you add the image ...
According to the error message, you may have chosen the incorrect path, or maybe you have added the path incorrectly in the code.
Unfortunately, the old CN1 Designer is not compatible with the CSS compiler. If your project uses CSS, you should add images to the resource file directly in CSS (e.g. by adding it as a background-image on some element), or import it via the GUI builder, as, adding it that way will also add a reference to the image inside the .css file.
This stems from the CSS compiler pruning "unused" images in the resource file. If the image isn't referenced in the CSS file anywhere, it will be removed from the output .res file.

HOW TO CLICK LINK IN PAGE OF REACT-PDF

Description:
I've checked similar issues, but none of the provided solutions seem to work in this case. My assumption is that this has something to do with pdf document itself, appreciate if anyone could take a look.
Steps to reproduce
Here is the sandbox with the example
https://codesandbox.io/embed/gallant-thunder-x3o7v7?fontsize=14&hidenavigation=1&theme=dark
Expected behavior
Links are clickable. Please see the online demo https://projects.wojtekmaj.pl/react-pdf/
Actual behavior
Links are not clickable
Interesting fact, that google viewer does not open the links either (pages 4, 5), but if you download the document, links are working. I'm using default previewer on MacOS
Environment
React-PDF version: 5.7.2, same behaviour on 4.1.0
React version: 18.0.0, same on 16.4.0
Also, I used iframe and embed, and really it make link clickable but its not display pdf on safari IOS
The problem is you are using a "virtual PDF reader" (GoogleDocs/Mozilla PDF.js) which produces images and searchable text as separate layers, the link is there but it is the highlighted yellow zone not the blue underline text. also due to browser security I have to right click to open at my choice in new tab or new window (my choice would be save link as PDF for offline viewing).
In a true PDF viewer like Chrome embedded PDF Plugin or the users iFrame / offline viewer, the links would work perfectly. Again whichever way the user decides.

How can I store images so that the URL for the image takes me only to the image and not the webpage?

I am connecting Active Directory to a platform my company uses. In order to ensure that user's have a profile picture, I will add the URL of the photo to an attribute and connect it that way. However, the URL for the image must take me directly to the image. So far, I have been able to store images on different options but for each one, when I select the URL, it takes me to the webpage that disples other items than just the image (e.g. - https://ibb.co/J2cFfsx ). How can I store photos so that the URL takes me directly to JUST the image ONLY?
right click on the image and click view image. once you have done this you should get something that looks like below. In the URL there should be a new link, if you use that one it should always take you to the image aslong as it exits.
Equally you can right click on the image and select "copy image location" and that will give you the new link. I personally perfer the other method as it gives a proper preview of the image at its full size.
new image view
To link your image to the document go and search for image on google. right click on image -> Create QR code for this image after showing the QR code. Beneath QR code there is a link copy that and paste it in your document where you want. Now just to be sure click on the link and it will show the image only. Try it!!

How Embed Gist in Wagtail?

How to insert dynamic gist code in the middle of posts generated by Wagtail (Django Cms)?
I searched the documentation of wagtail but did not find anything that could help me automatically insert the github codes.
Gist is one of the built in content types supported by Wagtail's embedded content feature. Within a rich text field, editors can use the 'media' toolbar icon to enter the URL to the Gist page, and it will appear embedded in the rich text content. Within a StreamField, the developer can EmbedBlock to the set of available block types, and the editor will then be able to enter the Gist URL into that field.

Unable to see wagtail's Generate Url

I'm using Django 1.10.5 with Wagtail 1.8. I just noticed there's no
'generate url' in the Images section. Was it removed?
And, when I go to create a new entry, there aren't any 'justification'
buttons in the edit. Were those removed, also?
Neither of those features have been removed from Wagtail. The 'generate URL' link is an optional feature which can be enabled as described here: http://docs.wagtail.io/en/v1.8/advanced_topics/images/image_serve_view.html
The only thing I can think of in Wagtail that could be described as a 'justification' button is the set of options for choosing image format (which default to left, right and full-width). This is still present in Wagtail (although note that it only appears when inserting an image into a rich text area, not when the image is an individual field). The Wagtail editing interface intentionally doesn't provide text justification options, because page layout is more correctly handled in the template, rather than inside page content.

Resources