I am trying to make the featured image clickable with JavaScript:
<div class="post-wrapper">
<section class="post-image">
<img alt="Targ3t Band" class="img-responsive" src="http://i2.wp.com/www.example.com/wp-content/uploads/example.jpg">
<div class="image-shadow"></div>
</section>
<div class="post-container">
<div class="container">
<section class="post-title" style="color:;">
<h2 class="post-heading"><a href=
"http://www.example.com/category/example/">Band –
Targ3t</a></h2>
<ul class="post-info"></ul>
</section>
</div>
</div>
</div>
Does anyone know how to add the <a> to the <img> tag?
Assuming you just mean that the image should link the user to a separate page, here is how you would make that adjustment. All you do is wrap the element in an a tag, like the following:
<div class="post-wrapper">
<section class="post-image">
<a href="http://i2.wp.com/www.djentmag.com/wp-content/uploads/TARG3T-2016-A-e1464397193853.jpg?resize=1400%2C600"><img alt="Targ3t Band" class="img-responsive" src="http://i2.wp.com/www.djentmag.com/wp-content/uploads/TARG3T-2016-A-e1464397193853.jpg?resize=1400%2C600"></a>
<div class="image-shadow"></div>
</section>
<div class="post-container">
<div class="container">
<section class="post-title" style="color:;">
<h2 class="post-heading"><a href=
"http://www.djentmag.com/artist/targ3t/">Band –
Targ3t</a></h2>
<div class="post-sub-title">
<p>Deathcore, Hardcore - Romania</p>
</div>
<ul class="post-info"></ul>
</section>
</div>
</div>
</div>
With Wordpress, there are likely dynamic values that you'll want to add to the img URL. Provide additional information if that's the case, or if this doesn't completely address the question.
You need to add an id attribute to the img tag. (id="image1") in this case. Then you need to create a Javascript function that will be called when you click on the image.
The following code will then run the function starter when the page is loaded and the function clicked when the image is clicked.
<script>
var image;
function clicked() {
alert("Image clicked");
}
function starter() {
image = document.getElementById("image1");
image.onclick = clicked;
}
window.onload = starter;
</script>
As I mentioned above, I found the PHP script that compiles the code and wrapped the image with an <a> tag, that has get_post_permalink(), which did a pretty good job. Used String locator to find the .php file in my theme that compiles those elements.
