Image Links

I’ll see if I can explain better. So right now, if you go to my “residential” page and hover over any of the images, you will see the image fade, a faded box appear around the image, and a check mark icon in the middle of the image. As of right now, you cannot progress to the page that corresponds to the image, unless you click the check mark. I don’t want a check mark to be the link that goes to the corresponding page. I want the image itself to be the link.

As an example to further clarify, I will use the “PC-Tuneup” laptop image, on the “residential” page
I want users to be able to click the image of the laptop and not have to click on the little check that shows up when users hover over the image. There’s a possibility that some users may not even have a clue that they have to click the check mark icon to go to the corresponding page.

To clarify even further…Just want to make sure we’re on the same page. :)
When I used to code websites, what I am wanting to do, would look something like this in code…

<a href="https://www.some-link.com">
<img src="my-image.jpg" width="242" height="242" border="0">
</a>

So when I click on the image (called “my-image.jpg”) it’s going to take me to a website (https://www.some-link.com) or it could be just another page on my own site if I give it the link pointing to the page I want it to go to instead of the https://www.some-link.com link.

I noticed another perfect reference. As I was reading your reply, I noticed an Enfold banner. I hovered my cursor over the image and instantly it turned into a hand, which tells me that I can click on the image and it will take me somewhere. Even though there is an arrow icon that shows up in the middle of that image, I can still click anywhere on the image to progress to the page it intends to take me to.

Does that help clear it up :)
Thank you

• This reply was modified 7 years, 6 months ago by therealcrazy8.

Sorry for the really late reply, I did just now try this and it doesn’t seem to be working. I added the code above to the top of functions.php

Like this…

<?php
/**
 * Main WordPress API
 *
 * @package WordPress
 */

 // team member link
function ava_custom_script_mod(){
?>
<script>
(function($){
	function a() {
		$('.avia-team-member').on('click', '.team-social', function() {
			var image = $(this).find('.team-social'),
				link  = $(this).find('.avia-team-icon').attr('href');

			window.location.href = link;
		});
	}

	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');
 
require( ABSPATH . WPINC . '/option.php' );

I am showing more of the code that’s at the top of functions.php just for reference on exactly where I pasted it in the script.

I also posted the css code in what I am assuming is the Quick CSS. Where can I find the Quick CSS in the theme? I did some quick searching and found reference to the file being located here… http://yourdomain.com/wp-content/uploads/dynamic_avia/enfold.css so I just FTPed to that file, made the change and uploaded it back to the server. No luck. It still behaves the same way. Any ideas?

Thank you for your help Victoria, I’m sure I am doing something wrong then. :)

I have been making some changes to the website, just to try something different, but everything is still there in regards to this issue. I’ll be sure not to mess with any of that.

• This reply was modified 7 years, 5 months ago by therealcrazy8.

Thank you very much Victoria,

I think I got the hang of creating a child theme using the Child Theme Configurator add-in. Am I wanting to still use Enfold as the child theme as well, or does it not matter?

I have installed the Child Theme Configurator add-in for wordpress, created the child theme “enfold-child” and made the requested changes. To make the changes, I went to Tools>Child Themes>Files tab>Function.php link and below is the current state of the “Enfold Child: Theme Functions (functions.php)”

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:

// team member link
function ava_custom_script_mod(){
?>
<script>
(function($){
	function a() {
		$('.avia-team-member').on('click', '.team-social', function() {
			var image = $(this).find('.team-social'),
				link  = $(this).find('.avia-team-icon').attr('href');

			window.location.href = link;
		});
	}

	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');

// END ENQUEUE PARENT ACTION

I also clicked on the “Stylesheet (style.css)”

/*
Theme Name: Enfold Child
Theme URI: http://kriesi.at/themes/enfold/
Template: enfold
Author: Kriesi
Author URI: http://kriesi.at
Description: A superflexible and responsive Business Theme by Kriesi - Update notifications available on twitter, facebook and via newsletter: Follow me on twitter - Join the Facebook Group - Subscribe to our Newsletter
Version: 4.0.7.1497921160
Updated: 2017-06-20 01:12:40

*/

.team-social {
   cursor: pointer;
}