Support » Plugin: Social Media Widget » [Plugin: Social Media Widget] Specifying image dimensions in the plugin

  • Resolved edwardra3

    (@edwardra3)


    When grading websites on loading speed, one of the things that Google’s PageSpeed and Yahoo’s Y!Slow recommend is to specify image dimensions in the <img> tag. I’ve implemented this on my own site, but I think it would be a good idea for it to be included in the code.

    In the Social Media Widget, you can pick various sizes, but those are saved in the “icon_size” variable so specifiying the dimensions in the php file would be pretty straightforward.
    I added the following code to the block for each social media site:

    width="<?php echo $icon_size;?>" height="<?php echo $icon_size;?>"

    If you wish, I can send you the social-media-widget.php file that I edited so you can incorporate the changes in the official code base.

    http://wordpress.org/extend/plugins/social-media-widget/

Viewing 9 replies - 1 through 9 (of 9 total)
  • That’s great Edwardra3. I was looking for this. Would you please explain more, where this code should be inserted?
    Thanks

    armin, Starting on line 196 of the social-widget.php file there are blocks of code for showing the image for each social media site supported by the plugin.

    For instance, for Facebook, the code is:

    // Facebook
    		if ( $facebook != '' && $facebook != ' ' && file_exists($smw_dir.'/facebook.png')) {
    			?><a href="<?php echo $facebook; ?>" <?php echo $nofollow; ?> <?php echo $newtab; ?>><img src="<?php echo $smw_path; ?>/facebook.png" alt="<?php echo $imgcaption; ?> Facebook" title="<?php echo $imgcaption ?> Facebook" <?php if($animation == 'fade' || $animation == 'combo') { ?> style="opacity: <?php echo $icon_opacity; ?>; -moz-opacity: <?php echo $icon_opacity;?>;" <?php } ?>class="<?php echo $animation; ?>" /></a><?php
    		} else {
    			echo ''; //If no URL inputed
    		}

    Add the code I previously mentioned immediately before the closing /> of the img tag.

    Found it, for each block (after line 197) add above code. for example:

    <a>" <?php echo $nofollow; ?> <?php echo $newtab; ?>><img src="<?php echo $smw_path; ?>/facebook.png" alt="<?php echo $imgcaption; ?> Facebook" title="<?php echo $imgcaption ?> Facebook" <?php if($animation == 'fade' || $animation == 'combo') { ?> style="opacity: <?php echo $icon_opacity; ?>; -moz-opacity: <?php echo $icon_opacity;?>;" <?php } ?>class="<?php echo $animation; ?>" /></a><?php

    Becomes:`
    <a>” <?php echo $nofollow; ?> <?php echo $newtab; ?>><img src=”<?php echo $smw_path; ?>/facebook.png” <strong>width=”<?php echo $icon_size;?>” height=”<?php echo $icon_size;?>”</strong> alt=”<?php echo $imgcaption; ?> Facebook” title=”<?php echo $imgcaption ?> Facebook” <?php if($animation == ‘fade’ || $animation == ‘combo’) { ?> style=”opacity: <?php echo $icon_opacity; ?>; -moz-opacity: <?php echo $icon_opacity;?>;” <?php } ?>class=”<?php echo $animation; ?>” /></a><?php`

    If it’s wrong please upload your updated code.

    I didn’t noticed you posted. you replied while I was typing. Thanks for your quick reply. 🙂

    it doesn’t worked. please insert edited code with your mentioned changes.

    pagespeed still says it doesn’t have dimension:

    [IMG]http://i46.tinypic.com/2vbarv6.png[/IMG]

    Update: Solved. takes some times for affect.
    Thanks man. That was so good. 😉

    This is resolved in 2.9.5 by default.

    I’m afraid this was resolved a little bit too enthusiastic.
    I just found two issues regarding this:
    1. When specifying width and height attributes for <img> only numbers should be used, i.e. don’t add “px”.
    2. The custom services now contain the width and height attributes for the img twice.

    Both issues cause the plugin output to be non-HTML5 compliant.
    I fixed this in my instance; could you please fix it in the plugin?

    Regards.

    You’re right. I’m the worst developer ever 🙁

    This is fixed in 2.9.6.

    Note: I’m a developer. Not a designer. I couldn’t care less about W3 standards. If it functions in every browser in any operating system, I’m happy. This is why there have been and probably will be in the future W3 standard issues. I appreciate you bringing them to me so I can fix them for those of you who do care.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Plugin: Social Media Widget] Specifying image dimensions in the plugin’ is closed to new replies.