Compatibility of Photon with AngularJS

  • Resolved ccprog

    (@ccprog)


    8 years, 2 months ago

    Hi, I am the developer of https://wordpress.org/plugins/crosswordsearch/. It seems that there is a compatibility problem with Photon, as experienced by one of my customers (https://wordpress.org/support/topic/color-icons-on-answer-words-are-broken has a link to an example).

    The plugin uses AngularJS for a client-side app. Part of that is the dynamic generation of links to icon resources. One line in the app.php file looks like this:

    <img ng-if="word.solved" title="{{localize(word.color)}}" ng-src="<?php echo CRW_PLUGIN_URL ?>images/bullet-{{word.color}}.png">

    Photon rewrites this to

    <img ng-if="word.solved" title="{{localize(word.color)}}" ng-src="http://i2.wp.com/toni-esl.com/quiz/wp-content/plugins/crosswordsearch/images/bullet-word.color.png?w=750" data-recalc-dims="1">

    Essentially it is breaking because the curly braces are stripped out. I would say Photon is definitely in error to change a non-HTTML attribute.

    As a short-time measure, is there a way to configure the module in a way to exclude certain files/folders from rewriting?

    https://wordpress.org/plugins/jetpack/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Lisa Schuyler

    (@lschuyler)

    8 years, 2 months ago

    Hello! Neat plugin!

    To avoid this incompatibility, could you build the URL first, and then insert it?

    Or, better yet, you could just disable Photon for the images. Here are guide that will show you how:

    https://ethitter.com/2013/07/disable-jetpacks-photon-module-in-specific-situations/

    Thread Starter ccprog

    (@ccprog)

    8 years, 2 months ago

    I am still making the case that Photon has no business dealing with a non-HTML attribute. It says <img ng-src=..., not <img src=....

    After reading your code, the core image tag picker is this Regex, yes? The corresponding partial pattern there should be

    <img[^>]+?\s+?src=

    in my opinion, with extra whitespace before src.

    While you (hopefully) contemplate this, the jetpack_photon_skip_image filter looks like the cleanest way to handle it from my side.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    8 years, 2 months ago

    That makes sense. I’ve opened an issue here to track your suggestion. Feel free to submit a Pull Request, we’ll review it and merge it for the next Jetpack release.

    Thanks for the feedback!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Compatibility of Photon with AngularJS’ is closed to new replies.