Support » Plugin: WP External Links (nofollow new tab seo) » How to display images inline?

  • Resolved hki429



    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,

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


    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);

    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"><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"> [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.

    Plugin Author FineWebdev


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

    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.

      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.

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