I have to implement AMP for some pages/templates in my Umbraco project. Is there a way to globally replace all img-Tags with the amp-img-Tag if e.g. url-param is set to amp? In my Wordpress-Environment I would create a "Hook". Is there something similiar in Umbraco?
What should I pay attention to, if I start with implementation of AMP (besides CSS, JS and image replacements?)
What I do is is the HtmlAgilityPack classes (that Umbraco itself uses) to manipulate the HTML that comes from Rich Text Editors. You can use this to strip out invalid tags (iFrames, embed, object etc). and then also use it to replace img tags with their AMP equivalent.
I think the tutorial doesn't fulfill my need or I didn't get it. I want to replace all images in a template, also for content pages that already exists.
I don't want to add a new AMP Image Media Type. I want to grap the bodyText of a page and replace all img-tag inside if amp is used. Just in the moment the output is rendered.
@Dan Diplo: Can I use this "Html Agility Pack" directly in a Page-Template? Because of the project restrictions I am not able to overwrite a render-Method. I may only adjust the frontend templates.
Hi Nadine. Yes, you can use the HtmlAgilityPack directly in templates - it's in the HtmlAgilityPack namespace - though best practice is to keep logic out of views. In your circumstances I'd look at writing a helper class that takes in the HTML, processes using the htmlAgilityPack and then spits out the AMP HTML.
yeah, logic should always be out of views. But the project founder didn't know this... and I have no local environment/possibility to compile the source code. If you have further information how i can install and deploy a umbraco project with a current environment, please let me know. :-)
Anyway, I found a Helpsers.cshtml that could help me to solve my problem.
I guess the best bet would be to maybe move logic to partial classes. Within a view or partial you can have inline helpers or functions, which would help to break it up into more manageable chunks.
So in a view or partial you can create an inline helper like:
@helper DoSomething(string foo)
{
<p>@foo</p>
}
The call it like:
@DoSomething("umbraco")
In your template.
You can also create functions and even classes in @functions area:
AMP Implementation in Umbraco
Hi,
I have to implement AMP for some pages/templates in my Umbraco project. Is there a way to globally replace all img-Tags with the amp-img-Tag if e.g. url-param is set to amp? In my Wordpress-Environment I would create a "Hook". Is there something similiar in Umbraco?
What should I pay attention to, if I start with implementation of AMP (besides CSS, JS and image replacements?)
Thanks and cheers,
Nadine
What I do is is the HtmlAgilityPack classes (that Umbraco itself uses) to manipulate the HTML that comes from Rich Text Editors. You can use this to strip out invalid tags (iFrames, embed, object etc). and then also use it to replace img tags with their AMP equivalent.
You'll find most of the common tasks in StackOverflow - https://stackoverflow.com/questions/tagged/html-agility-pack
Carole Logan also wrote a nice little tutorial a while ago: http://carolelogan.net/blog/amp-implementation-in-umbraco/
Hope this helps!
Best,
Niels...
Hi,
I think the tutorial doesn't fulfill my need or I didn't get it. I want to replace all images in a template, also for content pages that already exists.
I don't want to add a new AMP Image Media Type. I want to grap the bodyText of a page and replace all img-tag inside if amp is used. Just in the moment the output is rendered.
@Dan Diplo: Can I use this "Html Agility Pack" directly in a Page-Template? Because of the project restrictions I am not able to overwrite a render-Method. I may only adjust the frontend templates.
Cheers,
Nadine
Hi Nadine. Yes, you can use the HtmlAgilityPack directly in templates - it's in the HtmlAgilityPack namespace - though best practice is to keep logic out of views. In your circumstances I'd look at writing a helper class that takes in the HTML, processes using the htmlAgilityPack and then spits out the AMP HTML.
Hi @Dan Diplo,
yeah, logic should always be out of views. But the project founder didn't know this... and I have no local environment/possibility to compile the source code. If you have further information how i can install and deploy a umbraco project with a current environment, please let me know. :-)
Anyway, I found a Helpsers.cshtml that could help me to solve my problem.
Thank you for your advices.
Hi Nadine. I feel your pain!
I guess the best bet would be to maybe move logic to partial classes. Within a view or partial you can have inline helpers or functions, which would help to break it up into more manageable chunks.
So in a view or partial you can create an inline helper like:
The call it like:
In your template.
You can also create functions and even classes in
@functionsarea:Greaaaaaat idea :) I think this is a good compromiss and it will help me.
Thank you!!
is working on a reply...