Header image issue using Amazon S3 for storage and imgix.com as cdn.

[Adri Oosterwijk]

Hi,

As of today, I try to implement Amazon S3 for storage and Imgix.com as cdn. It works great but as alway a few glitches has to be ironed out.

One I discovered is (IMHO) theme related. The header images are all uploaded to Amazon S3 and served by the cdn. I noticed however that on some pages the default background colors is shone while I am expecting a header image. Looking in the customizer I noticed that the images are present but that a bunch of empty divs were remaining pointing to the uploads folder.

See screenshot below:

In the upper left corner you can see the div selected in the layout and in the elements where it points to.

I added my header images again to no avail. Next, I saved the permalinks again, also to no avail.

I have set the header images to display randomly so on one page I have an image and on another page I have the default background color. This also happens when I reload a page.

What’s happened here?

Best wishes,

adri

[Andy]

Hi Adri,

I don’t think this issue is related to our theme.

The <div class="header-view"></div> are not part of Trusted or Trusted Pro theme, and although the theme does support the WordPress random header image functionality, it doesn’t have the ability to randomize a header image or a solid background color with no image.

Are you using a plugin or perhaps some custom code that is generating the ‘header-view’ divs?

[Adri Oosterwijk]

Hi Andy,

Thank you for your reply.

This puzzles me. I found “header-view” in a couple of files:

• /wp-includes/js/customize-views.js
• /wp-content/plugins/wpml-translation-management/inc/js-scripts.php
• /wp-admin/css/customize-controls.css
• +some minified files

The second one is from one of the WPML plugins. I think it has something to do with them. As told I’m working on the Amazon S3 an Imgix integration using the Media Cloud plugin. I know that this plugin is not yet WPML compatible. I think that is causing it.

I have 30 different header images on my site

In another, older, copy of the site, without the Media Cloud plugin, there are 60 images listed. Thirty duplicates. Apparently, those are listed for both languages.

You told me that the randomize functionality is not a part of the theme. A very long time ago I had a plugin called: WP Display Header by Konstantin Obenland. This plugin added the functionality. However, when I discovered that it could also be set in the customizer I deleted the plugin.

So, there is no plugin active or even installed and I’m totally lost where it is coming from. Any ideas left?

 

[Andy]

The theme does support the random header image functionality, but it cannot work with one of the random options being just a solid background color as there is no functionality for that.

I’ll try to explain, let’s say you have three images…

…this will work okay to show one of the three images:
image 1 / image 2 / image 3

…this will NOT work to show either of the images or a solid background color:
image 1 / image 2 / background color with no image

So, if you have some setup where it randomly chooses either an image or just a plain background color, this must be with some plugin that I am not aware of, or some custom coding to make that work.

Sorry, I don’t know where <div class="header-view"></div> is from. I know it is absolutely not part of Trusted or Trusted Pro.

[Adri Oosterwijk]

Hi Andy,

Thanks again for taking the time to explain.

It took me all day but it seems that I was able to figure it out and to solve it.

It was a WPML related issue. As I had transferred my images to Amazon S3 and Imgix WPML had no clue where to find the Dutch Images. So every image url was wrong when viewing the site in Dutch. The background color is defined in the css and when no image is found to display the area is colored with the background color. See screenshot.

The plugin Media Cloud is not compatible (yet) with WPML officially but I found a workaround on their support site. After adding a tiny bit of code in my functions.php everything is working as expected.

Marked resolved!

[Andy]

Thank you for letting us know that you found what was causing this issue.

[Author]

Posts