Have a look atI have an articles add-on that I wrote that I would like to use with amp. How do I use my own .less files with this add-on? For example, when viewing an article I hide the page title and instead display it within a h1 within the article. Right now my amp pages on articles look pretty bad.
amp_style_compatibility.less
for examples on how it is done with current other addons.amp_extra.less
tho so you don't get merge conflicts the next time some compatibility it added there Thanks. Is is possible to turn off amp for certain pages? For example, I don't know if it makes sense to use amp for a list of articles but the articles instead.Have a look atamp_style_compatibility.less
for examples on how it is done with current other addons.
I would suggest that you add your changes toamp_extra.less
tho so you don't get merge conflicts the next time some compatibility it added there
I guess on that note, how do I prevent the css from being used except on certain templates? The is_addon function appears to apply the code to all pages if the add-on is enabled. I only want the changes applied to my article templates. Is there something I can add to my article add-on?Have a look atamp_style_compatibility.less
for examples on how it is done with current other addons.
I would suggest that you add your changes toamp_extra.less
tho so you don't get merge conflicts the next time some compatibility it added there
I think currently only possible to disable it with the "Disable AMP for Forum/Node pages" option, but I guess that is not going to do what you want?Thanks. Is is possible to turn off amp for certain pages? For example, I don't know if it makes sense to use amp for a list of articles but the articles instead.
Hmm that I haven't really investigated, but the AMP processor strips out unused CSS that won't be needed for the page.I guess on that note, how do I prevent the css from being used except on certain templates? The is_addon function appears to apply the code to all pages if the add-on is enabled. I only want the changes applied to my article templates. Is there something I can add to my article add-on?
!important
statemtents, they will also be stripped out as AMP pages don't allow that.. Might be good to keep in mind if something looks funky My add-on is not a forum/node so disabling that does not accomplish what I am trying to do.I think currently only possible to disable it with the "Disable AMP for Forum/Node pages" option, but I guess that is not going to do what you want?
Hmm that I haven't really investigated, but the AMP processor strips out unused CSS that won't be needed for the page.
Oh and btw, if your custom addon CSS contains!important
statemtents, they will also be stripped out as AMP pages don't allow that.. Might be good to keep in mind if something looks funky
One way I was thinking it could be done is with the selectors for class that is added to pages, e.g.My add-on is not a forum/node so disabling that does not accomplish what I am trying to do.
As far as the css goes, I am trying to hide the page title on my article pages but not hide them on post. I normally accomplish this but adding the css to hide into the .less file my articles page uses.
template-forum_list
, but I now realized that the AMP addon doesn't add that class With this fix release the AMP pages have atemplate-template_name
class added to thehtml
element. e.g.template-amp_thread_view
that can be used for specific styling rules on certain pages.
.template-amp_something
selector to hide the titles or whatever you want on certain pages .template-amp_thread_view_type_question .p-title {
display: none;
}
html
-element class Oh, wow this is awesome. Thank you so much.@AndrewSimm you should now be able to utilize the.template-amp_something
selector to hide the titles or whatever you want on certain pages
something like this would hide the title on a question thread on AMP:
CSS:.template-amp_thread_view_type_question .p-title { display: none; }
To find out the template you should be able to simply open the page for your addon modification and look at thehtml
-element class
AMP doesn't allow much custom JS so it is stripped out to prevent validation errors.. depending on the complexity of the JS script it might be possible to acheive the same with AMPs limited JS.. Is the addon some public one or a self made one?@mazzly I have an ads add-on that I use to insert ads between paragraphs. This template modification modifies my articles add-on page template. The javascript works when not viewing in amp but it appears to be stripped out when viewing the page in amp. Any thought on how to do this?
That makes sense. I guess I am still learning here.AMP doesn't allow much custom JS so it is stripped out to prevent validation errors.. depending on the complexity of the JS script it might be possible to acheive the same with AMPs limited JS.. Is the addon some public one or a self made one?
<xf:if is="{{$xf.visitor.isMemberOf(12)}}">
<xf:else/>
</script>
<xf:js>
var ad1 = document.createElement("div");
var ad2 = document.createElement("div");
var ad3 = document.createElement("div");
var ad4 = document.createElement("div");
ad1.innerHTML = "<center>ad code 1</center>";
ad2.innerHTML = "<center>ad code 2</center>";
ad3.innerHTML = "<center>ad code 3</center>";
ad4.innerHTML = "<center>ad code 4</center>";
var p = document.getElementById("article-insert");
var br = p.getElementsByTagName('br');
br[2].parentNode.insertBefore(ad1.cloneNode(true), br[2].nextSibling);
br[8].parentNode.insertBefore(ad2.cloneNode(true), br[8].nextSibling);
br[14].parentNode.insertBefore(ad3.cloneNode(true), br[14].nextSibling);
br[20].parentNode.insertBefore(ad4.cloneNode(true), br[20].nextSibling);
</xf:js>
</xf:if>
Doesn't look too complicated at least, and seems to be "vanilla JS"That makes sense. I guess I am still learning here.
I have two addons and both are self made. I might release my articles add-on at some point but my ads add-on is really just a bunch of template modifications.
Here is the template modification I perform against my articles add-on article page. Right now
JavaScript:<xf:if is="{{$xf.visitor.isMemberOf(12)}}"> <xf:else/> </script> <xf:js> var ad1 = document.createElement("div"); var ad2 = document.createElement("div"); var ad3 = document.createElement("div"); var ad4 = document.createElement("div"); ad1.innerHTML = "<center>ad code 1</center>"; ad2.innerHTML = "<center>ad code 2</center>"; ad3.innerHTML = "<center>ad code 3</center>"; ad4.innerHTML = "<center>ad code 4</center>"; var p = document.getElementById("article-insert"); var br = p.getElementsByTagName('br'); br[2].parentNode.insertBefore(ad1.cloneNode(true), br[2].nextSibling); br[8].parentNode.insertBefore(ad2.cloneNode(true), br[8].nextSibling); br[14].parentNode.insertBefore(ad3.cloneNode(true), br[14].nextSibling); br[20].parentNode.insertBefore(ad4.cloneNode(true), br[20].nextSibling); </xf:js> </xf:if>
- Pages that are not HTTP 200 and contains
?amp=1
are redirected to the canonical page- The broken link checker shouldn't falsely mark
index.php?
andadmin.php
as broken links anymore
This is actually one of my favorite features of this add-on, my site is quite old as well, and it allows me to clean up my broken links.I hate the errors the bot spits out for broken links. My forum is 20 years old of course old posts have broken links.
I don’t want to edit the posts again it’s a living history book.This is actually one of my favorite features of this add-on, my site is quite old as well, and it allows me to clean up my broken links.
We use essential cookies to make this site work, and optional cookies to enhance your experience.