Ask your WordPress questions! Pay money and get answers fast! (more info)

How to prevent plugins from adding html code to javascript?

  • 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)

2012-09-19

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 Harm 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 Harm 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 :-/)

2012-09-19

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 Harm 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 Harm 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 :-/)