Adding html snippets with diazo

agitator · February 10, 2016, 9:34am

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">
  <div>
    html snippet for section above
  </div>
</replace>

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

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

any advice on how to make that work?

ebrehault · February 10, 2016, 10:24am

Hi,

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?

agitator · February 10, 2016, 10:51am

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>
</div>

diazo rule

<replace css:content-children=".detail_bottom_adspace">
  <div>detail-bottom</div>
</replace>

ebrehault · February 10, 2016, 11:06am

is that from your source with ?diazo.off=1 in your URL ?
is this peice of DOM possibly generated by JS ?

thet · February 10, 2016, 11:16am

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">
  <div>
    html snippet for below content
  </div>
</replace>

agitator · February 10, 2016, 11:28am

the viewlet is there with ?diazo.off=1
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">
  <div>detail-header</div>
</replace>

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

ebrehault · February 10, 2016, 12:12pm

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
)

thet · February 10, 2016, 7:57pm

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: http://docs.diazo.org/en/latest/basic.html#order-of-rule-execution

agitator · February 11, 2016, 9:32am

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" />
    </div>
  </div>
  <footer class="row">
    <div class="col-xs-12 col-sm-12">
      <div>
       detail-bottom
      </div>
      <xsl:copy-of css:select="#viewlet-below-content" />
    </div>
  </footer>
</div>

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?

gyst · February 11, 2016, 12:40pm

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. https://msdn.microsoft.com/en-us/library/bb669144.aspx

agitator · February 11, 2016, 1:06pm

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

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?

ebrehault · February 11, 2016, 2:24pm

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

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

(you will need Diazo 1.2.2)

agitator · February 11, 2016, 2:51pm

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...

agitator · February 11, 2016, 3:01pm

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

thet · February 11, 2016, 3:21pm

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 https://github.com/plone/plonetheme.barceloneta/blob/master/plonetheme/barceloneta/theme/rules.xml#L43 ? This makes it effectively impossible to modify the content before it is copied via the <replace> rule.
/cc @ramon @Albert @sneridagh

sneridagh · February 14, 2016, 9:00am

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.