Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #797783

    I have a page on my site (http://guardiantechsolutions.com/residential/) that has a bunch of images, used to illustrate the service topic that they are assigned to. Right now, the only way that I can figure to use the images as a link is with a small check mark icon that sits in the middle of the image and then you have to click on the check mark. As soon as you hover onto the image, there is a box that shows up as well. I want the image itself to act as the link. I find it inconvenient and probably confusing to users/clients that go to the site and arent aware that they need to click on the small check mark icon. How can I assign a link to the image itself? I would like to have a hover affect as well if possible, whether that be a box popping up around the image, or some other affect letting the user know that they can/should click on the image.

    Thank you

    #798067

    Hey therealcrazy8,

    I see that you have used the Team Member element for that, I’m thinking it might be easier if you use the Blog Posts element for that instead since what you are linking to seems to be posts? If that is not the case then please try to explain a bit further how you have achieved your layout or post admin login details in private so that we can have a look at the backend.

    Best regards,
    Rikard

    #798094

    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 6 years, 10 months ago by therealcrazy8.
    #799408

    Hi,

    Thank you for using Enfold.

    Please add this code in the functions.php file:

    // 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');

    And the following code in the Quick CSS field:

    .team-social {
       cursor: pointer;
    }

    Best regards,
    Ismael

    #806333

    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?

    #807388

    Hi therealcrazy8,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    The code Ismael gave you works, when pasted in console.
    You could also try like this

    
     // team member link
    function ava_custom_script_mod(){
    ?>
    
    <script>
    jQuery(window).load(function(){
    	jQuery('.avia-team-member').on('click', '.team-social', function() {
    		var image = jQuery(this).find('.team-social'),
    			link  = jQuery(this).find('.avia-team-icon').attr('href');
    
    		window.location.href = link;
    	});
    });
    </script>
    
    <?php
    }
    add_action('wp_footer', 'ava_custom_script_mod');
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    • This reply was modified 6 years, 9 months ago by Victoria.
    #807727

    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 6 years, 9 months ago by therealcrazy8.
    #808520

    Hi therealcrazy8,

    I suggest you add a child theme.

    And put the code from above to your child theme functions.php.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #810101

    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?

    #810177

    Hi,

    Using the Child theme youll avoid many problems and you wont lost anything that you edit in the theme`s core.

    Best regards,
    John Torvik

    #810605

    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;
    }
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.