I'm trying to use srcset for the first time, with the code below:
<img srcset="url-1000x552.jpg 1000w, url-670x370.jpg 670w, url-400x221jpg 400w" src="url-670x370.jpg" sizes="(min-width:300px) 400w, (min-width:768px) 670w, (min-width:992px) 1000w">
This works in Firefox and Edge, but Chrome, Safari and Android always serve up the largest image size - and obviously the last browsers two are the ones I care most about.
I've tried:
Specifying sizes="100vw" instead
Changing order of srcset sizes
Removing src
Another post (Img Srcset Attribute Not Picking Smaller Image) suggests testing a srcset image in browsers - and indeed the codepen image there is only showing the larger one in my Chrome browser and on my Android phone.
Is there anything I can do about this? Is there much point in actually using srcset if it's not working in browsers??
Related
I've tried loading a local html file using webkit_web_view_load_uri() with a file:// URL. However, the webview would display a blank page. To circumvent this, I tried using webkit_web_view_load_html() and it worked correctly.
Now that I'm trying to load some images in the html using the <img> tag, the images aren't loaded (It displays a blank page).
I'm puzzled because I tried before (~ 2 months ago) a similar method and it worked.
Note: I copied the contents of the generated HTML into a file and loaded it with Firefox and it worked as it should (The images are visible), but with another WebKitGtk application I had lying around the images didn't load.
Note: I'm using C++ as the main programming language (I'd prefer having C++ types in the solutions only if possible)
Note: I have set webkit_settings_set_allow_file_access_from_file_urls() and webkit_settings_set_allow_universal_access_from_file_urls() to TRUE
Ok, I've managed to solve this. The solution had NOTHING to do with webkitgtk, which is strange. It seems that the application was trying to download the page instead of loading it. This traces to a faulty MIME type database.
Tl;Dr:
Execute this:
rm ~/.local/share/mime/packages/user-extension-html.xml
update-mime-database ~/.local/share/mime
and use webkit_web_view_load_uri() instead of webkit_web_view_load_html() with a file:// URI
I had the same problem in C. You have to explicitly set file:// as base_uri when you call webkit_web_view_load_html().
See also answer here
The documentation for the Foundation for Apps (and Angular Base Apps, which is the now-maintained fork of F4A) Interchange gives this example as a way to load only the small size of an image on mobile devices in order to save bandwidth:
<ba-interchange>
<img media="small" src="assets/img/small.jpg">
<img media="medium" src="assets/img/medium.jpg">
<img media="large" src="assets/img/large.jpg">
</ba-interchange>
However, while only the small image is displayed, the browser still sees three img tags and requests all three images, before angular is even loaded. This defeats the purpose of using the interchange at all, at least, if your purpose is to save bandwidth.
The Foundation 6 for Sites Interchange avoids this by putting all of the images into a data-interchange attribute string on the element instead. Does F4A have something similar that I'm missing? Or is there something about the above example code that I'm missing?
I would suggest using the ba-if directive provided by Angular Base Apps. This directive internally uses the ng-if directive, causing the img element to not be added to the DOM except when the specified media query is matched.
Your code can be re-written as follows using the ba-if directive:
<img ba-if="small only" src="assets/img/small.jpg">
<img ba-if="medium only" src="assets/img/medium.jpg">
<img ba-if="large only" src="assets/img/large.jpg">
I'm new to clojurescript/reagent and am testing out ideas for a media display app.
At the moment I'm having problems with a few more specific elements of including html5 media components on my page and using their full features.
Example - including #t=10,10 at the end of a video source string(referenced here https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video) will sometimes work but only take the end range value.
Same video element - using any attributes that aren't true/false will break compilation. e.g :preload auto doesn't work whereas :fullscreen false does.
Is there a clojurescript way to handle these elements or is this more js interop territory?
Since clojurescript will be compiled to JS eventually. Everything JS can do..clojurescript could do it equally well.
your "sometime work" issues are related to the nature of ReactJS ( Reagent is a wrapper of ReactJS ). Generally, you need to obtain the dom node of video tag to use most of the video tag's features.
Related issues
Video displayed in ReactJS component not updating
Example
Source Code Example of how to interact with video tag under ReactJS.
https://github.com/eisneim/react-html5-video/blob/master/src/Video.js
You should provide the minimum case to produce the problem, so others could help you.
In setting up a part of a site where users can enter url for youtube video and have it play in modal window -- currently using fancybox -- have found that some urls don't work, even with fancybox regex for the href.
However, it appears that just getting the video's code and appending it to a basic url stem works. Such as:
http://www.youtube.com/watch?v={video code}
as in http://www.youtube.com/watch?v=OMYzsAurxHY
I run the submitted url through a series of ColdFusion regexs to get the code, and then append to the "http://www.youtube.com/watch?v=" stem.
Note having any problems, but just want to see if anyone more familiar with youtube sees any problem with assuming this stem + video code wouldn't always work -- or at least a great percentage of the time.
Thanks
My Django 1.1 app uses dynamic images.
I'm confused about why the path generated from my template tag:
{{image_product.photo.path}}
looks correct, but does not display the requested image.
This generates a path that works:
src='/media/{{image_product.photo}}' => <img src='/media/lcdtvs/product1.jpg'>
This DOES NOT work:
src='{{image_product.photo.path}}' => <img src='/Users/Bryan/work/review_app/media/lcdtvs/product1.jpg'>
I checked to confirm that the Absolute path generated from MEDIA_ROOT is correct on my computer and it works fine.
Why would the image not display correctly?
Two things to keep in mind:
What you want is the {{image_field.url}} method (not the path).
If it still is 404, either you need to setup your server correctly, or if you are using the development server you need to enable it to server static files.
Not familiar with Django, but I'd guess you need to have file:///Users/... in the second snippet.