Digital Ocean suggests the following format for webp images:
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="Site Logo">
</picture>
In the example below I have applied a class to the jpg. Is it a good idea (or necessary) to apply the same class to the webp? How about adding the alt tag? Do webp images need an alt tag?
<picture>
<source srcset="images/pic.webp" type="image/webp">
<img src="images/pic.jpg" class="img-fluid" alt="">
</picture>
I assume you are referring to this article.
While it's certainly possible to use the picture and source elements, there are reasons against it:
not supported by all browsers (although it will fall back to the inside img)
complexifies html code
requires rewriting of existing code
The alternative option is to use Apache’s mod_rewrite module to automate the process of serving .webp images to supporting browsers (also in the article). The advantages being:
supported by all browsers
simpler html
no need to rewrite existing code
Related
I want to show webp image urls with their fallback urls in image_tag rails.
Now its <%= image_tag "profile.webp",:class=>"profile" %>
How can I add fallback url of jpg url for browsers on which webp not working
unfortunately, this isn't possible using the rails helper (image_tag).
You can take a look at https://github.com/kavu/sprockets-webp as a possible solution, however, this adds a lot of complexity.
Your best bet is solving this using JS: https://developers.google.com/speed/webp/faq
well, you can achieve it not by rails way, but by basic HTML-5 WAY, using picture tag
<picture>
<source srcset="/img.webp" type="image/webp" />
<source srcset="/img.jpg" type="image/jgpg" />
</picture>
Or in the below way too..
<picture>
<source srcset="/images/cereal-box.webp" />
<img src="/images/cereal-box.jpg" />
</picture>
I have an svg in an external file that I want to reference with a use statement in Rails.
If I do:
%svg
%use{"xlink:href" => "assets/icon.svg#test"}
which generates the html:
<svg>
<use xlink:href="assets/icon.svg#test"></use>
</svg>
Everything works as expected.
However I want this to be able to work with sprockets asset versioning in a similar way to how image_tag works.
I tried to do:
%svg
%use{"xlink:href" => image_url("icon.svg#test")}
This generates the html:
<svg>
<use xlink:href="http://0.0.0.0:5000/assets/icon.svg#test"></use>
</svg>
The asset certainly exists at http://0.0.0.0:5000/assets/icon.svg, but the icon does not show.
What am I doing wrong? How do I use sprockets asset helpers with svg use statements?
Asset cannot exist at 0.0.0.0, it is not a real ip, you need to set config.action_controller.asset_host
In development 127.0.0.1(loopback ip) will do
Seems to be a cross origin browser security issue.
Google chrome actually gives a message that helps with this. (I was previously using firefox so didn't notice this...)
Unsafe attempt to load URL http://0.0.0.0:5000/assets/icon.svg from frame with URL http://localhost:5000/. Domains, protocols and ports must match.
The domain names much match for it to work.
In my opinion, this can be fixed by using image_path instead of image_url. That way you should get a relative link to the SVG file, i.e. precisely the same output as in your raw HTML, possibly with just the asset hash added to the file name.
So the title is the question.. I have a fragment like
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" th:fragment="header">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Shop</a>
So when i open this file in a browser, the static content (e.g. My Shop) will be displayed.
On the main html file where i import this part, i just want to use a simple th:replace tag like this:
<div th:replace="fragments :: header"></div>
So, at runtime, everything works fine. But when i want to use this file also for prototyping, opening the file directly in a browser, the contents of the file (static text like "My Shop") will not be displayed, since this file does not know anything about the fragment. Is there any way of achieving this, without rewriting all the contents also in the main html?
I can imagine sth like this:
<div th:replace="fragments :: header" th:fragment-file="fragment.html"></div>
According to Thymeleaf doc (http://www.thymeleaf.org/doc/layouts.html)
When a Thymeleaf template is used as a static prototype, we cannot see
the fragments we are including using the th:include/th:replace host
tags. We can only see the fragments aside, opening their own template
documents.
However, there is a way to see the real fragments included into our
pages while prototyping. This can be done using Thymol
(http://www.thymoljs.org/), an unofficial JavaScript library that is
an implementation of Thymeleaf’s standard fragment inclusion
functionality, providing static support for some Thymeleaf attributes
like th:include or th:replace, conditional display with
th:if/th:unless, etc.
You could also use a template alias (using resolver.addTemplateAlias("template", "folder/template"))
I have used this blog for adding a dynamic pdf in my project. when i am tryng to add a image than it is compelling me to have a Image folder in C:\ . How can i add a image from project.
This appears to be using a html view page to render the PDF so you can just use a normal img tag like you would in any html page.
With razor syntax you can do something like this:
<img alt="" src="#Url.Content("~/Content/Images/mypic.png")" />
I believe this may solve your issue. Essentially you want to specify the full web url as the src of the img, for example:
<img alt="" src="www.example.com/images/mypic.png" />
Rails 2, PDFkit 0.5.0
Im generating a PDF from a View in Rails 2 with PDFkit and everything works fine. The only thing which doesn't work is displaying pictures in the pdf.
When I look at the View in the Browser, the picture is there but its missing in the PDF. There is only a placeholder existing in the PDF.
The image_tag is looking like this:
<%= image_tag('plus.gif') %>
I also tried to realize it with a css-file but it doesn't work either.
Any ideas?
Because of the way that wkhtmltopdf works you need to specify the full path to any assets (JS, CSS, images etc), including the domain name.
This won't work:
<img src="/images/foo.png" />
This will:
<img src="http://example.com/images/foo.png" />
One workaround is to set an explicit asset host, even if it's the same server as your app is running on (see the AssetTagHelper documentation for details). Another would be to specify the hostname in the image_tag.
Instead of putting the full path each time, you can add a base tag to the head section.
<base href="http://mydomain.com" target="_blank" />