global modal not working when using a CDN

I think I finally found the bug that was driving me nuts.

The automatic global modal stopped working sometime ago for me and I couldn’t find why. After thousands of test I finally narrowed down the problem

Whenever I activate a plugin for a CDN such as CDN Enabler or even the default wp-supercache CDN tab, the global modal stops working.

It seems that when activating a CDN the “class=td-modal-image” no longer gets autoinserted. I think this is related to the CDN rewriting the URL. I think the safest bet for this to get fixed is to “insert” the td-modal-image class AFTER the url so it doesn’t get rewritten.

Is there any way this could be easily fixed by altering a file?

Please, take your time to read what I’ve just posted. This is not something I have trouble configuring it.

I am telling you about a BUG I found in the theme. I’ve been using all kinds of themes and I’ve never seen a CDN configuration breaking the theme like in this one.

You can’t just send someone to use Cloudflare when the theme functionality breaks while using a recommended plugin of yours. wp-supercache.

I am using wp-supercache with CDN and maxCDN. Why would I want to use cloudflare?. I am already paying cloudflare ARGO and I have a separate MaxCDN account for the pictures.

This should be working just fine.

The problem ocurrs when I activate the CDN functionality on wp-supercache, you recommend this plugin and I am telling you the CDN functionality breaks the the theme functionality. This should not be happening.

Of all the CDN’s out there, cloudflare is THE ONLY ONE that does not need domain replacing to work, as they use their own DNS services and they can get away with it but all the rest needs some form of plugin for URL replacing.

The problem starts when wp-supercache replaces the URL of my site with the cdn.mysite.com. The class for MODAL that the theme should be added gets deleted. All I’m telling you is that I need a hint as to where the class gets added so I can try and modify the theme files and see if I can make it work.

Of course, you’re invited to explore this bug and replicate it yourself, you’ll see that I’m right.

I understand what you recommend. But I cannot just ditch a suscription to MaxCDN just because you don’t want to support a CDN outside of Cloudflare.

It would really help if you can point me where is the td-modal class being added in the PHP code so I can take a look and probably fix it.

Afterall, having support for all CDN’s in your theme would certainly not harm you in any way.

Just so you know. The theme work just fine with CDN77 and MaxCDN using CDN Enabler plugin from KeyCDN and wp-supercache. It’s only the global td-modal class that is not getting added when you enable the CDN URL as I explained above.

Ok. I found where the td-modal-image gets added an it’s inside wp-booster folder.

Modifying this would require serious work so I found out a much simpler alternative.

Adding this piece of code to a new php file (as a plugin)

function add_image_responsive_class($content) {
global $post;
$pattern =”/<img(.*?)class=\”(.*?)\”(.*?)>/i”;
$replacement = ‘<img$1class=”$2 td-modal-image”$3>’;
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter(‘the_content’, ‘add_image_responsive_class’);

Will succesfully restore the GLOBAL MODAL ON on all images while using a CDN plugin. This code works perfectly with either wp-supercache CDN functionality or KeyCDN CDN Enabler plugin.

You could adapt the code to include it on your theme if you like, this will improve functionality by allowing the use of any CDN and the Global MODAL mode enabled.

(For this code to work you need to disable Global MODAL on Theme options)

• This reply was modified 8 years by tecnogaming.

Hi there, does this still work for you? Applied it to my install and it didn’t work.

Managed to get it working with:

// td modal img on all images
function add_responsive_class($content){
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
foreach ($imgs as $img) {
$existing_class = $img->getAttribute('class');
$img->setAttribute('class', "td-modal-image $existing_class");
}
$html = $document->saveHTML();
return $html;
}
add_filter('the_content', 'add_responsive_class');

Thanks so much for sharing this !!. I will try it out to confirm since I didn’t check the code on newest updates.

• This reply was modified 7 years by tecnogaming.