Possibility to exclude images?

  • Resolved bdxix

    (@bdxix)


    4 years, 2 months ago

    Hi,

    Great plugin!
    It is possible to exclude effect of Shrinkwrap Images on user defined images?

    My problem:
    I use Polylang plugin and the pll language switcher which display flags with the name of the languages next to them. Ex:
    [USFlag] English
    [FranceFlag] Fran?ais

    When I activate Shrinkwrap Images, I get a line break after each image of the switcher:
    [USFlag]
    English
    [FranceFlag]
    Fran?ais

    The line break is due to the added <div> (<div class=”eol_si_shrink”></div>).

    It is possible to exclude the Shrinkwrap’s effect on certain images or alternatively to exclude images whose link (src) begins with certain characters (because the flags are “data:image/png”).

    Thank you by advance for any help.

    BDxix

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Ben Dunkle

    (@empireoflight)

    Hey! Thanks for using the plugin.
    I’m updating the plugin and should have a new version ready soon. It doesn’t wrap the images in a <div>, so maybe it will help. Excluding it on certain images is something I want to integrate, but that’s probably a longer term feature.

    Thread Starter bdxix

    (@bdxix)

    Thank you very much for your reply.

    I just found a solution (I’m not sure it’s the best solution, but it works). I have made some changes in shrinkwrap_images.js:

    // Get directory path of plugin directory
    var plugindir = php_vars.plugindir;

    //
    var gifpath = ‘‘;

    // Use jQuery to wrap each img tag in the shrinkwrap div
    jQuery( document ).on( ‘ready’, function() {
    jQuery( ‘img’ ).each(function() {
    if (!jQuery(this).attr(‘src’).startsWith(‘data’)) {jQuery(this).wrap( ‘<div class=”eol_si_shrink”></div>’ ).after( gifpath );}
    });
    } );

    // Run shrinkwrap when lightbox openend
    document.arrive( ‘img’, function() {
    if ( ! jQuery( this ).closest( ‘.eol_si_shrink’ ).length ) {
    jQuery( this )
    .wrap( ‘<div class=”eol_si_shrink”></div>’ )
    .after( gifpath );
    }
    } );

    The adding tests if the src of the image starts with the word ‘data’.

    Thanks!

    • This reply was modified 4 years, 2 months ago by bdxix.
    • This reply was modified 4 years, 2 months ago by bdxix.
    Thread Starter bdxix

    (@bdxix)

    I forgot to say that indeed it is not the <div> itself that creates the line break but the associated css “display: flex;”.
    When I replaced it by “display: inline”, this removed the line break but the effect was lost hence the above solution.

    • This reply was modified 4 years, 2 months ago by bdxix.
    Plugin Author Ben Dunkle

    (@empireoflight)

    Thanks! I’ll try it in my dev version. Also, I can send you the github repo if you’d like!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Possibility to exclude images?’ is closed to new replies.