In Canada, we have a new law that you must have ALT tags for images but when my page loads, the fotorama plug-in seems to remove them from the code. Is there a workaround or something that I can do?
I have been in a same situation like you are now.
Fotorama seems to discard and totally remove alt and title tags as not necessary in its purposes.
You need to raise a bug in its bug tracking system so that in its future releases it may include this tag particularly and all the other HTML standard tags that blindfully it discards.
In order to show the Alt and Title in image use the image with in DIV.
Use :
<div><img src="http://www.example.com/image.png" alt="My Alt" title="My Title"/></div>
Instead of :
<img src="http://www.example.com/image.png" alt="My Alt" title="My Title"/>
Just want to let you(other) know. Issue with stripping "Alt", "Title" attributes have been fixed (I really like this dll, and this issue used to freak me out), I asked owner to pull fix.
Related
Currently, i'm buiding my rich text editor with quill and i need to create an embed for images. Before quill, i used to use redactor and i try to move to redactor. But, i already have 2 version of data from redactor before where the users is already uploaded images.
Version 1:
<p>
<img src="http://lorempixel.com/400/200/" data-image="5bb71bdc65465e0675ba" class="img-fluid img-responsive">
</p>
Version 2:
<figure>
<img src="http://lorempixel.com/400/200/" data-image="1bdc65465e0675ba1b2b" class="img-fluid img-responsive">
</figure>
Expected behavior:
I expect to replace the p with figure on initial parsing in quill. So, all the images have same parent figure
Actual behavior
figure is always deleted by default
I tried to register figure with blots/block/embed but i can't check and add the figure if the image doesn't have figure on its parent
Thank you
I have a lot of images that unfortunately have spaces in their URL's. These are submitted through user input in another system and saved to a database.
I'm having a problem with angular's management of image sources. It doesn't seem to like spaces or "%20" in the ng-src or src attributes.
This
<img ng-src="{{smallImg}}" alt="" />
Will output this
<img ng-src="" alt="" />
While this
HERE
will output this
HERE
Is there a way to do this without having to go back and rename all these folders?
I got the answer, it is working for me.
You can get this like:-
$scope.smallImg = "http://example.com/path to my/image with/spaces.jpg";
when you bind this do like
<img ng-src="{{smallImg .replace(' ','')}}" alt="" >
I haven't been able to make <img> src empty when using %20, but perhaps you're using an older version of Angular.
$scope.smallImg = "http://www.google.com/my images here/pic.jpg".replace(/ /g, "%20");
...
<img ng-src="{{smallImg}}" alt="Pic goes here" />
Here's a working demo: https://plnkr.co/edit/hTFw8rAg0CRxDGjROjjp
(tried to find an image on the web that had a space in the name, but no luck)
Well, as it turns out it was a secondary plugin, magic360 that was interfering with the image source
I have some fotorama pictures and I want to get a link to an specific one. For example I'd like to go to the third image of the carousel with a link and not only to the first one. I guess I should use the .activeIndex but I don't know how to do it.
Thanks in advance!
This is covered in the fotorama documentation.
Just add the attribute data-hash="true" to the enclosing fotorama div element:
<div class="fotorama" data-hash="true">
<img src="1.jpg" id="photo_1">
<img src="2.jpg" id="photo_2">
<img src="3.jpg" id="photo_3">
... etc ...
</div>
and then link to them using the id attribute as a URL fragment identifier, e.g.:
http://example.com/my_gallery.html#photo_1
http://example.com/my_gallery.html#photo_2
http://example.com/my_gallery.html#photo_3
There are some examples you can play with here: http://fotorama.io/customize/hash/
I'm using AngularJS to fill in a data-src attribute in an img tag:
<img src="/img/lazyload.gif" data-src="{{product.image}}" alt="{{product.alt}}" class="ng-lazy-load">
In firefox this results in:
<img src="{{product.image}}" data-src="{{product.image}}" alt="the correct Alt tag" class="ng-lazy-load">
In Chrome and IE this works as expected:
<img src="/img/image.png" data-src="/img/image.png" alt="the correct Alt tag" class="ng-lazy-load">
So in Firefox, the alt attribute is filled in correctly by AngularJS but the data-src attribute isn't. I tried changing the data-src to data-source and then the result is as expected, but the lazy load library we use JQuery Unveil does not support renaming attributes.
Does anyone have suggestion how to work around this issue?
Note to self: Make a bug report to AngularJS.
Kind Regards
I have a click button. I am trying with angularjs. The page anchors at the top of the page, when I click it. How do I to stay at the same place in the browser when I click it?
<a href="#" ng-click="myFunction()">
{{_actions.refresh}}
</a>
There is a similar question here. But with jQuery solution described there. I would like to find a solution with angularjs.
<a ng-click="myFunction()">
{{_actions.refresh}}
</a>
Just remove href completely.
So, the "right" way to do it would be something like this:
<a name="myFunction"></a>
<a href="#myFunction" ng-click="myFunction()">
{{_actions.refresh}}
</a>
That way you could have some extra functionality in terms of someone sending that link, or someone visiting the page without JavaScript (have you thought about that experience yet?).
I obviously don't know your applications, but putting a name tag in there might be a helpful thing on several levels.