Adding html snippets with diazo

I made a theme based on plonetheme.barceloneta copying over the original index.html and including ++theme++barceloneta/rules.xml - which turned out to be quite a good solution.

Now for the integration of ad placements from google display network i registered some placeholder viewlets.

My plan now would be adding rules to replace the placeholders with the actual ad server snippets. Diazo should allow me to choose which snippet i want to insert, based on the body class for the section and the identifier of the placeholder.

for example

<replace css:content-children=".section_header_adspace">
    html snippet for section above

problem is that it doesn't work for the placeholder which is registered for IBelowContent

<replace css:content-children=".below_content_adspace">
    html snippet for below content

any advice on how to make that work?


I have just tried:
<replace css:content="#viewlet-below-content-body .documentActions"> <strong>BOOM</strong> </replace>

and it works (I tried with Diazo 1.2.2 on Plone 5 and with Diazo 1.0.5 on Plone 4).

Are you sure about your CSS selector?

1:1 copy from firefox source

<div class="clearfix adspace detail_bottom_adspace">
  <div class="tileItem aditem visualIEFloatFix billboard" id="detail-bottom">{'size': (970, 250), 'format': 'billboard', 'id': 'detail-bottom', 'name': 'detail-bottom'}</div>

diazo rule

<replace css:content-children=".detail_bottom_adspace">
  • is that from your source with ? in your URL ?
  • is this peice of DOM possibly generated by JS ?
1 Like

I guess, you have a problem regarding the order of execution of statements. Maybe IBelowContent is copied from the content to theme before you are making the replacement.

Try placing your replacement rule before you replace the theme's main content area (although the order of statements in a diazo rules file doesn't say much).

And try using method="raw":

<replace method="raw" css:content-children=".below_content_adspace">
    html snippet for below content
1 Like

the viewlet is there with ?
also the rule is green with ?diazo.debug=1
method="raw" doesn't change anything

another rule on the same page does exactly what it should

<replace css:content-children=".detail_header_adspace" xml:id="r35">

and disable that rules doesn't influence the "below content rule"

Sadly, when you have reach this point, the only way I know to sort it out is to analyse the XSL produced by Diazo and try to find out what is the problem:
bin/diazocompiler rules.xml theme.html > out.xsl

(and to test your xsl:
bin/diazorun out.xsl some_content.html

1 Like

i still guess that this has something to do with the order of execution. if the content-area, including the IBelowContent viewlet area is copied before your manipulation of .below_content_adspace is done, your manipulation will of course have no effect.

maybe you can copy your content with a <drop theme-children="THEMECONTENTAREA"/> and a <after theme-children="THEMECONTENTAREA" content-children="CONTENTCONTENTAREA"/>. something like that.

see this for more information:

1 Like

changing the position of the barceloneta/rules.xml include from top to bottom of my rules.xml didn't change a thing.

what did work was to include my snippet to line 62 of the barceloneta/rules.xml

<div class="{$central}">
  <!-- <p class="pull-right visible-xs">
    <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
  </p> -->
  <div class="row">
    <div class="col-xs-12 col-sm-12">
      <xsl:apply-templates css:select="#content" />
  <footer class="row">
    <div class="col-xs-12 col-sm-12">
      <xsl:copy-of css:select="#viewlet-below-content" />

why does the change of order for the inclusion have no effect?
is there a way of doing this without touching the original rules.xml?

1 Like

XSLT is not an imperative procedural language (like python), but a recursive functional language. Yes, it explodes your head if you're spending 99% of your brain time in imperative mode and then have to debug XSLT.

1 Like

I'm kind of aware that XSLT is a different beast... :wink:

From an integrator point of view and in terms of Plone approchability,
shouldn't things like that be possible with Diazo?

So is if there a sane solution to that problem?

Instead of registering a placeholder in IBelowContent, did you try to inject directly with append?

<append css:content="#viewlet-below-content">
    html snippet for section above

(you will need Diazo 1.2.2)

no difference with the append approach...
It seems that the way, the rules for the content area are created don't allow any more fiddling

i'll merge my rules with the ones from barceloneta and add that snippet after

<xsl:copy-of css:select="#viewlet-below-content" />

If anyone can make a suggestion what to change within the original barceloneta rules to allow content changes like this, I would be very happy!

Diazo still leaves me with a bitter aftertaste...

This is how I would expect or wish the includes should work:

  • If there is an include, execute those rules before right away
  • an include could happen before or after my extra rules
  • that would mean each include creates another transform layer (didn't xdv do that somehow?)
  • i don't think it would be much of a performance issue for simple additions
  • more complex projects would have their custom rules anyway

Having multiple transform steps/layers is a nice idea, indeed. But <xsl:include> isn't the way to do that - that's XSL core and cannot be used to create different transform rounds. Diazo is applied via plone.transformchain and for that to work, another diazo transform has to be registered.

What I'm asking myself is, do we really need this method="raw" in ? This makes it effectively impossible to modify the content before it is copied via the <replace> rule.
/cc @ramon @Albert @sneridagh

Hi Johannes,
This is something that I've already found in there when I jump into the theme development. Maybe someone else knows why it's there. Indeed, if it helps in building a bullet proof way of inherit things it's worth to explore what it would mean not to use "raw" in that rule. BTW, this would require testing too.

However, I've always thought (others too) that you should inherit things only when you does not require big changes or big customizations. The barceloneta rules.xml file it's not that big and it's very simple, so it's easy to drop it into your new theme as a start point.

Some also proposed (@simahawk and @MrTango) to use barceloneta practices as a template included in the good known package generators or use bower or npm to pull them. I think it's something worth to explore as well.