WordPress.org

Ready to get started?Download WordPress

Forums

Social Media Widget
[resolved] Specifying image dimensions in the plugin (10 posts)

  1. edwardra3
    Member
    Posted 2 years ago #

    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/

  2. armin3000
    Member
    Posted 2 years ago #

    That's great Edwardra3. I was looking for this. Would you please explain more, where this code should be inserted?
    Thanks

  3. edwardra3
    Member
    Posted 2 years ago #

    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.

  4. armin3000
    Member
    Posted 2 years ago #

    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.

  5. armin3000
    Member
    Posted 2 years ago #

    I didn't noticed you posted. you replied while I was typing. Thanks for your quick reply. :)

  6. armin3000
    Member
    Posted 2 years ago #

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

  7. armin3000
    Member
    Posted 2 years ago #

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

  8. brianfreytag
    Member
    Posted 1 year ago #

    This is resolved in 2.9.5 by default.

  9. nheinis
    Member
    Posted 1 year ago #

    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.

  10. brianfreytag
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.