I'm kind of newbie with CSS and HTML5, I'm using Bootstrap Carousel as my template for the site I'm building and I'm having issues with the 500 x 500 picture, I don't really know how to replace it, it seems like its JavaScript or something, i was wonder if someone can light my way here..
This is the template: http://getbootstrap.com/examples/carousel/
Below is the image of the picture I'm trying to replace.
http://i.stack.imgur.com/9AoxZ.png
The following snippet contains the image:
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="500x500" src="data:image/svg+xml" data-holder-rendered="true">
You should change the src value to where your image is, not the data-src. The data-src attribute is used to include invisible data in an element. You can read more about it here.
please try
<img class="featurette-image img-responsive" ng-src="your-image-path.png" alt="Generic placeholder image">
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.
So, I have two images on a html page in my ionic project, and I want the second image to show up when the first one is clicked.
Therefore i added a onClick to my image like:
<img src="path"
alt="foo"
style="foo;
width:foo;
left:30%;top:30%"
class = "foo"
onclick="ng-model='bar'" >
And the second image
<img src="path"
*ngIf="bar">
But it is not working that way. Is it the wrong way? I tried it that way to avoid additional javascript.
You can accomplish this as follows:
<img src="http://via.placeholder.com/350x150/222222" (click)="hiddenImage.style.display='inline'"/>
<img #hiddenImage style="display: none" src="http://via.placeholder.com/350x150/888888"/>
But it may still be a better idea to do it differently depending on what your exact use case is.
Using *ngIf you would probably still need a variable that holds the value of whether the image should be shown or not in your template:
<img src="http://via.placeholder.com/350x150/222222" (click)="showImage=true"/>
<img src="http://via.placeholder.com/350x150/888888" *ngIf="showImage"/>
In your Component you should declare:
showImage: boolean = false;
<img src="#" alt="Sorry the image could not be displayed.">
In the above code I want display an image in alt instead of text.In this way I want to display my site logo as image if it is unable to connect to internet.
Update:I am developing android application using Phonegap.
As stated in the comments - If your user doesn't have an internet connection, there's no way they can load a new image. However, if it's of any use to you and you wanted to load in placeholders for whatever reason.
You could do something like this with jQuery
I've set up a basic fiddle for you which is easy enough to understand.
Image With # Src
<img src="#" alt="no image" />
Variables to find # Src and to replace with placeholder
var noSrc = '#';
var noImg = 'http://placehold.it/400x500';
$('img[src="' + noSrc + '"]').attr('src', noImg);
Just change the path of the noImg variable to whatever your image path will be.
Working Example: Fiddle
<img src="#" alt="no image" />
$('img[src="#"]').attr('src', 'http://placehold.it/400x500');
Example without Variables: Fiddle 2
I've started using Bootstrap for a project, and in particular, the Thumbnails component. On the thumbnails example on the documentation, the following sample code is shown:
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img data-src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>
Notice the use of data-src to replace the usual src attribute on the <img> tag.
I assumed that to get my thumbnails working, I should use data-src instead of src for the images, but that does not seem to be the case. I've only been able to load images by defining the src attribute. It seems others are having the same problem.
Is this a typo in the documentation, or did I not understand correctly how to use data-src?
I believe that the only reason of why bootstrap guys are using data-src instead src, it's because of holder.js. You should use src instead of data-src because data-src is only used for the javascript library that generates the example images of a certain size, and src is the normal attribute for specifying the location of an image (Source: W3C)
Why are they using in the documentation data-src? I suppose that even the syntax <img src="holder.js/100x200"></img> is accepted by the library as it is in the holder.js documentation, when we access to the page it throws a 404 error in the image even when the image is displaying, because there is not any file in the specified path, what it's weird.
Why do they put that in the documentation code? I really don't know. Probably it's a mistake. But I am sure that you should use src instead data-src in thumbnails.
How to use it
Include holder.js in your HTML:
<script src="holder.js"></script>
Holder will then process all images with a specific src attribute, like this one:
<img src="holder.js/200x300">
The above tag will render as a placeholder 200 pixels wide and 300 pixels tall.
To avoid console 404 errors, you can use data-src instead of src.
Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: sky, vine, lava, gray, industrial, and social. You can use them like this:
<img src="holder.js/200x300/industrial">
Bootstrap uses Holder for thumbnails in its documentation.
It's pretty well explained on the Holder github page.
Include holder.js in your HTML. Holder will then process all images with a specific src attribute... The tag will render as a placeholder. To avoid console 404 errors, you can use data-src instead of src.
In order for me to get this to work, I had to call the run() function in holder.
I am using require to load backbone views, inside my view I include holder
var Holder = require('holderjs');
Then inside render I can run
Holder.run();
And in my template I have
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/200x200/text:hello world">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
Hope that helps.
I couldn't figure it out either, as far as I understand it holder.js is actually a completely separate js file to act as an img placeholder from http://imsky.github.io/holder/
data-src is used to pass to the javascript, the /100x200 is the dimension of the picture you want the javascript 'holder.js' to take up for the real img.
I think the idea is to prototype using this (data-src="holder.js/300x200") and then replace it with sized pictures (src="Logo.png") afterwards.
For future Googlers looking for how to use with NPM/build jobs this worked in my case:
window.Holder = require('holderjs').default;
I have this piece of code:
<ice:panelGroup menuPopup="menuPopup1" onclick="fireContextMenu(this, event);">
<img src="/resources/images/external/bg-suppliers.gif"> </img>
</ice:panelGroup>
it renders this HTML as output (as expected):
<div class="icePnlGrp" id="j_id62" onclick="fireContextMenu(this, event);">
<img src="/resources/images/external/bg-suppliers.gif">
</div>
If i simply add a menuPopup attribute to the ice:panelGroup like:
<ice:panelGroup menuPopup="menuPopup1" onclick="fireContextMenu(this, event);">
<img src="/resources/images/external/bg-suppliers.gif"> </img>
</ice:panelGroup>
it simply CLOSES the divs before img tag:
<div class="icePnlGrp" id="j_id62" onclick="fireContextMenu(this, event);"></div>
<img src="/resources/images/external/bg-suppliers.gif">
which is really strange...
Do you guys have a work-around? It's probably a bug from icefaces but I cannot find anything related to this on their site...
Thanks.
Solution found.
Working with different templates I had two ice:forms in the final page and two body as well, and my panelGroup from one form referenced the menuPopup from the other form which gave the above issue.