WordPress.org

Forums

  1. xiaotai89
    Member
    Posted 1 year ago #

    Hi,
    Have any way to control the icon size depends on the screen size?

    https://wordpress.org/plugins/social-media-feather/

  2. Synved
    Member
    Plugin Author

    Posted 1 year ago #

    The icons only react to high density displays (such as Retina ones) to ensure they always look crisp and high quality.

  3. BigDogSF
    Member
    Posted 1 year ago #

    Sure would be nice if the icons could be responsive. Still love the plugin...but out of 60 plugins, 676 pages of content and 4000 plus posts...this is the only item on my entire site not responsive.

  4. Synved
    Member
    Plugin Author

    Posted 1 year ago #

    I'm not exactly sure what this even means... shrink the images based on screen size? Doesn't sound very useful to me given on mobile devices you're using your fingers and therefore you need bigger icons/buttons anyway.

  5. APTM
    Member
    Posted 1 year ago #

    I was shocked to find out the plugin uses double resolutions scaled down to 50% to support the retina display hype.

    Developer please read:
    https://developer.apple.com/library/safari/documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html

    And while we're at it.. why don't you use sprites in the first place?
    Sprites with the Image Sets or Media Queries in CSS would be the only right way before claiming your plugin is the only one to support retina displays....

  6. Synved
    Member
    Plugin Author

    Posted 1 year ago #

    Using double resolution images scaled to 50% is the only way of supporting retina. If you were to look closely enough at our code you would notice that the plugin uses media queries to conditionally hide or show the high resolution set (depending on screen density).

    If the anchors containers are hidden the images won't be downloaded by the browser. So the double resolution will only be downloaded (and shown) on high density displays, where the are required.

    Also, retina nowadays are not the only high density displays so using webkit specific APIs would exclude a good amount of users.

    Although I agree using sprites is better in some cases, it doesn't fit our infrastructure and it could also be counterproductive when you only enable 2-3 social providers.

  7. APTM
    Member
    Posted 1 year ago #

    No you are wrong.
    You can not use media queries or image sets with img elements.
    Only CSS background images - that's why image sprites with queries would be the only way to do your icons

    Have you tested your icons on both retina and non retina displays?
    I have an older MBP and a simple test with javascript
    alert('Device Pixel Ratio: ' + window.devicePixelRatio);
    shows that I have a devicePixelRatio of 1
    Now in Crome when I rightclick and icon and > inspect image
    it shows the icon is 48x48 downscaled to 24x24

  8. Synved
    Member
    Plugin Author

    Posted 1 year ago #

    As I've explained, we hide the image elements based on media queries, rather than changing the image source. This achieves the same effect as the browser won't download the extra set.

    If the device pixel ratio is below 2 then the images with regular size will be used unless in your preferences under Settings -> Social Media for "Icon Resolution" you have selected "Single", which will force only 1 set to be used (the larger one, for compatibility purposes).

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic