$7.53

How to make AMP pages with symfony

Ask a question+
2

I’m making a Symfony based project that should have AMP standard pages. As AMP requires all CSS should be put in style meta tag directly. I have assets and encore, which builds all necessary CSS files (SCSS as well). So what is the correct way to import content of generated CSS file into my twig template?

Vazgen Manukyan 610
add comment

1 Answer

0

Hey.

Thre are quite a few gotchas you should be aware of which are not so obvious at the moment.

Putting the style inline is a minor issue and since you are using encore you could create a twig extension able to render the stylesheets. I cannot recall how I did this few years ago but I was using assetic in combination with twig extension I think. If I still have the source code I’ll update the answer.

The hard part:
User generated content. As you’ll discover rendering images and videos in AMP markup is ridiculous since you would have to know the width and height in advance. That is cool if you are only having static assets and passing it through size filter but most likely you would have user generated text with all sorts of image sizes and for that my friend you would need to write another twig extension/filter use the DomCrawler component to extract the images and videos calculate their dimensions and put them back in text with proper markup. Do not use regular expresions for this, you’ll have one more problem to solve.

Of course this might not be your case and you have controll over the media content.

Routing:
My take was to prefix existing routes with AMP and have the router listener to resolve to the AMP controller.

Metatags:
Another twig extension. One for generating AMP route, second for generating normal route.

NOTE:
If you have newrelic extension on the server make sure you disable it before returning the response.

Hopefully you’ll get something out of this answer. I’ll update it with more detailed description or code snippets.

add comment

Your Answer