wordpress get all images by alt - image

I have many posts with many images therein. I have labelled a colour for each image in the alt field. So every image has a colour.
Now I need to find AND display all images based on that colour. And Id like to still be able to link to it's parent post. So im search all wordpress images based on the alt tag's contents.
This may take some nested loops, im not sure. I doubt there is an elegant way to do this.
Can anyone help me, should look something like this:
<img src="img source" alt="blue" />
<img src="img source" alt="blue" />
<img src="img source" alt="blue" />
<img src="img source" alt="blue" />
<img src="img source" alt="blue" />
<img src="img source" alt="blue" />
I have no other php markup, i don't know where to start


Try this jQuery solution
var imgs = $('img[alt|="blue"]');
alert(imgs.length);
For more on this selector go here.
Try this if you want to use pure JavaScript solution
var imgs = document.getElementsByTagName("img");
var imgsBlue = [];
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].alt == 'blue')
imgsBlue.push(imgs[i]);
}
alert(imgsBlue.toString());

Related

How can I put icons inside image, move the icons only inside the image using my mouse and save their locations inside the image?

for a project, I am trying to provide a user interface where a user can position sensors on a foot and then save the sensors position in the image to display them later :
In doing, so I create 5 images, one per sensor and the image of the foot mapping but I have no idea how to put the sensors icon in the image and then save their position inside the image. I have the following code :
<p>Put on the foot mapping the sensors position</p>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-1.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-2.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-3.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-4.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-5.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/foot.png")}
width="80%"
height="80%"
/>
I tried the inner image with no luck yet and I didn't find other ressources regarding this problem.
Thanks in advance :)

how to make a function when clicked on a image

I made an image into a map with images-map.com
I made some clickable areas, but i cant figure out how to make a function when i click on one of the areas. When I click on the images it will direct me to a website.
<img id="Image-Maps-Com-image-maps-2014-02-12-182158" src=images/map2.png border="0" width="491" height="360" usemap="#image-maps-2014-02-12-182158" alt="" />
<map name="image-maps-2014-02-12-182158" id="ImageMapsCom-image-maps-2014-02-12-182158">
<area shape="rect" coords="489,358,491,360" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area id="cen" shape="poly" coords="242,117,227,117,212,143,232,175,244,173,252,169,264,166,272,161,278,155" alt="Centrum" title="Centrum" target="_self" href="http://www.image-maps.com/" />
</map>
I want to make a function that loads an ID of a highchart that I made when I click on that part of the image.
I tried to replace the href="http://www.image-maps.com/" with an id but it doesnt work

Do you mean JavaScript function? If yes, use JavaScript Framework, for example jQuery. If you use jQuery, here is simple event that will be bind to any img HTML tag.
$("img").click(function(){
alert("The image clicked");
}};

making an image link from a db asp.net mvc 4

I have this foreach loop pulling images from my db :
`#foreach (var item in model)
<tr>
<td>
<img width="50" height="50" src="#Url.Action("GetImage", "Product", new { item.ProductId})"/>
</td>
...`
I tried to wrap it in an 'a' tag but all I get is 404's.
<img width="".../>
Any ideas?

an image with a hyperlink is what I'm trying to achieve. You click the
image and you're taken to the edit page.
Okay so suppose you get the image as shown in your question Product.GetImage and then the edit page is called by Product.Edit, you can have this:
<img src="#Url.Action("GetImage","Product")" />

tinyMCE image output

i'm using TinyMCE for custom insert image, the problem is when i insert image with advimage, example
http://mysite/folder/image.jpg
but the image link when it loads become
<img title="" src="../../image.jpg" alt=" " width="450" height="581" />
how can i get the output to become like
<img title="" src="http://mysite/folder/image.jpg" alt=" " width="450" height="581" />
sorry for my bad english
thank you

Have a look at one of moxiecodes tinymce example pages:
http://www.tinymce.com/tryit/url_conversion.php
I guess this will show you how to configure your tinymce.

tinyMCE.init({
// General options
convert_urls : false,
...

how to write <img> tag when MVC3 thinks .jpg is a property

I need to write
<img src="/view/pano/#img.ImageName/#img.ImageName.jpg"
But the problem is that MVC3 thinks .jpg is a property of ImageName.
How can I tell it that this is just clear text?

#{
var src = string.Format( "/view/pano/{0}/{0}.jpg", img.ImageName );
}
<img src="#src" alt="..." />
or you could move the construction of the string inline, but I find that less readable.
<img src="#string.Format( "/view/pano/{0}/{0}.jpg", img.ImageName )" alt="..." />

Resources