Home / Topics / Image Watermark / Responsive Image Watermark

Responsive Image Watermark

We're here to help.

Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • 12 December 2016 at 19:27 #14459
    Tflores
    Participant

    How can I get the watermark to only be applied to Enlarged Images on Mobile Devices? Currently I have configured the watermark to only apply to large and full size images, so, when a user lands on a product page they will only see the watermark if the image is enlarged. This works fine on Desktop versions. On Mobile Devices the user doesn’t see the Watermark at first either (which is good), but when the variables are selected then the watermark is then visible even though the image is not enlarged.

    This is only happening on mobile versions. Not Desktop/Laptops.

    Without Variable Selected
    https://kingsdesigns.com/wp-content/uploads/2016/11/Screenshot_2016-11-28-19-03-52.png

    With Variable Selected
    https://kingsdesigns.com/wp-content/uploads/2016/11/Screenshot_2016-11-28-19-04-08.png

    After speaking to my theme support and woocommerce, WooCommerce discovered the following:

    “Inspecting your site for you today the image file which is displaying on a desktop device is this one below.”
    https://kingsdesigns.com/wp-content/uploads/2016/11/Sailboat-Watson-Bay-Australia_Color_Portfolio-Test.jpg

    “The image that displays on a smartphone is this one below.”
    https://kingsdesigns.com/wp-content/uploads/2016/11/Sailboat-Watson-Bay-Australia_Color_Portfolio-Test-850x567.jpg

    “These image sizes are created by the WordPress core software when you upload your images to your site so that smaller more optimized images are loaded on smartphone and tablet devices. You can actually see the images sizes witihin the the source code of a WordPress site like this below on products, posts also have the same format for images too.”

    “The issue you are facing is not with the image sizes but with the watermark not applying to re-cropped images which is related to the Image Watermark plugin you are using by a company titled dFactory. It seems dFactory may need to make their plugin compatible with the WordPress core software responsive images functionality which was added back in WordPress v4.4.”

    https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

    This is a test link you can review this behavior: https://kingsdesigns.com/product/travelers/

    13 December 2016 at 17:01 #14479
    Bartosz
    Keymaster

    Hi,
    Thanks for the job you did before posting this thread – it makes us better understand the issue and support you.

    The issue you have is related to introduced in WP 4.4 srcset support, but not to Image Watermark responsive srcset images compatibility. This functionality serves different image sizes depending on the device screen size. So for example a full size image served for desktop is not served for mobile device, but a medium_large or different size is used instead.

    This is probably also your situation.

    Now you have a couple of options to achieve the desired effect:

    1. optimal: change IW settings to watermark medium_large (a size introduced to handle responsive image functionality) or a different size of the ones your theme (ans srcset) is using for mobile devices (it might require some experimenting to find which one it is). after you find that and set it in IW settings you’ll have regenerate the images using any of the available plugins like this one

    2. simple but not recommended: disable srcset functionality http://wordpress.stackexchange.com/questions/211375/how-do-i-disable-responsive-images-in-wp-4-4

    3. good, but more complex: use wp_calculate_image_srcset and/or wp_calculate_image_sizes to change the image sizes used in srcset generated code to not use the the non-watermarked medium_large size but any of the watermarked sizes instead.

    18 December 2016 at 18:09 #14560
    Tflores
    Participant

    Thanks for the support, Bartosz! Your solution #1 worked :D

    My IW configuration is:
    full, and, medium_large
    product, product_variation, portfolio

    The current configuration you suggested works for most every image I have, thanks! I do have a few images that have larger dimensions (panoramas, vertical) that still display the watermark even though the image is not enlarged. I suppose it’s the dimensions causing the issue. I tried enabling extra_large, but it didn’t work as I hoped. Any thoughts/suggestions for the images with larger dimensions?

    Here is an example of an image with larger Dimensions: 1280 × 1934
    https://kingsdesigns.com/wp-content/uploads/2016/12/Screenshot_2016-12-15-17-54-25.png

    https://kingsdesigns.com/wp-content/uploads/2016/12/Screenshot_2016-12-15-17-54-20.png

    20 December 2016 at 12:40 #14596
    Bartosz
    Keymaster

    You have to check what image size is used on mobile devices for these images – for example by checking the srcset attribute.
    Then apply watermark for that size or add new image size and try to force it being used in srcset – solution #3.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Featured In