WordPress.org

Ready to get started?Download WordPress

Forums

WP External Links (nofollow new window seo)
[resolved] How to display images inline? (5 posts)

  1. hki429
    Member
    Posted 4 months ago #

    Hi,

    The external link icon adds an additional HTTP request to the webpage. To slightly speed up my website, I want to display the image inline, as suggested by Google PageSpeed.

    However, for this I need to replace the css that is automatically added to the header with my own css. I can't, however, find which function or js file adds this.

    Might someone have an idea how to do this?

    Thanks in advance,

    https://wordpress.org/plugins/wp-external-links/

  2. freelancephp
    Member
    Plugin Author

    Posted 4 months ago #

    If you want to display an inline image to all external links, you could use the wpel_external_link filter. You need to add some PHP code to f.e. the functions.php of your theme:

    function custom_external_link($created_link, $original_link, $label, $attrs = array()) {
        // add image to label
        $label_with_img = '<img src="data:image/png;base64,...Base64 data">' . $label;
    
        // replace label with label and image
        return str_replace($label, $label_with_img, $created_link);
    }
    
    add_filter('wpel_external_link', 'custom_external_link', 10, 4);
  3. hki429
    Member
    Posted 3 months ago #

    Thanks for your comment, but on WP 3.9 with External Links 1.51 it does not seem to work correctly.

    With this function:

    <br />
      // Place image for open in new window in-line<br />
      function custom_external_link($created_link, $original_link, $label, $attrs = array()) {<br />
        // add image to label<br />
        $label_with_img = $label .'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVR42qXMsQkAMAwDwcySLTNfBlMaGwRv1KT4QnD2kjS2z5VHNGNeOgJMn2oDAnUFA0rQNyD6gqmGDzqrD2TtHGNuAAAAAElFTkSuQmCC" style="padding: 10px 5px 0px 5px;" />';</p>
    <p>    // replace label with label and image<br />
        return str_replace($label, $label_with_img, $created_link);<br />
      }<br />
      add_filter('wpel_external_link', 'custom_external_link', 10, 4);<br />

    I get the following source HTML inserted into the pages:

    <br />
    <p>This is an external link:<br />
    <a>" rel="external nofollow" class="ext-link" target="_blank">Google.com<br />
    <img style="padding: 10px 5px 0px 5px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVR42qXMsQkAMAwDwcySLTNfBlMaGwRv1KT4QnD2kjS2z5VHNGNeOgJMn2oDAnUFA0rQNyD6gqmGDzqrD2TtHGNuAAAAAElFTkSuQmCC"><br />
    </a><br />

    The formatted text looks like:

    <br />
    This is an external link " rel="external nofollow" class="ext-link" target="_blank">Google.com [link image here]<br />

    In other words, the plugin tries to combine both ways, it seems. And this is with disabling the image option in the plugin settings, since it otherwise would give two images.

  4. freelancephp
    Member
    Plugin Author

    Posted 2 months ago #

    On my wordpress it does work. Maybe there's a conflict with another plugin?

  5. hki429
    Member
    Posted 4 weeks ago #

    I could not find the cause of the problems with the function, and therefore made a workaround with css (see below for interested users) and turning off the automatic image insertion by the plugin.

    .ext-link:after{
      content: "";
      display: inline-block;
      margin-left: 5px;
      width: 10px;
      height: 10px;
      background-repeat: no-repeat;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVR42qXMsQkAMAwDwcySLTNfBlMaGwRv1KT4QnD2kjS2z5VHNGNeOgJMn2oDAnUFA0rQNyD6gqmGDzqrD2TtHGNuAAAAAElFTkSuQmCC);
    }

    Despite I could not get the function to work, thanks for your help Freelancephp and, of course, thanks for the great plugin.

Reply

You must log in to post.

About this Plugin

About this Topic