Ultimate Branding Log In Image Conflict With Jetpack Photon

Hello,

Not sure if this is an issue with the Ultimate Branding Login Image module or with Jetpack Photon.

When Jetpack Photon is NOT activated the login image diplays correctly as on this site:

http://r2.soobahkdo.org/wp-login.php

However, when Jetpack Photon is activated, then the image seems to get resized~squished to about the size of the default Wordpress logo image as shown on this site:

http://r3.soobahkdo.org/wp-login.php

Deactivating Photon instantly resolves the issue.

?????

  • Vaughan

    Hi @SooBahkDo,

    I can confirm this on my own site, it seems that jetpack overwrites the CSS for the login page, and instead assigns the background-size as 80px instead of the zie of the actual image.

    I would gear more towards this being the fault of Jetpack than with our plugin.

    This is the normal CSS with jetpack disabled.

    .login h1 a {
        background-image: url("http://vaughanmontgomery.co.uk/wp-content/uploads/2014/08/xampp-logo-new.gif");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 200px 59px;
        color: rgb(153, 153, 153);
        display: block;
        font-size: 20px;
        font-weight: 400;
        height: 59px;
        line-height: 1.3em;
        margin: 0 auto 25px;
        outline: 0 none;
        overflow: hidden;
        padding: 0;
        text-decoration: none;
        text-indent: -9999px;
        width: 200px;
    }
    .login h1 a {
        background-image: none, url("../images/wordpress-logo.svg?ver=20131107");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 80px 80px;
        color: #999;
        display: block;
        font-size: 20px;
        font-weight: 400;
        height: 80px;
        line-height: 1.3em;
        margin: 0 auto 25px;
        outline: 0 none;
        overflow: hidden;
        padding: 0;
        text-decoration: none;
        text-indent: -9999px;
        width: 80px;
    }

    This is with Jetpack enabled.

    .login h1 a {
        background-image: url("http://i1.wp.com/vaughanmontgomery.co.uk/wp-content/uploads/2014/08/xampp-logo-new.gif?resize=200%2C59");
        background-position: center top;
        background-repeat: no-repeat;
        color: rgb(153, 153, 153);
        display: block;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.3em;
        margin: 0 auto 25px;
        outline: 0 none;
        overflow: hidden;
        padding: 0;
        text-decoration: none;
        text-indent: -9999px;
    }
    .login h1 a {
        background-image: none, url("../images/wordpress-logo.svg?ver=20131107");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 80px 80px;
        color: #999;
        display: block;
        font-size: 20px;
        font-weight: 400;
        height: 80px;
        line-height: 1.3em;
        margin: 0 auto 25px;
        outline: 0 none;
        overflow: hidden;
        padding: 0;
        text-decoration: none;
        text-indent: -9999px;
        width: 80px;
    }

    However, I will ask one of our developers to take a look, just to be certain.

    Thanks for the report.

  • SooBahkDo

    Hello Vaughn,

    I have also discovered that when activated Jetpack Photon also breaks the thumbnail display of the plugin Special Recent Posts Pro

    https://wordpress.org/plugins/special-recent-posts/

    I reported this issue to the developer of that plugin as well.

    In both instances, I thought perhaps there might be a way to compensate for JetPack Photon's misbehavior in these plugins. ???? Perhaps something like ignoring use of the Photon served image if/when its dimensions do not match the original image dimensions. ????

    Thanks,
    Phil D

  • SooBahkDo

    Hello Vinod.

    This site has the most recent version of photon active and the most recent version of Special Recent Posts. This page is an example of the broken images in Special Recent Posts.

    This is a test site only used for testing configuration of themes, plugins, etc and you will need a password to view it.

    Viewing Password: soobahkdo

    http://martialarts.qualityoflives.com/

    Turning Photon OFF fixes the issue.

    ************************

    This site DOES NOT have photon active and this page is an example of the SRP images working correctly.

    http://dfw.soobahkdo.org/blog/

    Turning Photon ON creates the issue displayed on the site above.

    ************************

    Turning Photon on also shrinks the network login page image which is uploaded in Ultimate Branding. Any site where Photon is active displays a shrunken login image.

    We have deactivated Photon on most sites pending solutions.

    ************************

    I also reported this issue with Special Recent Posts to that plugin developer and received this reply:

    Comment:

    No, Special Recent Posts cannot process images hosted on a different domain such a CDN service like Photon. That’s because SRP uses a GD library to resize and process all the images, and for security reasons, this cannot be done on another machine.

    The next update, ready for the end of the month, will provide a new functionality which can display normal featured images without processing.

    You can see all comments on this post here:
    http://www.specialrecentposts.com/support/?ticket=jetpack-photon-breaks-plugin-thumbnail-display#comments

    Permalink: http://www.specialrecentposts.com/support/?ticket=jetpack-photon-breaks-plugin-thumbnail-display#comment-2028

    Thanks for your help.

    Phil D

  • Vinod Dalvi

    Hi Phil D,

    Thank you for your detailed reply.

    The comment from Special Recent Posts plugin developer is very useful so let's handle them this issue in the next plugin update.

    Also please read the limitations of jetpack photon plugin on the following page.

    http://jetpack.me/support/photon/#limitations

    Turning Photon on also shrinks the network login page image which is uploaded in Ultimate Branding. Any site where Photon is active displays a shrunken login image.

    We can help to resolve this issue.

    To resolve this issue try adding the following CSS code in your site where Jetpack Photon is activated using Custom Login CSS module of Ultimate branding plugin.

    .login h1 a {
           width: 310px;
           background-size: 310px 70px;
    }

    Regards,
    Vinod Dalvi

  • kaleidoscopeint

    Hi Vinod, I was having the same issue, and used you solution and it worked ,but I didn't have Photon running. Below is a list of the plugins that are enabled on my site, hope it sheds some light on whats going on.
    regards
    ki

    WordPress Simple Firewall
    WordPress MU Domain Mapping
    Sucuri Security - Auditing, Malware Scanner and Hardening
    Multisite Enhancements
    Limit Login Attempts
    Features
    CloudFlare

  • Jack Kitterhing

    Hi there @kaleidoscopeint,

    Hope you're well today! :slight_smile:

    It doesn't appear from your list there would be anything there that would effect this, glad you got it working though with Vinod's resolution.

    I've tested the plugins above and couldn't replicate, it's possible this may be related to the image itself that is being used.

    We'd be more than happy to investigate further if you'd like us to. :slight_smile:

    Thanks!

    Kind Regards
    Jack.