[Kerry Graham]

We are launching our business directory soon. We have some data installed on our staging server at http://familylife.staging.wpengine.com/directory

Everything is fine on the Desktop, but viewed on mobile, the company logo doesn’t show — there’s a small box where the logo should be. Social media icons are working properly. We are using the WPTouch plugin to display mobile versions.

I’ve tried numerous variations of the shortcodes, but to no avail. Currently I have:

[connections image_fallback='none' page_limit=20 enable_pagination='true' str_work_phone='Phone' str_work_email='Email' str_work_addr='Address' background_color='transparent' background_gradient=FALSE]

The entry “Possibilities Gift and Decor” doesn’t have a logo, so that one is working fine (no logo, no small box where logo should be).

• This topic was modified 8 years, 4 months ago by Kerry Graham.
• This topic was modified 8 years, 4 months ago by Kerry Graham.

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Kerry

I just visited the site with my iPad and Nexus 7. Both loaded the image fine but then, maybe, the WPTouch theme was not being loaded? What devices should it trigger on?

… Ok, just tried on my HTC One … WPTouch seems to load its theme and I do not see images.

Make sure WPTouch is loading the picturefill.js script included with Connections … this enables support for HiDPI (Retina) image support using HTML5. It specifically adds the support to browsers which do not yet support this new HTML5 spec (img srcset) which is just about every browser except Chrome which does support it natively.

Hope that helps!

[Kerry Graham]

Hi Steven

Thanks for the quick response. I will pass this along to the WPTouch developers and see if there is a conflict somewhere.

I looked at the page with the WPTouch preview enabled on the desktop. Here is the URL

http://familylife.staging.wpengine.com/directory/?wptouch_preview_theme=enabled

It is showing the logo source as blank (src=””).

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Kerry

The preview linked helped!

Looks like WPTouch parses the page code before it is displayed to added its own responsive image support. Unfortunately this kills the responsive image support in Connections.

Can you disable this feature as a test? Or even better, selectively disable this feature on a per page basis. If you can, disable it for the Connections pages.

[Kerry Graham]

Yep, that fixed it! I turned off their Responsive Images feature and the logos showed up. I don’t think I can turn off that feature page-by-page, so I will discuss that with them.

Just one more questions… is there a way to turn off the gray background behind the logos with a shortcode? Or do I need to edit the CSS?

See attached.

Thanks!

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Kerry

Add the following to the theme’s custom CSS area (WPTouch too?):

#cn-cmap span.cn-image-style {
    background: transparent !important;
}

If you have a moment, I would truly appreciate a review as they really do make a difference. Many thanks in advance!

http://wordpress.org/support/view/plugin-reviews/connections

[Author]

Posts