How to prevent plugins from adding html code to javascript? WordPress
- SOLVED
I am the developer of the mapping plugin [[LINK href="http://www.mapsmarker.com"]]www.mapsmarker.com[[/LINK]] and having troubles with other plugins which change the output of my javascript causing my maps to break. See [[LINK href="http://wordpress.org/support/topic/plugin-seo-friendly-images-plugin-conflict-seo-friendly-images-breaks-leaflet-maps-marker?replies=1#post-3182292"]]this thread[[/LINK]] for details on this example:
SEO Friendly Images-Plugin for example adds
title="image test" alt=" image test"
instead of
title=\"image test\" alt=\" image test\"
to my javascript code which causes my map to break.
Is there a way to prevent other plugins from adding custom html-code to my javascript output?
Answers (2)
John Cotton answers:
These are the culprit lines from the SEO plugin:
function seo_friendly_images($content) {
return preg_replace_callback('/<img[^>]+/', 'seo_friendly_images_process', $content);
}
add_filter('the_content', 'seo_friendly_images', 100);
If I were you, I'd add some code that removed his filter, and then added my own back in with a more targetted regex - that's the problem: his currect regex picks up all image tags - you need one that excludes content inside <script> tags (or something like that).
Robert Seyfriedsberger comments:
thanks for the fast answer - forwarded it to the plugin developer of seo friendly images. I wonder if there e.g. a wordpress function or best practice exists which you can use to prevent other plugins from adding code to your plugins code at all.
John Cotton comments:
<blockquote>I wonder if there e.g. a wordpress function or best practice exists which you can use to prevent other plugins from adding code to your plugins code at all.</blockquote>
There is plenty of best practice, but sadly many plugins don't play ball. In this case, I suspect it's a genuine oversight on the implications of altering js within the content.
He uses a very low priority (100) which means he'll tend to come in after all other plugins and shortcodes have been executed. I'm assuming your plugin works with a shortcode?
Robert Seyfriedsberger comments:
I would like to suggest an enhanced regex which excludes <img>-tags if they are between <script*>-tags. That would be the only solution that would last I guess. Any idea how this regex has to look like (I am still not good at this :-/)
Gabriel Reguly answers:
Hi Robert,
The answer got double posted, so I removed this one.
Regards,
Gabriel
Gabriel Reguly comments:
Hi Robert,
Why don't you get rid of your \"?
Instead of
var mapquest_osm = new L.TileLayer("http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", {maxZoom: 18, minZoom: 1, errorTileUrl: "http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/inc/img/error-tile-image.png", attribution: "Map: Tiles Courtesy of MapQuest <img src=\"http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/inc/img/logo-mapquest.png\" style=\"display:inline;\" /> (OpenStreetMap, CC-BY-SA)", subdomains: ["otile1","otile2","otile3","otile4"], detectRetina: true});
do this
var mapquest_osm = new L.TileLayer("http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", {maxZoom: 18, minZoom: 1, errorTileUrl: "http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/inc/img/error-tile-image.png", attribution: 'Map: Tiles Courtesy of MapQuest <img src="http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/inc/img/logo-mapquest.png" style="display:inline;" /> (OpenStreetMap, CC-BY-SA)', subdomains: ["otile1","otile2","otile3","otile4"], detectRetina: true});
Regards,
Gabriel
Robert Seyfriedsberger comments:
Hi Gabriel,
unfortunately this is not possible as the php-code for generating this js-code is already using single quotes:
$lmm_out .= 'var mapquest_osm = new L.TileLayer("http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", {maxZoom: 18, minZoom: 1, errorTileUrl: "' . LEAFLET_PLUGIN_URL . 'inc/img/error-tile-image.png", attribution: "' . $attrib_mapquest_osm . '", subdomains: ["otile1","otile2","otile3","otile4"], detectRetina: ' . $lmm_options['map_retina_detection'] . '});'.PHP_EOL;
chaning this which would also result in breaking the code :-/
Gabriel Reguly comments:
Hi Robert,
Escaping ( adding a back-slash ) works also for 's.
So this
$lmm_out .= 'var mapquest_osm = new L.TileLayer("http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", {maxZoom: 18, minZoom: 1, errorTileUrl: \'' . LEAFLET_PLUGIN_URL . 'inc/img/error-tile-image.png\', attribution: "' . $attrib_mapquest_osm . '", subdomains: ["otile1","otile2","otile3","otile4"], detectRetina: ' . $lmm_options['map_retina_detection'] . '});'.PHP_EOL;
should work fine.
Regards,
Gabriel
Gabriel Reguly comments:
Hi Robert,
I changed one of your files, please test if it works.
[[LINK href="https://dl.dropbox.com/u/355512/leaflet-maps-marker.php"]]https://dl.dropbox.com/u/355512/leaflet-maps-marker.php[[/LINK]]
Regards,
Gabriel
Robert Seyfriedsberger comments:
doesnt work unfortunately.
I would like to suggest an enhanced regex which excludes <img>-tags if they are between <script*>-tags. That would be the only solution that would last I guess. Any idea how this regex has to look like (I am still not good at this :-/)