Img Tag Override to Amp-Img

PatriaCo
@the-patria-company
6 years ago
349 posts

I need a bit of help writing a listener and trigger that will override the jrCore > jrImage_display function on a mobile device.

#1. I need to be able to add params to the jrImage_display function such as:
amp-width, amp-height & the amp "layout" attribute (of course these need to be ignored when not on a mobile device)

#2. It must allow the "img" tag to be replaced by the "amp-img" tag for everything to be amp valid.

Is this possible? I already have a functioning AMP module, I just need to add this piece for it to really integrate with the image functionality of JR.

THANKS!!

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
updated by @the-patria-company: 03/04/19 08:20:22PM

PatriaCo
@the-patria-company
6 years ago
349 posts

I have tried adding this code to my AMP module's include.php, but it is not working. Can someone spot the problem?

function ampify($html='') {

    # Replace img, audio, and video elements with amp custom elements

    $html = str_ireplace(

        ['<img','<video','/video>','<audio','/audio>'],

        ['<amp-img','<amp-video','/amp-video>','<amp-audio','/amp-audio>'],

        $html

    );

    # Add closing tags to amp-img custom element

    $html = preg_replace('/<amp-img(.*?)\/?>/', '<amp-img$1></amp-img>',$html);

    # Whitelist of HTML tags allowed by AMP

    $html = strip_tags($html,'<h1><h2><h3><h4><h5><h6><a><p><ul><ol><li><blockquote><q><cite><ins><del><strong><em><code><pre><svg><table><thead><tbody><tfoot><th><tr><td><dl><dt><dd><article><section><header><footer><aside><figure><time><abbr><div><span><hr><small><br><amp-img><amp-audio><amp-video><amp-ad><amp-anim><amp-carousel><amp-fit-rext><amp-image-lightbox><amp-instagram><amp-lightbox><amp-twitter><amp-youtube>');

    return $html;
}

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@michael
6 years ago
7,746 posts

I dont know if your code is right or not. what I would do is take some html code then run it through your amplify() function and see what comes out.

Do that outside of jamroom in say a file called junk.php

yoursite.com/junk.php

Once you know the function is doing what you want it to do outside of the jamroom flow then you can integrate it into your module.

(if you have xdebug integrated with a local dev server, thats really useful for stepping through whats happening in cases like this.)

PatriaCo
@the-patria-company
6 years ago
349 posts

Unfortunately, I am unable to use xdebug because I am doing all my dev on one of our Jamroom Hosting servers. (I want to make sure the environment is exactly the same as our production site). May I ask if my set up is correct? Hypothetically if the function is working correctly then I should just add it to the include.php like this:

/**
 * init
 */
function pcAMP_init(){
    return true;
}


function ampify($html='') {

    # Replace img, audio, and video elements with amp custom elements

    $html = str_ireplace(

        ['<img','<video','/video>','<audio','/audio>'],

        ['<amp-img','<amp-video','/amp-video>','<amp-audio','/amp-audio>'],

        $html

    );

    # Add closing tags to amp-img custom element

    $html = preg_replace('/<amp-img(.*?)\/?>/', '<amp-img$1></amp-img>',$html);

    # Whitelist of HTML tags allowed by AMP

    $html = strip_tags($html,'<h1><h2><h3><h4><h5><h6><a><p><ul><ol><li><blockquote><q><cite><ins><del><strong><em><code><pre><svg><table><thead><tbody><tfoot><th><tr><td><dl><dt><dd><article><section><header><footer><aside><figure><time><abbr><div><span><hr><small><br><amp-img><amp-audio><amp-video><amp-ad><amp-anim><amp-carousel><amp-fit-rext><amp-image-lightbox><amp-instagram><amp-lightbox><amp-twitter><amp-youtube>');

    return $html;
}

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
updated by @the-patria-company: 11/22/18 06:40:29AM

@michael
6 years ago
7,746 posts

Did you the first suggestion?

PatriaCo
@the-patria-company
6 years ago
349 posts

I have tried a couple versions, but I am not understanding how to get the $html to pass through the function properly. It keeps breaking and giving me a white page.

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@michael
6 years ago
7,746 posts

When you copy the content of the $html and put it into a variable

$html =  <<<EOF
    <p>Hello</p>
    <p>world and the rest of your html here.....</p>
EOF;
echo ampify($html);

Does it look like you want it to look?

White page will show in your error log what the error is.

PatriaCo
@the-patria-company
6 years ago
349 posts

GREAT NEWS! I have this first step working. The following code does make the replacement properly.

function ampify($html='') {

    $result = preg_replace('/(<img[^>]+>(?:<\/img>)?)/i', '$1</amp-img>',$html);

    echo str_replace('<img', '<amp-img', $result);
}

$html = <<<EOF
    <p>HELLO, WE ARE CONVERTING AN IMG TAG TO AMP-IMG.</p>
    <p><img src="/gallery-1.jpg" class="img-responsive" width="375px" height="250px" layout="responsive" alt="gallery1"></p>
EOF;

echo ampify($html);

Now, how do I add it to my module so that all the html generated from a series of templates passes through the function?

Currently, I use the jrCore_is_mobile_device "if" statement to replace the header.tpl and meta.tpl as AMP requires a specific set of meta parameters. I am thinking that I need to set up a listener for when the amp-meta.tpl is being used? And then pass the generated html through the function? Am I close?

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@michael
6 years ago
7,746 posts

There are many ways to do it. Here is one way:

Docs: "Defining your own SMARTY function"
https://www.jamroom.net/the-jamroom-network/documentation/module-developer-guide/1569/defining-your-own-smarty-function

PatriaCo
@the-patria-company
6 years ago
349 posts

OK, I am really not sure if this is the best strategy, but here is an idea that I would like to get your feedback on:

In my includes.php

function smarty_function_myModule_ampify($params, $smarty)
{
$result = preg_replace('/(<img[^>]+>(?:<\/img>)?)/i', '$1</amp-img>',.$params['html']);

    echo str_replace('<img', '<amp-img', $result);
}

In a template:

{if jrCore_is_mobile_device()}
{myModule_ampify html="
{/if}

My non-ampified code with img tags.

{if jrCore_is_mobile_device()}
"}
{/if}

Will this be too costly on processing speed? I appreciate your help with this.

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@michael
6 years ago
7,746 posts

That template code looks like it will fail.

template:

{if jrCore_is_mobile_device()}
  {myModule_amplify html=$html}
{else}
  {$html}
{/if}

PatriaCo
@the-patria-company
6 years ago
349 posts

Thank you for the help!

I ended up using a different fundamental approach, but I have it working.

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

solved Img Tag Override to Amp-Img

Tags