I have an incoming HTML that contains img tags.
I need to force the images to be max the size of the viewport: iPhone or iPad.
Currently the text fits the screen nicely, but the images overflow the screen size.
I can force to [_wvContent setScalesPageToFit:YES];, but then the text is too small.
Any way to make the images the screen size?
Couple of incoming examples:
<img alt="Comparison " src="http://www.sample.com/wp-content/uploads/wp-post-thumbnail/dsa_k4iI.jpg" class="wppt_float_left" title="Comparison Photo" />
<img class="alignnone size-full wp-image-107864" alt="320d Comparison " src="http://www.sample.com/wp-content/uploads/590px4_2526_RT.jpg" width="590" height="329" title="20d Comparison" />
<img alt="" src="http://www.sample.com/wp-content/uploads/wp-post-thumbnail/dsa_ka.jpg" class="wppt_float_left" title="2013 BMW 320i: Track Tested by Edmunds Photo" />
<img class="alignnone size-medium wp-image-107859" alt="" src="http://www.sample.com/wp-content/uploads/201_-655x436.jpg" width="655" height="436" title="" />
Thanks for your help.
What you need to do is construct an objective-c string containing javascript that will run inside the webview to change the image sizes to fit inside the bounds CGRect of the web view. Then tell the web view to execute this javascript by calling stringByEvaluatingJavaScriptFromString:
Related
I'm trying to update my company's website to be more ADA friendly by ensuring all images have alt-text assigned. However, when I add alt text on the Wordpress CMS, I'm not able to view it in the HTML.
Please see attached screenshots for reference.
I would greatly appreciate any help that any one can give me on where to look on the server and what to add to ensure that my alt-text will be displayed.
This is the code snippet for the icon I reference in the screenshot:
<img data-src="https://applecareurgentcare.com/wp-content/uploads/2020/04/apple-care-laptop.png" class=" lazyloaded" src="https://applecareurgentcare.com/wp-content/uploads/2020/04/apple-care-laptop.png">
Screen shot of alt text added in wordpress media library
Well there are two ways of doing this, when you have the attachment ID. I am going to answer with the best and recommended way.
Use the function wp_get_attachment_image from WordPress core.
You can use it in this way.
echo wp_get_attachment_image( 49, 'thumbnail' );
Where 49 is the id of the image and and thumbnail is the size.
Output:
<img width="150"
height="150"
src="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg"
class="attachment-thumbnail size-thumbnail"
alt="Test Alt Text"
loading="lazy"
srcset="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg 150w, http://checkout.io/wp-content/uploads/2021/06/profile-300x300.jpg 300w, http://checkout.io/wp-content/uploads/2021/06/profile-60x60.jpg 60w, http://checkout.io/wp-content/uploads/2021/06/profile-110x110.jpg 110w, http://checkout.io/wp-content/uploads/2021/06/profile-100x100.jpg 100w, http://checkout.io/wp-content/uploads/2021/06/profile.jpg 538w"
sizes="(max-width: 150px) 100vw, 150px">
Benefits of it.
You get your alt text for your attachment.
You get loading="lazy" which is a recent update in WordPress.
You get srcset.
As this is a WordPress core function you will be automatically be compatible with all the image feature updates that comes, be it a SEO or a performance update.
I have replaced lazy loading with native chrome loading="lazy" attribute but it seems to be not working. I am using Chrome 76 latest version.
I checked my page speed in https://developers.google.com/speed/pagespeed/insights and it still shows to Defer offscreen images!
Not sure what exactly I have missed?
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
I answered a related question some time ago:
After some research I found that I was missing something on my images. Images should include dimension attributes
As mentioned here: https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
While it's not necessary, it is desired or expected to specify the dimension attributes on your images because without dimensions specified, layout shifts can occur. Resulting in unexpected behavior.
The browser needs to know the dimensions of your images to reserve sufficient space on a page for them.
Related question: https://stackoverflow.com/a/64330480/10757314
I have a HTML5-NetBeans-project (NetBeans IDE 8.2). During drag-and-dropping image files from the project tree to html-document in editor, I get the code like this one:
<img src="photos/window.jpg" alt=""/>
that is, the image parameters width and height are "not picked up".
Is it possible, drag-and-drop image file to html-editor so that to get code like this?
<img src="photos/window.jpg" alt="" width="375" height="500">
I am using certain text in place of an icon or image which I dont want to read out to users using screen readers like JAWS. How can I prevent this? I had tried aria-hidden but it still reads out the content. Is there any effective way ONLY to prevent certain texts on screen from reading out?
There are multiple ways you can do this. If it is just an image, then any of the following will cause the image to disappear to a screen reader user:
<img src="whatever.ext" alt=""/>
<img src="whatever.ext" role="presentation" />
Of course, you can double-up too with this to make it abundantly clear what you mean
<img src="whatever.ext" role="presentation" alt="" />
These should also work in newer browsers that are strictly ARIA compliant but I have not tested them in all browsers
<img src="whatever.ext" aria-label="" />
<img src="whatever.ext" aria-hidden="true" />
<img src="whatever.ext" title="" />
I've had a few shots at creating an image map with various generators.
None have worked.
Here is a fiddle of my code.
<img src="http://www.kidstart.co.uk/resources/Christmas2014/img/PresentTree.png" usemap="#xmastree" width="184" height="871" alt="" />