[Plugin: WordPress HTTPS] Header graphic disappears under ssl

  • Hi
    Recently installed ssl on a site. When viewing the site using ssl (https:), my header image won’t load.

    Here is what hostgator had to say:

    QUOTE———-

    “Hi Mike,
    Sounds like the issue is with images not being loaded because they aren’t specified with SSL-enabled URLs. For example, the header background.

    background:url(“https://carcreditfast.com/wp-content/uploads/2010/11/autocreditlogo_edited-5.jpg”) no-repeat scroll 0 0 transparent;

    As you can see, it’s asking for the image via HTTP, which in FireFox will cause a warning when you connect via SSL. The correct way to specify the image would be without the hostname or protocal in the path, such as:
    background:url(“/wp-content/uploads/2010/11/autocreditlogo_edited-5.jpg”) no-repeat scroll 0 0 transparent;

    I suspect IE is simply refusing to load the image based on its security settings. Fixing the URL should resolve the issue.

    Bill Bayer
    Linux Administrator
    Hostgator.com, LLC”——–end of quote

    When I go to the media library, and click on “edit” for an image, I can see where I could change the path to the image file, but it is greyed out. It does start with the hostname and protocol, which prevents it from loading under ssl. The HG guy seems right, I just don’t know how to change it!

    If you view it in Firefox, the header graphic will load after you get by the “secure files” nag, but Explorer refuses to load the graphic at all under ssl.

    Here is the site: https://www.carcreditfast.com (add the “s” or click on “apply” button to get the secure version… we actually only need the ssl for one page, the credit app)

    I installed the plugin, tried all the different variants except for “shared ssl” (it’s not). This site is hosted on my reseller site, using WP 3.01, and a Studiopress theme called Prose.

    I am up against a wall here. I appreciate any help you folks can give!

    Mike

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author mvied

    (@mvied)

    Hey Mike,

    Yes, sadly my plugin doesn’t bother with changing CSS because most people have their styles in external stylesheets, which I can’t alter.

    Also, because the fix to your problem is really simple. In your head tag you’ve got a block of CSS:

    <style type="text/css">
#header{background:url(https://carcreditfast.com/wp-content/uploads/2010/11/autocreditlogo_edited-51.jpg) scroll no-repeat 0 0;}
</style>
<style type="text/css">
body { background-color: #012650; background-image: url('https://carcreditfast.com/wp-content/uploads/2010/11/background.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>

    You can use relative URL’s for your images so that they will change to HTTP or HTTPS, depending on what the current page is set to. The styles should look a little more like this:

    <style type="text/css">
#header{background:url(/wp-content/uploads/2010/11/autocreditlogo_edited-51.jpg) scroll no-repeat 0 0;}
</style>
<style type="text/css">
body { background-color: #012650; background-image: url('/wp-content/uploads/2010/11/background.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>

    Basically, you just remove your domain and leave the path to the image, and the image will work on either HTTP or HTTPS.

    Thread Starter Michael Rytter

    (@michael-rytter)

    Thanks!

    I am quite a rookie at stylesheets, but not afraid to dive in and get dirty…I seem to be learning!

    I am using Studiopress’s Prose theme. I put this into my custom.css:

    .page-id-136 #header {
    background:url(“https://carcreditfast.com/wp-content/uploads/2010/11/autocreditlogo_edited-51.jpg&#8221;) no-repeat scroll 0 0 transparent;
    }

    It worked! For the credit app anyway, which is the only page I need the ssl to be used on.

    But…now today another problem is cropping up…..Good Old “Do no Evil” Google has spidered the site, and most of the pages are showing up in their serps as “https:”, and when people arrive via the google link, they arrive at a “https:” page, and the graphics aren’t there!

    So I now really do need the header graphics to show up in all the pages when they are called as Https: (Or how to stop google from spidering them as Https, and I don’t know how to do that either!)

    I tried just duplicating my own fix, (above), in custom.css, using different page id’s, but it won’t work. (It still works on my credit app page though:) I must have at least done SOMETHING right! LOL!)

    I’d like to try the code you gave me, but I don’t know where to put it.

    Heh heh, I know, don’t laugh…..but it, (your code),doesn’t look like it belongs in a style sheet….or does it? (seriously….I really don’t know! lol! It looks like php and html to me)

    Thanks so much for your help!
    Mike

    Plugin Author mvied

    (@mvied)

    Hey Mike,

    You’re right, it didn’t come from a stylesheet. ?? That code came directly from the source of your site. It’s in the <head> section.

    It’s probably being added by the theme you’re using. See if your theme has any configurable options for changing your background/header image, and if it doesn’t, try checking the header.php file of your theme.

    After you find out where that is, you can change it to a relative path and your graphics should show up no matter what. i.e. change https://carcreditfast.com/wp-content/uploads/2010/11/autocreditlogo_edited-51.jpg to /wp-content/uploads/2010/11/autocreditlogo_edited-51.jpg.

    As for the other issue, enable the ‘Force SSL Exclusively’ option and it will redirect any page that shouldn’t be HTTPS to HTTP. The redirect sends a 301 Permanently Moved header that will tell Google to use the HTTP URL instead of HTTPS. It may take some time for Google to update, but in the meantime, people will be redirected from HTTPS to HTTP.

    Thread Starter Michael Rytter

    (@michael-rytter)

    Thanks so much!

    Just check the “Force exclusively” Box on the loan application page? (That is the only page I need to be SSL), and leave that box on all the normal pages “unchecked”?

    I am using Studiopress’s Prose theme,and it does have what SHOULD be configurable options for changing the background/header image.

    In “media, under each image, there is an “edit” link, and one of the things that gives you is a text box with the url location of the image…..it, unfortunately has the COMPLETE url for the image…..and…..is GREYED out! I can put my cursor in the box, but I can’t do anything…..GRRRRRR!

    And….wierdly enough, the theme editor for this particular them doesn’t have a header.php file. I’ve gone all theu the stylesheets, as well as the functions.php, trying to figure out how to “ungrey” that text box, because I think that would be the fix!

    Thanks for all your help….and if you have any ideas…..:)
    Mike

    Plugin Author mvied

    (@mvied)

    Hey Mike,

    No, that’s the ‘Force SSL’ checkbox that’s on each post’s edit page. The option I’m talking about is under Settings > WordPress HTTPS in the admin menu on the right-hand side.

    You won’t be able to change the URL to the image in that box as that is just provided for you to use in posts and such, and is not what is used by the theme.

    Somewhere, that theme is configured to put that CSS in there. Generally if a theme has configurable options, there will be an option that the theme adds under the Appearance menu on the right-hand side menu in the admin panel.

    I really don’t have any more ideas if you can’t find it there, but if you’d like, I can take a look at it for you. I’m positive I can figure out where it’s coming from. You can email the details to mike[at]mvied[dot]com if you decide to go that route.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Plugin: WordPress HTTPS] Header graphic disappears under ssl’ is closed to new replies.