So, I have an challenge with webp images on my site. As you can see below it doesn't show the image but instead renders the image code.
When I use a jpg file it's works like a charm. My code is below. The image should be shown as 'cover' on a div. The framework I use is Foundation 5. I know it is outdated but I'm working on a new site and for now don't want to upgrade but thought serve webp images instead of jpg's could be a quick fix to limit the bandwith on Cloudinary, where the images are hosted.
<div class="small-6 medium-4 large-4 columns" style="background-size: cover;" data-interchange="[/-/media/Global/NoImage.jpg, (default)], [https://res.cloudinary.com/Company/image/upload/w_195%2Ch_195%2Cc_fill/f_auto/v1625496788/MainFolder/T/3554/t2scdia2gtw8vswjh575.webp, (small)], [https://res.cloudinary.com/woningnet/image/upload/w_300%2Ch_195%2Cc_fill/f_auto/v1625496788/MainFolder/T/3554/t2scdia2gtw8vswjh575.webp, (medium)], [https://res.cloudinary.com/woningnet/image/upload/if_ar_lt_1%3A1/h_600/if_else%2Cw_800/if_end/c_fill/f_auto/v1625496788/WRB/T/3554/t2scdia2gtw8vswjh575.webp, (large)]" data-uuid="interchange-qqqAg0">
I've been searching online but so far no solution, most things I've found where explanations why you should webp. Any idea's?
I happen to be using Foundation 6.7.4 and found the solution by making a change to the foundation.js or min.js file depending on which one you are calling and adding |webp to the end of the path match.
(path.match(/\.(gif|jpe?g|png|svg|tiff)
to
(path.match(/\.(gif|jpe?g|png|svg|tiff|webp)
Edit/Update: I Found a copy 5.5.1 on an older site the foundation.js or min.js
if (/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i.test(path)) {
$(el).css('background-image', 'url(' + path + ')');
el.data('interchange-last-path', path);
return trigger(path);
}
Should be able to add |webp
if (/\.(gif|jpg|jpeg|tiff|png|webp)([?#].*)?/i.test(path)) {
$(el).css('background-image', 'url(' + path + ')');
el.data('interchange-last-path', path);
return trigger(path);
}
Related
I'm showing images from resources/static/images/
The weird thing is if I give the path like "/images/milk.png", it shows the image but if I get name from ${}, it doesn't work.
<img class="card-img-top"
th:src="#{/images/${res.getLogo().getUploadFileName()}}"
th:alt="${res.getLogo().getUploadFileName()}" />
it seems res.getLogo().getUploadFileName() is working well. So it will be replaced like /images/milk.png. But it doesn't show the image...
How can I fix this?
One more thing, I know basic Thymleaf path is resources/templates, but how it recognize image when I gave like "/images/milk.png"
If u want to upload static images
th:src="#{images/} + ${res.logo.uploadFileName}"
if you want to upload dynamic images
th:src="#{https://~~~.com/} + ${id}
I am using dompdf to collate a load of existing HTML pages. A lot of these pages have anchor links in them that I would like to preserve. When I collate these articles the pdf collates very nicely but the anchors links don't work. The text is underlined like a link but on clicking it you don't go anywhere.
I have some test HTML that I am using to try out anchor links. Such as:
$content .= '<div style="page-break-after: always;">blah</div>
<div><a id="blah">link location</a></div>';
and also I have tried using name instead of id, based on this forum post - http://www.dashinteractive.net/dompdf/index.php?v=1530231. Such as:
$content .= '<div style="page-break-after: always;">blah</div>
<div><a name="blah">link location</a></div>';
Of course neither of these are working as I would expect.
I can't find much on the internet about how dompdf handles internal links. Apart from this page http://webresourcesdepot.com/html-to-pdf-rendering-engine-dompdf/ that says it can handle links and anchors. Not sure how reliable it is...
How do you put internal anchor links in pdfs using dompdf please? Can it do it?
dompdf up through 0.6.2 should work so long as you use the <a name="blah">...</a> format. The only problem in that release is that if the A tag is empty it will be removed before the link is rendered.
Your second sample should be fine, though maybe just as part of typing up the question the actual anchor reference is incorrect. The following should work:
<div style="page-break-after: always;">blah</div>
<div><a name="blah">link location</a></div>
The current beta for 0.7.0 has a bug that mangles the anchor resulting in a mis-interpreted link type. That issue should be addressed for the stable 0.7.0 release.
Note that no version up to and including v0.7.0 supports linking based on ID.
I have SVG image file with several nodes each is associated with URL. If I open this file directly in browser I can click on each node and it will open different URLs. However when I use this picture in my Sphinx documentation it doesn't work - picture rendered as a whole so I need to open it by View Image and only then I can click on nodes.
I'm using standard image directive:
.. image:: myfile.svg
Probably I need to use something else?
Sphinx generates <img> tags for images, which makes sense in most cases. However, to have the links inside the svg be clickable, you should use an <object> tag, i.e.:
.. raw:: html
<object data="myfile.svg" type="image/svg+xml"></object>
(Regarding the GitHub issue you linked to, I don't think there's a lot that Sphinx can do here—it's really quite complicated—short of introducing a new option to the .. image directive that lets the user specify whether to render as an img or object tag.)
One simple solution would be to add a link to the svg file in this .. image:: myfile.svg command:
.. image:: myfile.svg
:target: _images/myfile.svg
Take care of checking the relative directory where the images are copied when the html files are generated. By default, it should be _images/.
This way, you can click the SVG file, to see it in a plain page, and then click on it as usual (not a perfect solution but still..).
I am probably misunderstanding the OP's requirements, but why not just include the SVG into the sphinx documentation as html? This appears to work for me:
.. raw:: html
:file: images/image.svg
To include clickable svg links within sphinx I did the following:
.. raw:: html
:file: ../graphs/pymedphys_analysis.gamma.svg
See:
https://raw.githubusercontent.com/pymedphys/pymedphys/1915b9496e93782bdac7dcebff7e26e470e5ff57/docs/graphs/graphs.rst
This then freed me to write the following within an imported style sheet:
svg {
width: 100%;
}
https://github.com/pymedphys/pymedphys/blob/f4d404fa1cf3f551c4aa80ef27438f418c61a436/docs/_static/style.css
This made the svg fit the container as desired.
See:
https://pymedphys.com/developer/dependencies.html#pymedphys
I like this way
.. raw:: html
<a href="https://www.google.com/">
<img src="https://img.shields.io/static/v1?&style=plastic&logo=appveyor&label=Google&message=link2google&color=FF0000" alt="No message"/></a>
I'm still looking for a better solution myself, but I ran into the same problem and used this workaround.
You can use the download directive to give the user a link to the file.
:download:`svg <images/image.svg>`
I'm developing a web browser on Android and want to show the URL logo for the most visited sites like in Chrome (4 X 2). But the problem is that most favicons (eg: http://www.bbc.co.uk/favicon.ico) are of size either 16X16 or 32X32 and they don't look good when scaled up.
Is there a way I can download a high resolution icon/bitmap for an URL in a standard way? How about opening the home page and then extracting all the image links and then choose an image with the name logo in it? Would this method work for all the URLs? I want to know if there is a standard way to obtain a high resolution icon for a given URL or favicon is the only standard way to get the website logo?
You can code it yourself or use an existing solution.
Do-it-yourself algorithm
Look for Apple touch icon declarations in the code, such as <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Theses pictures range from 57x57 to 152x152. See Apple specs for full reference.
Even if you find no Apple touch icon declaration, try to load them anyway, based on Apple naming convention. For example, you might find something at /apple-touch-icon.png. Again, see Apple specs for reference.
Look for high definition PNG favicon in the code, such as <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">. In this example, you have a 196x196 picture.
Look for Windows 8 / IE10 and Windows 8.1 / IE11 tile pictures, such as <meta name="msapplication-TileImage" content="/mstile-144x144.png">. These pictures range from 70x70 to 310x310, or even more. See these Windows 8 and Windows 8.1 references.
Look for /browserconfig.xml, dedicated to Windows 8.1 / IE11. This is the other place where you can find tile pictures. See Microsoft specs.
Look for the og:image declaration such as <meta property="og:image" content="http://somesite.com/somepic.png"/>. This is how a web site indicates to FB/Pinterest/whatever the preferred picture to represent it. See Open Graph Protocol for reference.
At this point, you found no suitable logo... damned! You can still load all pictures in the page and make a guess to pick the best one.
Note: Steps 1, 2 and 3 are basically what Chrome does to get suitable icons for bookmark and home screen links. Coast by Opera even use the MS tile pictures to get the job done. Read this list to figure out which browser uses which picture (full disclosure: I am the author of this page).
APIs and open source projects
RealFaviconGenerator: You can get any web site favicon or related icon (such as the Touch Icon) with this favicon retrieval API. Full disclosure: I'm the author of this service.
BestIcon: Although less comprehensive, Besticon offers a good alternative, especially if you want to host the code yourself. There is also a hosted version you can use right away.
The Go code at https://github.com/mat/besticon tries to solve this problem.
For example
$ besticon http://github.com
http://github.com: https://github.com/apple-touch-icon-144.png
There is also an accompanying hosted version of the code, see for example http://icons.better-idea.org/icons?url=github.com.
(Disclaimer: I wrote it because I needed to solve the same problem a while ago.)
another option is getting favicons from any domain using a hidden google API
the favicon link pattern will be
https://www.google.com/s2/favicons?domain={domain}&sz={size}
for example
https://www.google.com/s2/favicons?domain=stackoverflow.com&sz=64
Logos are not going to be consistently named and very difficult to identify consistently. Consider putting the favicon on a colour tile of suitable dimensions. People will quickly associate the colour with the website. You could either extract a dominant colour from the website or favicon using something like colorthief, or make each one unique using a golden angle formula to choose a hue.
Here is a new and genuine solution which will always give you the best results-
Webchromeclient gives a callback of onReceivedTouchIconUrl method for all the websites just hold the url from here.
Next step is to convert this url to bitmap which can be done like this-
try {
URL url = new URL(touchiconUrl);
HttpURLConnection connection =
(HttpURLConnection)url.openConnection();
connection.setDoInput(true);
connection.connect();
InputStream input = connection.getInputStream();
Bitmap myBitmap = BitmapFactory.decodeStream(input);
return myBitmap;
} catch (IOException e) {
e.printStackTrace();
return null;
}
Next step is to send this bitmap for the shortcut.
Note: Remember to create bitmap on background thread like asynctask.
This HTML document requires a base url and the HTML/"View Page Source" of the web page and should output the values.
<!doctype html>
<input type=text placeholder=URL><br>
Place "View Page Source" of HTML homepage<br>
<textarea id=HTML placeholder="HTML content of webpage">
</textarea><br>
<input type=Submit>
<script>
function url(u,n){
try{
u = u.getAttribute(n);
}
catch(e){
return 'null';
}
if(u.slice(0,2) == "//"){
u = "http:"+u;
}
else if(u.slice(0,1) == "/"){
u = u.slice(0,1);
}
return '<img src="'+u+'">';
}
document.querySelector('input[type=Submit]').onclick = function(){
var output = '';
var HTML = document.getElementById('HTML').value;
var doc = document.implementation.createHTMLDocument("New Document");
doc.documentElement.innerHTML = HTML;
output = output + "apple-touch-icon<br>"+url([].slice.apply(doc.querySelectorAll('link[rel="apple-touch-icon"]')).reverse()[0],'href')
// deprecated output = output + "apple-touch-icon-precomposed<br>"+url([].slice.apply(doc.querySelectorAll('link[rel="apple-touch-icon-precomposed"]')).reverse()[0],'href')
output = output + "<br>image/png<br>" + url(doc.querySelectorAll('link[rel="icon"][type="image/png"]')[0],'href');
// <meta name="msapplication-TileImage" content="/mstile-144x144.png">
// deprecated output = output + "<br>msapplication-Ti:<br>"+ url(doc.querySelectorAll('link[name="msapplication-TileImage"]')[0],'content');
// <meta name="msapplication-config" content="/browserconfig.xml/ ">
//output = output + "<br>msapplication-con: "+ url(doc.querySelectorAll('meta[name="msapplication-config"]')[0],'content');
// <meta property="og:image" content="http://somesite.com/somepic.png"/>
output = output + "<br>og:image<br>" + url(doc.querySelectorAll('meta[property="og:image"]')[0],'content');
// <link rel="image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a">
output = output + "<br>image_source<br>" + url(doc.querySelectorAll('link[rel="image_src"]')[0],'href');
var URL = window.location.hash;
document.getElementById('output').innerHTML = output;
};</script>
<div id=output></div>
If you would like to automate the retrieval of the HTML you could use something like the following for PHP.
<? echo file_get_contents($_GET["url"]);
Usually favicon is small (like 16x16 or 32x32). If you need bigger dimensions, extract not favicon, but logo from homepage/header.
Stickman's site is down now - looks like he took it off line. I just found out that IE8 breaks the youtube embed for his lightwindow. IE8 tried to download the file from the link instead of displaying it. Anyone have other solutions or a work around for IE8?
Found this page where someone sucked down his How To page before it was taken down.
The YouTube video link shows the issue.
http://edu.cnzz.cn/adcode/demo96/
Thanks!
i believe the problem is related to the lack of a filename extension and lightwindow's inability to determine a file type. Adding ".swf" to the end of the youtube URL allows the video to play directly or through lightwindow without error.
I have found a dirty solution for the problem. I replaced the following line
$('lightwindow_iframe').setAttribute('src', this.element.href);
with this
var youtube_content = '<object width="500" height="300"><param name="movie" value="' + this.element.href + '"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="' + this.element.href + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="300"></embed></object>'
this._writeToIframe(youtube_content);
It works, but you can't open other external pages with this fix. Only Youtube embed Video works with this.
Since stickman's solution isn't supported anymore I switched over to another solution.
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
works well.