How to add multiple image custom fields or display icons instead of text taxonomies

Hi,

I am trying to find a solution to display a list of icons to replace a list of taxonomy terms I am displaying in two locations.

Currently I have a custom taxonomy that is displaying taxonomy terms "Amenities" which is added when a custom post type is created.

These currently display the text term (as per conventional displays) - however, i want to display different icons in place of these terms.

On this example the terms are: Monuments, Paid Attractions, Parking - http://handheld.simplecsr.com/walk/water-walk-sample/

I am considering how to do this and have two options (first is preferred):

1. Use some CSS to replace each of the taxonomy terms with an image (no idea how yet - CAN YOU HELP!)

2. Instead of displaying a taxonomy I could add a custom image field to the post type for each term (but I would want this to allow the admin to select images to add to the post from a pre-determined list of images. This could then be displayed on the post page.)

Can you advice if it is possible to achieve either - or suggest an alternative solution to display a list of relevant icons on a post type and in search results.

Thanks
Chris

  • Ash

    Hello @chris

    I hope you are well today and thanks for asking the question.

    Yes, I think this is possible but you need to little bit tricky. Let me explain.

    You need to have the icons in your theme folder already and get the icon links. Then you need to create an object/array in javascript where index keys will be the taxonomy name. But the format should be all lower case and spaces should be replaced with underscores. For example, if your tax name is Paid Attractions then the key should be paid_attractions. And the corresponding value will be the source path of the icons.

    Here is an example, that you need to use in your theme's footer.php after wp_footer()

    <script type="text/javascript">
    jQuery(function($) {
       var img = {
           'monuments' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'paid_attractions' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'parking' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif'
        } 
    
        $('.walk_amenities').html($('.walk_amenities').html().replace(',', ' '));
    
        $('.walk_amenities a').each(function() {
            var text = $(this).text();
            text = text.toLowerCase();
            text = text.replace(' ', '_');
            $(this).html('<img src="'+img[text]+'">');
        });
    
    });
    </script>

    Please let us know if that works.

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

  • chris

    Hi Ash,

    This is a great piece of code. I tried to respond last night (UK) but it seems the message didn't post.... (i am just beginning to update the icons for all terms)

    I had a few extra questions i wonder if you can help with:

    1. Is it possible to add a class to the images so i can have more control over how they display. I only need to apply one class to all the amenity images.

    2. Is there a way to display the alt and/or title tag for each image in the amenity list to keep it accessible.

    3. Could the same function be applied to another location where the amenity list is showing. There is an example at the bottom of http://handheld.simplecsr.com/waterway-walks/?gmw_address%5B0%5D&tax_route_type=7&gmw_distance=100&gmw_units=imperial&gmw_form=2&gmw_per_page=5&gmw_lat&gmw_lng&gmw_px=pt&action=gmw_post ...but this is used all around the site.

    This list of amenity terms here are not active links and are imported through a shortcode (from geomywp) and styled via css.

    I would rather these remain inactive links in these types of results.

    Many thanks again for the effective code.

    Best wishes
    Chris

  • Ash

    For #1 and #2, try the following:

    <script type="text/javascript">
    jQuery(function($) {
       var img = {
           'monuments' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'paid_attractions' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'parking' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif'
        }
        if($('.walk_amenities').length) {
        $('.walk_amenities').html($('.walk_amenities').html().replace(',', ' '));
    
        $('.walk_amenities a').each(function() {
            var text = $(this).text();
            text1 = text.toLowerCase();
            text1 = text.replace(' ', '_');
            $(this).html('<img class="custom_icon" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
        });
        }
    
    });
    </script>

    For #3:
    Try this:

    jQuery(function($) {
       var img = {
           'free_attractions' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'historic_interests' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'toilets' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
            'urban' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif'
        }
    
        if($('.gmw-amenities-terms').length) {
        $('.gmw-amenities-terms').each(function() {
            var text = $(this).text(),
                text1 = text.split(',');alert(text);
                for(var i = 0; i < text1.length; i++) {
                    var data = text1[i].toLowerCase().replace(' ', '_');;
                    text = text.replace(text1[i], '<img class="custom_icon" src="'+img[data]+'" alt="'+text+'" title="'+text+'">');
                }
                $(this).html(text);
        });
        }
    });

    Let me know if it works.

    Cheers
    Ash

  • chris

    Hi Ash,

    I have tried out the fix for #1,2 - but the image src is showing as undefined <img class="custom_icon" src="undefined" alt="Paid Attractions" title="Paid Attractions"> See http://handheld.simplecsr.com/walk/water-walk-sample/

    I have left the code in place:

    <script type="text/javascript">
    jQuery(function($) {
    var img = {
    'monuments' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
    'paid_attractions' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
    'parking' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif'
    }
    if($('.walk_amenities').length) {
    $('.walk_amenities').html($('.walk_amenities').html().replace(',', ' '));

    $('.walk_amenities a').each(function() {
    var text = $(this).text();
    text1 = text.toLowerCase();
    text1 = text.replace(' ', '_');
    $(this).html('<img class="custom_icon" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
    });
    }

    });
    </script>

    Any ideas?

    Many thanks
    Chris

  • chris

    Hi Ash,

    I have put in the original working code only. I have added the image urls. This displays well but i would like to get the image class, alt and title text working.

    The list still displays the commas. Is it possible to hide these. See http://handheld.simplecsr.com/walk/water-walk-sample/

    Please see my message above about the problems with the image class, alt/title code.

    The code I am currently using is:

    `<script type="text/javascript">
    jQuery(function($) {
    var img = {
    'toilets' : '/wp-content/uploads/2014/06/toilets1.png',
    'parking' : '/wp-content/uploads/2014/06/parking1.png',
    'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed.png',
    'village' : '/wp-content/uploads/2014/06/village.png',
    'town' : '/wp-content/uploads/2014/06/town.png',
    'city' : '/wp-content/uploads/2014/06/city.png',
    'tearooms' : '/wp-content/uploads/2014/06/tearooms.png',
    'pubs' : '/wp-content/uploads/2014/06/pubs.png',
    'monuments' : '/wp-content/uploads/2014/06/monuments1.png',
    'historic_houses' : '/wp-content/uploads/2014/06/historic-houses.png',
    'paid_attractions' : '/wp-content/uploads/2014/06/paid.png',
    'free_attractions' : '/wp-content/uploads/2014/06/free.png',
    }

    $('.walk_amenities').html($('.walk_amenities').html().replace(',', ' '));

    $('.walk_amenities a').each(function() {
    var text = $(this).text();
    text = text.toLowerCase();
    text = text.replace(' ', '_');
    $(this).html('<img src="'+img[text]+'">');
    });

    });
    </script>

    Many thanks
    Chris

  • Ash

    To use alt and title, you can try this code:

    <script type="text/javascript">
    jQuery(function($) {
       var img = {
           'monuments' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'paid_attractions' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'parking' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif'
        }
        if($('.walk_amenities').length) {
        $('.walk_amenities').html($('.walk_amenities').html().replace(',', ' '));
    
        $('.walk_amenities a').each(function() {
            var text = $(this).text();
            text1 = text.toLowerCase();
            text1 = text.replace(' ', '_');
            $(this).html('<img class="custom_icon" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
        });
        }
    
    });
    </script>

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

  • Ash

    Yes, I can see this. Please try this instead:

    <script type="text/javascript">
    jQuery(function($) {
       var img = {
           'monuments' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'paid_attractions' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'parking' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif'
        }
        if($('.walk_amenities').length) {
        $('.walk_amenities').html($('.walk_amenities').html().replace(',', ' '));
    
        $('.walk_amenities a').each(function() {
            var text = $(this).text();
            var text1 = text.toLowerCase();
            text1 = text1.replace(' ', '_');
            $(this).html('<img class="custom_icon" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
        });
        }
    
    });
    </script>

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

  • Ash

    Try this:

    jQuery(function($) {
       var img = {
           'monuments' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'paid_attractions' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'parking' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif'
        }
    
        //All hover images
        var imgHover = {
           'monuments' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'paid_attractions' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif',
           'parking' : 'http://handheld.simplecsr.com/wp-content/uploads/2014/06/app-store.gif'
        }
    
        if($('.walk_amenities').length) {
            $('.walk_amenities').html($('.walk_amenities').html().replace(',', ' '));
    
            $('.walk_amenities a').each(function() {
                var text = $(this).text();
                var text1 = text.toLowerCase();
                text1 = text1.replace(' ', '_');
                $(this).html('<img class="custom_icon" id="text1" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
            });
        }
    
        $(document).on('.custom_icon', 'mouseover', function() {
            var id = $(this).attr('id');
            $(this).attr('src', imgHover[id + 'Hover']);
        });
    
        $(document).on('.custom_icon', 'mouseleave', function() {
            var id = $(this).attr('id');
            $(this).attr('src', imgHover[id]);
        });
    
    });

    Let me know if it works.

    Cheers
    Ash

  • chris

    HI Ash,

    I tried this code with the following images but its not creating a hover effect. (I havent touched the CSS yet.)

    <script type="text/javascript">
    jQuery(function($) {
    var img = {
    'toilets' : '/wp-content/uploads/2014/06/toilets.png',
    'parking' : '/wp-content/uploads/2014/06/parking.png',
    'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed.png',
    'village' : '/wp-content/uploads/2014/06/village.png',
    'town' : '/wp-content/uploads/2014/06/town.png',
    'city' : '/wp-content/uploads/2014/06/city.png',
    'tearooms' : '/wp-content/uploads/2014/06/tearoom.png',
    'pubs' : '/wp-content/uploads/2014/06/pub.png',
    'monuments' : '/wp-content/uploads/2014/06/monuments.png',
    'historic_houses' : '/wp-content/uploads/2014/06/historic-houses.png',
    'paid_attractions' : '/wp-content/uploads/2014/06/pay-for.png',
    'free_attractions' : '/wp-content/uploads/2014/06/free-attraction.png',
    }

    //All hover images
    var imgHover = {
    'toilets' : '/wp-content/uploads/2014/06/toilets-red.png',
    'parking' : '/wp-content/uploads/2014/06/parking-red.png',
    'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed-red.png',
    'village' : '/wp-content/uploads/2014/06/village-red.png',
    'town' : '/wp-content/uploads/2014/06/town-red.png',
    'city' : '/wp-content/uploads/2014/06/city-red.png',
    'tearooms' : '/wp-content/uploads/2014/06/tearoom-red.png',
    'pubs' : '/wp-content/uploads/2014/06/pub-red.png',
    'monuments' : '/wp-content/uploads/2014/06/monuments-red.png',
    'historic_houses' : '/wp-content/uploads/2014/06/historic-houses-red.png',
    'paid_attractions' : '/wp-content/uploads/2014/06/pay-for-red.png',
    'free_attractions' : '/wp-content/uploads/2014/06/free-attraction-red.png',
    }

    if($('.walk_amenities').length) {
    $('.walk_amenities').html($('.walk_amenities').html().replace(',', ' '));

    $('.walk_amenities a').each(function() {
    var text = $(this).text();
    var text1 = text.toLowerCase();
    text1 = text1.replace(' ', '_');
    $(this).html('<img class="custom_icon" id="text1" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
    });
    }

    $(document).on('.custom_icon', 'mouseover', function() {
    var id = $(this).attr('id');
    $(this).attr('src', imgHover[id + 'Hover']);
    });

    $(document).on('.custom_icon', 'mouseleave', function() {
    var id = $(this).attr('id');
    $(this).attr('src', imgHover[id]);
    });

    });
    </script>

    See Evample: http://handheld.simplecsr.com/walk/water-walk-sample/

    Any ideas?

    Thanks
    Chris

  • Ash

    Would you please send me your ftp so that I can try?

    To send me details, please use our contact form: https://premium.wpmudev.org/contact/

    Select: I have a different question
    Subject: Attn-Ash
    Details: Send all required details (ftp details) with a link of this thread, so that I can track.
    Also post a note here once you send the info.

    I will be happy to take a look :slight_smile:

    Cheers
    Ash

  • chris

    Hi Ash,

    It is currently on a development server with lots of other sites.

    I have messaged with admin access and I have opened the Dashboard support staff access.

    The footer file is copied in the actiive child theme.

    If you do require ftp I can grant it but it will be in the morning (UK time)

    Many thanks for looking into this. I am intending to use this on a series of custompress sites so it would be great to get right.

    Thanks
    Chris

  • Ash

    Hi @chris

    Please check now. Final code:

    <script type="text/javascript">
    
    jQuery(function($) {
       var img = {
           'toilets' : '/wp-content/uploads/2014/06/toilets.png',
           'parking' : '/wp-content/uploads/2014/06/parking.png',
           'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed.png',
           'village' : '/wp-content/uploads/2014/06/village.png',
           'town' : '/wp-content/uploads/2014/06/town.png',
           'city' : '/wp-content/uploads/2014/06/city.png',
           'tearooms' : '/wp-content/uploads/2014/06/tearoom.png',
           'pubs' : '/wp-content/uploads/2014/06/pub.png',
           'monuments' : '/wp-content/uploads/2014/06/monuments.png',
           'historic_houses' : '/wp-content/uploads/2014/06/historic-houses.png',
           'paid_attractions' : '/wp-content/uploads/2014/06/pay-for.png',
           'free_attractions' : '/wp-content/uploads/2014/06/free-attraction.png',
        }
    
        //All hover images
        var imgHover = {
           'toilets' : '/wp-content/uploads/2014/06/toilets-red.png',
           'parking' : '/wp-content/uploads/2014/06/parking-red.png',
           'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed-red.png',
           'village' : '/wp-content/uploads/2014/06/village-red.png',
           'town' : '/wp-content/uploads/2014/06/town-red.png',
           'city' : '/wp-content/uploads/2014/06/city-red.png',
           'tearooms' : '/wp-content/uploads/2014/06/tearoom-red.png',
           'pubs' : '/wp-content/uploads/2014/06/pub-red.png',
           'monuments' : '/wp-content/uploads/2014/06/monuments-red.png',
           'historic_houses' : '/wp-content/uploads/2014/06/historic-houses-red.png',
           'paid_attractions' : '/wp-content/uploads/2014/06/pay-for-red.png',
           'free_attractions' : '/wp-content/uploads/2014/06/free-attraction-red.png',
        }
    
        if($('.walk_amenities').length) {
            $('.walk_amenities').html($('.walk_amenities').html().replace(',', ' '));
    
            $('.walk_amenities a').each(function() {
                var text = $(this).text();
                var text1 = text.toLowerCase();
                text1 = text1.replace(' ', '_');
                $(this).html('<img class="custom_icon" id="'+text1+'" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
            });
        }
    
        $(document).on('mouseover', '.custom_icon', function() {
            var id = $(this).attr('id');
            $(this).attr('src', imgHover[id]);
        });
    
        $(document).on('mouseleave', '.custom_icon', function() {
            var id = $(this).attr('id');
            $(this).attr('src', img[id]);
        });
    
    });
    </script>

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

  • Ash

    Please check now. Updated code:

    <script type="text/javascript">
    
    jQuery(function($) {
       var img = {
           'toilets' : '/wp-content/uploads/2014/06/toilets.png',
           'parking' : '/wp-content/uploads/2014/06/parking2.png',
           'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed1.png',
           'village' : '/wp-content/uploads/2014/06/village1.png',
           'town' : '/wp-content/uploads/2014/06/town.png',
           'city' : '/wp-content/uploads/2014/06/city1.png',
           'tearooms' : '/wp-content/uploads/2014/06/tearoom.png',
           'pubs' : '/wp-content/uploads/2014/06/pub.png',
           'monuments' : '/wp-content/uploads/2014/06/monuments.png',
           'historic_houses' : '/wp-content/uploads/2014/06/historic-houses1.png',
           'paid_attractions' : '/wp-content/uploads/2014/06/pay-for.png',
           'free_attractions' : '/wp-content/uploads/2014/06/free-attraction.png',
        }
    
        //All hover images
        var imgHover = {
           'toilets' : '/wp-content/uploads/2014/06/toilets-red.png',
           'parking' : '/wp-content/uploads/2014/06/parking-red.png',
           'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed-red.png',
           'village' : '/wp-content/uploads/2014/06/village-red.png',
           'town' : '/wp-content/uploads/2014/06/town-red.png',
           'city' : '/wp-content/uploads/2014/06/city-red.png',
           'tearooms' : '/wp-content/uploads/2014/06/tearoom-red.png',
           'pubs' : '/wp-content/uploads/2014/06/pub-red.png',
           'monuments' : '/wp-content/uploads/2014/06/monuments-red.png',
           'historic_houses' : '/wp-content/uploads/2014/06/historic-houses-red.png',
           'paid_attractions' : '/wp-content/uploads/2014/06/pay-for-red.png',
           'free_attractions' : '/wp-content/uploads/2014/06/free-attraction-red.png',
        }
    
        if($('.walk_amenities').length) {
    
    	$('.walk_amenities').html($('.walk_amenities').html().replace(/,/g, ' '));
    
            $('.walk_amenities a').each(function() {
                var text = $(this).text();
                var text1 = text.toLowerCase();
                text1 = text1.replace(' ', '_');
                $(this).html('<img class="custom_icon" id="'+text1+'" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
            });
        }
    
        $(document).on('mouseover', '.custom_icon', function() {
            var id = $(this).attr('id');
            $(this).attr('src', imgHover[id]);
        });
    
        $(document).on('mouseleave', '.custom_icon', function() {
            var id = $(this).attr('id');
            $(this).attr('src', img[id]);
        });
    
    });
    </script>

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

  • chris

    Hi Ash,

    Thanks. Nearly done with this is has been incredibly useful to see how you resolved this.

    Checking through the original ticket at the start I was also trying to apply the display of icons to the amenity list on another location on the site. The original code did not work but i wonder if this working code can be adapted.

    The main difference is that these amenity terms are not active links on these lists. They are just there for information. They are imported through a shortcode (from geomywp) and styled via css.

    You can see an example on the following page:

    http://handheld.simplecsr.com/countryside-walks/?gmw_address%5B0%5D&tax_route_type=7&gmw_distance=100&gmw_units=imperial&gmw_form=2&gmw_per_page=5&gmw_lat&gmw_lng&gmw_px=pt&action=gmw_post

    Is it possible to adapt this code to work. ( this refers to the gmw-amenities-terms)

    Many thanks again.
    Chris

  • Ash

    Please check now. Final code so far:

    <script type="text/javascript">
    
    jQuery(function($) {
       var img = {
           'toilets' : '/wp-content/uploads/2014/06/toilets.png',
           'parking' : '/wp-content/uploads/2014/06/parking2.png',
           'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed1.png',
           'village' : '/wp-content/uploads/2014/06/village1.png',
           'town' : '/wp-content/uploads/2014/06/town.png',
           'city' : '/wp-content/uploads/2014/06/city1.png',
           'tearooms' : '/wp-content/uploads/2014/06/tearoom.png',
           'pubs' : '/wp-content/uploads/2014/06/pub.png',
           'monuments' : '/wp-content/uploads/2014/06/monuments.png',
           'historic_houses' : '/wp-content/uploads/2014/06/historic-houses1.png',
           'paid_attractions' : '/wp-content/uploads/2014/06/pay-for.png',
           'free_attractions' : '/wp-content/uploads/2014/06/free-attraction.png',
        }
    
        //All hover images
        var imgHover = {
           'toilets' : '/wp-content/uploads/2014/06/toilets-red.png',
           'parking' : '/wp-content/uploads/2014/06/parking-red.png',
           'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed-red.png',
           'village' : '/wp-content/uploads/2014/06/village-red.png',
           'town' : '/wp-content/uploads/2014/06/town-red.png',
           'city' : '/wp-content/uploads/2014/06/city-red.png',
           'tearooms' : '/wp-content/uploads/2014/06/tearoom-red.png',
           'pubs' : '/wp-content/uploads/2014/06/pub-red.png',
           'monuments' : '/wp-content/uploads/2014/06/monuments-red.png',
           'historic_houses' : '/wp-content/uploads/2014/06/historic-houses-red.png',
           'paid_attractions' : '/wp-content/uploads/2014/06/pay-for-red.png',
           'free_attractions' : '/wp-content/uploads/2014/06/free-attraction-red.png',
        }
    
        if($('.walk_amenities').length) {
    
    	$('.walk_amenities').html($('.walk_amenities').html().replace(/,/g, ' '));
    
            $('.walk_amenities a').each(function() {
                var text = $(this).text();
                var text1 = text.toLowerCase();
                text1 = text1.replace(' ', '_');
                $(this).html('<img class="custom_icon" id="'+text1+'" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
            });
        }
    
        if($('.gmw-amenities-terms').length) {
    	$('.gmw-amenities-terms').each(function() {
    		var html = '';
    		var data = $(this).text();
    		var res = data.split(",");
    		$(this).html($(this).html().replace(/,/g, ' '));
    		for(var i = 0; i < res.length; i++){
    			var text = res[i].trim();
    			var text1 = text.toLowerCase();
    			text1 = text1.replace(' ', '_');
    			html += text1.replace(text1, '<img class="custom_icon" id="'+text1+'" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
    		}
    		$(this).html(html);
    	})
        }
    
        $(document).on('mouseover', '.custom_icon', function() {
            var id = $(this).attr('id');
            $(this).attr('src', imgHover[id]);
        });
    
        $(document).on('mouseleave', '.custom_icon', function() {
            var id = $(this).attr('id');
            $(this).attr('src', img[id]);
        });
    
    });
    </script>

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

  • chris

    HI Ash,

    One more small issue I am trying to sort with the custom amenity terms.

    It only applies to the .gmw-amenities-terms ......

    On the lists of results these are not active links (as intended) however they still display the hover image. Is it simple to edit the code to remove the hover function (which is displaying the red icon). This only applies to the .gmw-amenities-terms.

    For example. See the icons on:

    http://handheld.simplecsr.com/countryside-walks/?gmw_address%5B0%5D&tax_route_type=7&gmw_distance=100&gmw_units=imperial&gmw_form=2&gmw_per_page=5&gmw_lat&gmw_lng&gmw_px=pt&action=gmw_post

    Many thanks
    Chris

  • Ash

    Please try the following code:

    <script type="text/javascript">
    
    jQuery(function($) {
       var _link = false;
       var img = {
           'toilets' : '/wp-content/uploads/2014/06/toilets.png',
           'parking' : '/wp-content/uploads/2014/06/parking2.png',
           'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed1.png',
           'village' : '/wp-content/uploads/2014/06/village1.png',
           'town' : '/wp-content/uploads/2014/06/town.png',
           'city' : '/wp-content/uploads/2014/06/city1.png',
           'tearooms' : '/wp-content/uploads/2014/06/tearoom.png',
           'pubs' : '/wp-content/uploads/2014/06/pub.png',
           'monuments' : '/wp-content/uploads/2014/06/monuments.png',
           'historic_houses' : '/wp-content/uploads/2014/06/historic-houses1.png',
           'paid_attractions' : '/wp-content/uploads/2014/06/pay-for.png',
           'free_attractions' : '/wp-content/uploads/2014/06/free-attraction.png',
        }
    
        //All hover images
        var imgHover = {
           'toilets' : '/wp-content/uploads/2014/06/toilets-red.png',
           'parking' : '/wp-content/uploads/2014/06/parking-red.png',
           'dogs_allowed' : '/wp-content/uploads/2014/06/dogs-allowed-red.png',
           'village' : '/wp-content/uploads/2014/06/village-red.png',
           'town' : '/wp-content/uploads/2014/06/town-red.png',
           'city' : '/wp-content/uploads/2014/06/city-red.png',
           'tearooms' : '/wp-content/uploads/2014/06/tearoom-red.png',
           'pubs' : '/wp-content/uploads/2014/06/pub-red.png',
           'monuments' : '/wp-content/uploads/2014/06/monuments-red.png',
           'historic_houses' : '/wp-content/uploads/2014/06/historic-houses-red.png',
           'paid_attractions' : '/wp-content/uploads/2014/06/pay-for-red.png',
           'free_attractions' : '/wp-content/uploads/2014/06/free-attraction-red.png',
        }
    
        if($('.walk_amenities').length) {
    
    	$('.walk_amenities').html($('.walk_amenities').html().replace(/,/g, ' '));
    
            $('.walk_amenities a').each(function() {
                var text = $(this).text();
                var text1 = text.toLowerCase();
                text1 = text1.replace(' ', '_');
                $(this).html('<img class="custom_icon" id="'+text1+'" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
            });
        }
    
        if($('.gmw-amenities-terms').length) {
    	_link = true;
    	$('.gmw-amenities-terms').each(function() {
    		var html = '';
    		var data = $(this).text();
    		var res = data.split(",");
    		$(this).html($(this).html().replace(/,/g, ' '));
    		for(var i = 0; i < res.length; i++){
    			var text = res[i].trim();
    			var text1 = text.toLowerCase();
    			text1 = text1.replace(' ', '_');
    			html += text1.replace(text1, '<img class="custom_icon" id="'+text1+'" src="'+img[text1]+'" alt="'+text+'" title="'+text+'">');
    		}
    		$(this).html(html);
    	})
        }
    
        $(document).on('mouseover', '.custom_icon', function() {
            var id = $(this).attr('id');
            $(this).attr('src', imgHover[id]);
        });
    
        $(document).on('mouseleave', '.custom_icon', function() {
    	if(_link){
    		var id = $(this).attr('id');
    		$(this).attr('src', img[id]);
    	}
        });
    
    });
    </script>

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

  • chris

    Hi Ash,

    Thanks. This code does not have the desired effect so i set it back.

    All i need to stop is the changing of colour (to red) on the amenity icons when the user hovers over the amnity term icon. See (below map) on

    http://handheld.simplecsr.com/waterway-walks/?gmw_address%5B0%5D&tax_route_type=59&gmw_distance=100&gmw_units=imperial&gmw_form=2&gmw_per_page=5&gmw_lat&gmw_lng&gmw_px=pt&action=gmw_post

    I could probably use CSS but I dont want to force it if it is simple to reslove in the code.

    Thanks
    Chris

  • chris

    Hi Ash,

    I wonder if you can help with this... (i do have a separate ticket for it- but i wonder if the java script in this thread maybe a way to a solution)

    The issue I have is :

    I am trying to find a clean way to disable the Links on all the taxonomies that display on my custom post type of walks.

    This applies to all the taxonomies showing at the top of the page on single walks. (my single post type)

    http://handheld.simplecsr.com/walk/water-walk-sample/

    Can you please advise where i can remove the links (to these taxonomy archive pages) so the taxonomy terms just display as normal text (no hyperlink)

    Thanks
    Chris

  • Ash

    Please add this code in footer.php after wp_footer()

    <script type="text/javascript">
    jQuery(function($) {
      $('.walk_distance a, .walk_duration a, .walk_calories a, .walk_amenities a').each(function(){
        $(this).click(function(e){
          e.preventDefault();
          return false;
        });
        $(this).css({
          'cursor': 'default',
        });
      });
    });
    </script>

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

  • chris

    HI Ash,

    This is ideal and works immediately.

    Could this work for other a class links?

    For example .gmw-ps-pt-iw-email a is a link i want to disable on a popover marker window.

    You can see this link on the marker window for the post that appears on the left of the map on http://handheld.simplecsr.com/location-map/?gmw_address%5B0%5D&tax_distance=0&tax_route_type=0&gmw_distance=100&gmw_units=imperial&gmw_form=4&gmw_per_page=12&gmw_lat&gmw_lng&gmw_px=pt&action=gmw_post

    (it is called min test)

    Currently the link there reads: Email: test (where "test" is a link)

    I tried to add .gmw-ps-pt-iw-email a into the list of links in your code but it does not disable the link.

    I did manage to disable the link using css but this fix does not work for IE

    .gmw-ps-pt-iw-email a {
           pointer-events: none;
           cursor: default;
           color: #797979;
    }

    Thanks again
    Chris

  • Ash

    Hmm, this is little difficult as the data comes dynamically. Though I didn't see the text "Email: test" but I saw link in there that is linked to the post.

    Anyway, try this:

    jQuery(function($){
        $('.gmw-ps-pt-iw-email a').on('click', function() {
          e.preventDefault();
          return false;
        });
    });

    Or

    jQuery(function($){
        $('.gmw-ps-pt-iw-email a').live('click', function() {
          e.preventDefault();
          return false;
        });
    });

    If it still doesn't work, please post a screenshot where you have Email: test link.

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.