Sumo and olark chat are not working on amp version

@franks123 1. You can disable AMP for particular content types or templates using the “Supported Templates” option of the plugin. You can also disable AMP by default using the below, added to a custom plugin or your themes functions.php:
add_filter( 'amp_post_status_default_enabled', '__return_false' );

2. As those features seem to use custom JavaScript they won’t work in AMP by default.

3. Your canonical homepage features various JavaScript not compatible with AMP by default. As you can image it’s outside the scope of support to advise on site improvements but you can disable AMP on the homepage while you work on the issues. There is a section on the plugins website which deals with custom tempates in transitional mode. You can alternatively use conditions in your homepage template to toggle content based on AMP.

<?php if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) : ?>
    ...amp code here...
<?php else : ?>
    ...non amp code here...
<?php endif; ?>

Hi, please guide me about these three questions

1) You are saying that for non-amp version link
https://creativesystems.0438cfd.netsolhost.com/
The slider code will go in non-amp condition.
And for amp version, i will add static <amp-carousel> component in amp condition. Am I right?

2) For adding amp JS libraries, what should i do. Simply Add them in header.php?

3) There is a issue of featured images as well in amp version. Please see this link
https://creativesystems.0438cfd.netsolhost.com/contact-us/?amp

Please guide me about these questions

Thank you

1. Yes, one option is to use amp-carousal for your AMP content as opposed to the JavaScript based slideshow in non AMP.

2. If you want to add any AMP component you can use the following format. The below requests both the amp-carousel and amp-sidebar components.

add_filter(
        'amp_post_template_data',
        function( $data ) {
                $data['amp_component_scripts'] = array_merge(
                        $data['amp_component_scripts'],
                        array(
                                'amp-carousel' => true,
                                'amp-sidebar' => true,
                        )
                );
                return $data;
        }
);

3. There seems to be AMP specific CSS impacting the featured images. You’ll need to modify to match the non AMP dimensions.

Hi @jamesosborne, I have three question to discuss with you.
1) For Adding css for amp version, Should I need to add css in <style amp-custom> in head tag of header.php or I can add styles.css?

2) please see this link
https://creativesystems.0438cfd.netsolhost.com/?amp
Css is not applying on home page on this live link. But on local server, it is applying. Please suugest me why it is not applying.

3) What is the way to apply css to amp version of home page. Currently no new css that i am adding for amp version of home page is applying?

please guide me about all these question

Thank you

@franks123 1. You should apply CSS to your active themes style.css file or a custom plugin to ensure it’s not overwritten.

2. Is it possible that a combination of themes and plugins contribute to over 50kbs of CSS, which would result in other CSS being stripped out? There is a discussion here you can follow here in relation to increasing the current CSS limit in AMP.

3. To apply CSS for your AMP content (homepage or not) you just need to include the [amp] selector in front of any rules as you’ve been doing. The plugins CSS tree shaking feature would ensure any rules that are applicable would be stripped out anyway.

@jamesosborne ,You are saying that
1) I can add css of amp version with [amp] selector in active theme style.css. Am i Right?

2) Can you please tell me that On which file i can add code to enhance css Limit from 50000 bytes to 75000 bytes?

@franks123 If you are making significant AMP specific CSS rules then it may be better to create a AMP specific stylesheet. You can enqueue it to your AMP URLs via functions such as the below:

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
       wp_register_style( 'amp-style', get_stylesheet_directory_uri() . '/amp-style.css');
        wp_enqueue_style( 'amp-style' );
    }
} );

You can use that as an alternative to using the [amp] selector. Add all your CSS rules you wish to apply to your AMP content to an amp-style.css and place it in your themes directory.

2. You can keep an eye out or contribute to that GitHub issue in relation to the increase in CSS restrictions.

@jamesosborne , so you are saying that
1) currently this feature is in progress. for that i have to wait. am i right?

2) is there any alternate way to resolve this issue because on local server there is no issue about css limitation. I have make home page amp compatible on localhost but on live server css is not applying?

Please guide me about all above questions

Thank you

@franks123 Yes, you’ll have to wait for any updates on CSS restrictions.

I’m unsure what the issue could be with your live site. It may be hosting environment related as opposed to excessive CSS. Any excessive CSS would be listed in the plugins validation tool.

Hi @jamesosborne
1) There is no excessive css listed in plugin validation tool. If you say then I will send you wp-admin credentials through email.

2) According to my thinking, css is not applying on amp version of home page but on other pages css is applying. You can check css of header portion on this link that is not applying on home page. Please see this link
https://creativesystems.0438cfd.netsolhost.com/about-us/?amp

Hi @jamesosborne
1) There is no excessive css listed in plugin validation tool. If you say then I will send you wp-admin credentials through email.

2) According to my thinking, css is not applying on amp version of home page but on other pages css is applying. You can check css of header portion on this link that is not applying on home page. Please see this link
https://creativesystems.0438cfd.netsolhost.com/about-us/?amp

3) Also on this link
https://creativesystems.0438cfd.netsolhost.com/about-us/?amp
please see this

<amp-img src=”https://creativesystems.0438cfd.netsolhost.com/wp-content/themes/creative_system/images/logo.png&#8221; alt=”commercial-playground-equipment” class=”img-responsive data-no-lazy=”1″ object-fit=”contain” width=”474″ height=”400″></amp-img>

From where it is adding height: 400px.

But on local server, it is adding original logo height

@franks123 I can’t say for sure why your homepage is not working as the others but maybe try and replicate the content on another page and test without any popup plugins or other features.

Hi @jamesosborne
I have made a test page and assign same template that is assigned to home page. Still same issue is appearing. Please see this link
https://creativesystems.0438cfd.netsolhost.com/test-2/?amp

• This reply was modified 5 years, 1 month ago by franks123.

@franks123 Using that test page can you try and remove the features that exist on your homepage, such as the popup, slideshow and any other elements?

Hi @jamesosborne
Are you talking about slider banner or sumo heatmap?