Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 7, 2020 at 10:43 am #1228528
    freeethinka

    Hi

    I am building a masonry gallery. To make the ID numbers for each image bold in the mouse over Title panel and Alternative Text, I originally added this code 4 to the Alt text AND Title fields in the Media Library. But when viewing the page, the actual code appeared in the Alt Text (unwanted) and the number was not bold. The number in the Title was bold (as planned).

    So I removed the code only from the Alt Text field but the Alt text in page view still shows the code.
    You can also see this on all of the images.

    I then deleted everything from the Alt text field for the “first image” but the Alt text with the code still appears in page view. It seems like the Alt text is being pulled from the Title field which includes the code.

    My preference is to:
    • have the Alt text appear with the number in bold (or not bold), without the code
    • and to keep text and number bold in the Title panel (as is).

    The Alt Text field for the first image in this gallery sample is empty.
    All the other images only include the text in Alt Text field and no code.
    Sample link: https://abstractartcollective.com/mgto
    pw in private content:

    I hope I didn’t lose you. :) Thank you!

    July 13, 2020 at 5:25 am #1229828
    Mike

    Hey freeethinka,
    Sorry for the late reply, and thanks for the link. The alt title attributes are plain text and can not display HTML tags such as <strong> , but the problem with it being plain text is that when trying to adjust it you can’t remove just the HTML tags or a single word.
    But with this script the title is hidden on hover so the user doesn’t see it, and it is restored on mouse-out so the Googlebot will see it.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_script(){
  ?>
  <script>
(function($){
    $('a.av-masonry-entry').hover(function(e){
        $(this).attr('data-title', $(this).attr('title'));
        $(this).removeAttr('title');
    },
    function(e){
        $(this).attr('title', $(this).attr('data-title'));
    }); 
    $('.av-masonry-image-container').hover(function(e){
        $(this).attr('data-title', $(this).attr('title'));
        $(this).removeAttr('title');
    },
    function(e){
        $(this).attr('title', $(this).attr('data-title'));
    }); 
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');

    Then clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.