I'm using mediawiki 1.17 so I tried both:
$wgAllowImageTag = true;
$wgRawHtml = true; #I know it's insecure just wanted to see if it'd work
My img tags of the form:
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>
Are getting rendered as:
<img alt="Base64 encoded image" width="150" height="150" />
If i edit the page, the img tag still has all the data.
Background
I'm exporting kb articles from my CRM system (sugarcrm). Sugar encodes the images linked to each KB article in base64. This makes it pretty convenient for syncing those images to the mediawiki site without having to export / relink images. So, would be great if I could get mediawiki to allow the base64 encoded images. In my case our mediawiki site is not edited by the general public, just members of our company.
Did you turn on $wgAllowExternalImages = true;
I know technically it isn't an external image, but maybe mediawiki is treating it as such. You could also try whitelisting it.
Although it's unlikely that you still need this, it may help others: I just created some patch instructions to make MediaWiki (and the CKeditor-based WYSIWYG extension) support base64 images.
https://github.com/limasierra/MediaWiki-Base64-patch
hth
Related
I have been using Svelte for a little while and now I have switched to SvelteKit so I can add multiple pages. I want to add some images to my site but I don't know where to put them. In Svelte I would just put them in public/images but there is no public folder with SvelteKit (I set it up with npm init svelte#next my-app if that matters). Would I put them in static?
Thanks!
I added the images in static/images and referenced them with src="/images/photo.jpg" like #b2m9 said and it works perfectly.
I recommend putting images under src/lib, not static. For example you could make a src/lib/images or src/lib/assets folder and put them there.
The reason is performance:
For files imported from anywhere under src, at compile time Vite adds a hash to the filename. myImage.png might end up as myImage-a89cfcb3.png. The hash is based on the image contents. So if you change the image, it gets a new hash. This enables the server to send a very long cache expiration to the browser, so the browser can cache it forever or until it changes. It's key-based cache expiration, which IMO is the best kind: cached exactly as long as it needs to be. (Whether the server actually sends the right caching headers in the response may depend on which SvelteKit adapter you use and what host you're on.)
By contrast, images under static don't have a hash added to their name. You can use the static directory for things like robots.txt that need to have a specific filename. Since the filename stays unchanged even if its contents change these files by necessity end up having a cache-control value that includes max-age=0, must-revalidate and an etag, which means even if the browser caches the image it still has to make a server round-trip to validate that the cached image is correct. This slows down every image on your site.
Usage:
When putting images under src/lib, you reference them like this:
<script>
import img from '$lib/images/img.png';
</script>
<img src={img} alt="Image" />
I recommend simplifying by adding svelte-preprocess-import-assets to your project, which automates the process of importing images and cleans up your code. You wrote the following and it generates the code above:
<img src="$lib/images/img.png" alt="Image" />
As Sveltekit uses Vitejs, there is a easy solution mentioned in Vitejs official web site (Click Here).
First inside the script tag :
<script>
const imgUrl = new URL('./img.png', import.meta.url).href
</script>
then inside your Image tag just use that variable,
<img src="{imgUrl}" alt="" />
or,
<div class=" h-screen w-full" style="background-image: url('{bgUrl}') ;">
</div>
You can import static images from any relative path.
there is also svelte-image.
"Svelte image is a pre-processor which automates image optimization using sharp.
It parses your img tags, optimizes or inlines them and replaces src accordingly. (External images are not optimized.)
Image component enables lazyloading and serving multiple sizes via srcset.
This package is heavily inspired by gatsby image.
Kudos to #jkdoshi for great video tutorial to Svelte Image."
-https://github.com/matyunya/svelte-image
I'm trying to use a next/image instead of a regular img tag in the code below. With the regular <img> tag, the following achieves exactly what I'm looking for:
<div>
<picture>
<source
srcSet="https://via.placeholder.com/100/333333/ffffff.png"
media="(prefers-color-scheme: dark)"
/>
<img
src='https://via.placeholder.com/100/dddddd/000000.png'
width='100px'
height='100px'
alt='Placeholder image'
/>
</picture>
<p>Change your OS or browser's preferred color scheme to see a different image.</p>
</div>
Indeed, when I set my OS (or browser) to the dark theme, I get a dark image, and vice-versa for the light theme.
However, if I try the same thing with a next/image, I just get the light-themed image every time… I can't put this into a snippet because next/image requires a Next.js server, but here is the code that I'm using, which, in my tests, is backed by a Next.js development server with the appropriate image-related settings configured in next.config.js:
// pages/test.js
import Image from 'next/image'
export default function MyWebPage () {
return (
<div>
<picture>
<source
srcSet="https://via.placeholder.com/100/333333/ffffff.png"
media="(prefers-color-scheme: dark)"
/>
<Image src='https://via.placeholder.com/100/dddddd/000000.png' width='100px' height='100px' alt='Placeholder image' />
</picture>
<p>You can change your OS or browser's preferred color scheme, but you'll always see the light-theme image.</p>
</div>
)
}
Here I never get the dark-themed image, unfortunately.
Theories:
Perhaps next/image doesn't interact with the <picture> tag exactly the same way as <img>? But I'm not finding anything online about using next/image with the <picture> tag…
Perhaps I should be providing this media-query-dependant source set in a different way when using next/image? But, I'm not finding any media attribute in the next/image docs…
Question:
How can I change the src of my next/image based on the user's preferred color scheme?
Non-solutions:
I could put 2 images on the page and use display: none on one of the two as a function of the user's preferred color scheme, but I'm hoping to find a solution that doesn't require so many duplicate images all over the place, which incurs a (small) performance penalty and makes the code that much harder to maintain, or that much more complex if a helper component is created.
I could change the src using Javascript when the page loads, but this would result in a flash of incorrectly styled content and generally does against my objective of having my page fully server-rendered and compatible with browsers where Javascript is turned off.
I could use cookies to let the server know about a user's color scheme preference and render the page consequently, but this would not work for the very first visit and comes with the requirement to include a cookie bar to inform the user of the reasons behind the use of cookies, as well as a way to opt-out.
I try to display an ascii85 encoded image, like:
<img src='data:image/jpg;base85,...'/>
or
<img src='data:image/jpg;ascii85,...' />
I found several examples on base64 files, but nothing about ascii85...
What do you think?
Thanks
You can't do it because, as far as I know, only PostScript and PDF are able to handle ascii85 (base85). Browsers are only handling base64 for now.
If you already have data in this encoding you will need convert it to base64 before putting it into the browser.
It can be done with some javascript/typescript.
Have the code crawl the DOM
find img/#src attributes that is base85 encoded
write the code to decode base85 and re-encode it in base64
update the IMG src attribute back
I currently use retina.js to load Retina-optimised images on my website.
It is great, but renders redundant all thumbnail links to larger images (which load with Fancybox).
My question is how can I disable all links to images if Retina is detected? (At least until I have a higher-res camera.)
Regards
Paul
If you want just some images on your page to be excluded from retina.js, you have to add the data-no-retina attribute to the tag, like this:
<img src="yourImage.jpg" data-no-retina />
If you want to disable the links created by Fancybox, you have to modify the Fancybox source itself.
i create a Document(PDF) and get the Content from the Umbraco nodes.
But there's a problem by displaying the images. How can i display or get the images from the Media libary of Umbraco? Is there a way, offered from Umbraco to get the Image(s)?
Thanks a lot.
If I understand your query correctly, you a pretty much there.
You should simply be able to get the umbracoFile path (just like you are for the PDF file) and simply declare it as the img src!
With Razor...
<umbraco:Macro runat="server" language="cshtml">
<img src='#Model.MediaById(#Model.imgProperty).umbracoFile' alt="" />
</umbraco:Macro>