WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Adding an attribute to Tiled Gallery images (6 posts)

  1. froystore
    Member
    Posted 6 months ago #

    Hi,

    My blog allows users to pin images on posts when hovering over them. However, I'd like to make the images in Tiled Galleries to not have this feature.

    Pinterest documentation said to include attribute 'nopin="nopin"' in images. Is there a way to target images in the gallery (perhaps, '.tiled-gallery img' or something like that) and include the nopin attribute?

    I'm really not familiar with PHP and WordPress' inability to edit HTML directly so would appreciate help. Thanks!

    https://wordpress.org/plugins/jetpack/

  2. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 6 months ago #

    To avoid editing the plugin files themselves, you might be able to add it via jQuery; try adding something like this to your site's custom js or in a <script> element in the footer, for example:

    $('.tiled-gallery img').attr('nopin', 'nopin');

    I haven't tested this code, but it should set you on the right track.

  3. froystore
    Member
    Posted 6 months ago #

    Hi Richard,

    Thank you for your suggestion!

    I tried adding the below to my footer but it seems to not add any attribute...

    <script type="text/javascript">
    $(".tiled-gallery img").attr("nopin","nopin");
    </script>

    I tried replacing '.tiled-gallery img' with simply 'img' to see if any img tags would add the attribute at all, but no luck. Do you have any idea why the script is not applying the attribute?

    Example page: http://blog.froy.com/bond-street-loft-by-axis-mundi/

  4. froystore
    Member
    Posted 6 months ago #

    Nvm - I figured it out! Please delete last comment if needed.

  5. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 6 months ago #

    Glad you figured it out! For the benefit of anyone else who comes across this thread, what did you find out?

  6. froystore
    Member
    Posted 6 months ago #

    Sure, happy to share.

    I use the Genesis framework with a child theme. In order to make the script work when adding it in the end of the <body> section, you have to understand that WordPress includes jquery by default but sets it in noConflict() mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

    In order to make any script work in noConflict() mode without using wp_enqueue_script(), replace the $() shortcut with jQuery().

    So in my case, this did not work...

    <script type="text/javascript">
    $(document).ready(function() {
    $(".tiled-gallery-item a img").attr("nopin","nopin");
    });
    </script>

    but this did.

    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery(".tiled-gallery-item a img").attr("nopin","nopin");
    });
    </script>

Reply

You must log in to post.

About this Plugin

About this Topic