Embedding Css Grid Markup In Textarea/ckeditor

[Gazley 103]

Hi there,

If I take something like the home page, in the typical PW Home page template, there is a single Body field. 

However, using something like Bootstrap or Foundation, if I want to add some structured Grid markup to say, add a single row with three columns with an image in each column, going into the HTML mode and adding markup is less than ideal.

I've created some PW sites with quite complex templates just to have more flexibility and structure in the generated page. However, this has meant creating quite specific code to interpret and render a page based on a complex template.

It all feels somewhat wrong. What do PW Pros do when they want to provide flexible page layouts that can ideally be changed in the page editor? In this case, the user is competent with HTML and the CSS framework. Is there a recommended approach to doing this without having uber-complex templates and very template-specific code?

Thanks.

[diogo 4,693]

You can use Hanna code to replace shortcodes by html tags, or even create a formatter that turns something like (----------) in a closing and opening div. I suspect that Ryan's new Pagination Textformatter could also be a good fit for you, but I'm not sure what it does exactly yet http://modules.processwire.com/modules/textformatter-pagination/

As for me, I prefer the template way whenever I can.

[Gazley 103]

Thanks diogo! Hanna code might be just what I'm looking for

[jan 17]

Currently I'm using Processwire and Foundation for a web project. Just came to the forums, did a search, found what I need and DONE. Thanks!

[jan 17]

I have problems using the Hanna Code module. It works perfectly without parameters. But if I try to use params it fails. Here is my setup.

I created a Hanna element named: 

open-col-3

In the attributes field I preset my param:

elem=div

My php in the code tab is:

echo '<'.$elem.' class="large-4 columns">';

If I now use the shortcode in the content field of my page [[open-col-3]] it renders to <div class="large-4 columns">

If I try to pass the param like [[open-col-3, elem=section]] or [[open-col-3 elem=section]] it fails and no html is rendered.

Does anyone have an idea why it's not working?

I use PW 2.5.0 with CKeditor. Thanks in advance!!

[cstevensjr 1,693]

The Hanna Code tag is just a shortcut for something that actually is valid Text/HTML, Javascript or PHP code.  You cannot pass anything to the tag (title) itself.  Create valid code and test it out.  Then use the Hanna Code title (tag) for whatever that code does.    Forget about this!

  A Hanna code tag looks like [[hello_world]]. A Hanna code tag with attributes looks like [[hello_world foo=bar" bar="foo]] using HTML style attributes or [[hello_world foo=bar, bar=foo]] using ProcessWire selector style attributes. After installing the module, you define your Hanna codes in Setup > Hanna Code.

 

These Hanna codes that you define can then be entered within your body copy (or other text where you allow) and they will be replaced with the values defined or generated by your Hanna code. A common use case is to embed scripts or other bits of HTML or codes that would usually be stripped out by an editor like TinyMCE. However, Hanna codes can be more than just static snippets--they can be dynamic PHP or Javascript that outputs different things according to the request. PHP-based Hanna codes have access to the entire ProcessWire API.

 

Hanna code accepts named attributes in the tag that can be passed as variables to PHP and Javascript Hanna codes. These attributes can be specified either in HTML attribute format or ProcessWire selector format. In either case, quotes should be used around the attribute value when the value contains whitespace or a comma.

https://processwire.com/talk/topic/3745-hanna-code/

[jan 17]

Sorry, but I don't understand. If I use the preset param (via Basic tab -> Attributes, as mentioned above) it works perfectly! If I try to set it manually/ overwrite it via the shortcode attribute, it does not work.

I also tried to simply echo the passed param inside <p></p>, which does not work either.

Sorry if I missunderstood your reply.

(I also created another seperate Hanna Code close-col to close the opened element and keep my code valide.)

[cstevensjr 1,693]

If I try to pass the param like [[open-col-3, elem=section]] or [[open-col-3 elem=section]] it fails and no html is rendered.

   

if you start with [[open-col-3]] and then think you can add to the Hanna Code tag, as quoted above, without changing the actual underlining code ---- it will never work.  The tag doesn't do the logic, the logic is in the code that you define.

The Hanna Code actually does more than I thought it did, so I retract my comments.  I'm now more impressed with Hanna Code.

Edited September 29, 2014 by cstevensjr

[pwired 1,245]

;

All well explained here by the chief commander:

https://github.com/ryancramerdesign/ProcessHannaCode

[jan 17]

I still don't get the clue. I refer to passing a variable to my php code via the hanna code attribute:

Below is a Hanna code tag named hello_world being passed attributes of foo, bar and foobar. If this were a PHP-based Hanna code, it would receive the variables $foo, $bar and $foobar:

[[hello_world foo=bar" bar="foo" foobar="foo bar]]

I created two hanna codes:

Then I selected "php" and preset the attribute "tag":

On the code tab I echo the preset/ passed value of "tag":

The hanna code renders well as long as I do not try to pass the attribute via hanna code:

This works: [[open-col-3]] (result is: <div class="large-4 columns">)

This does not: [[open-col-3 tag=aside]] (result should be: <aside class="large-4 columns">)

So pleasssssssss tell me where my mistake is!

Thanks so much!!

[cstevensjr 1,693]

Sticking my foot in this one more time.

How about putting the tag=aside in the attribute like you did with the div?

[jan 17]

Thanks for all your efforts cstevensjr!!!!

This is exactly what I'm trying to do. The tag="div" (as you can see on pic 1) is only a default value, if the parameter is not passed. 

No parameter is never passed at all

All these do NOT work and do not render anything out:

• [[open-col-3,tag=div]]
• [[open-col-3, tag=div]]
• [[open-col-3 tag=div]]
• [[open-col-3 tag=div]]
• [[open-col-3 tag=aside]]
• and so on

I'm 99% sure, something with the module is not working correctly. Perhaps the chief commander can say something about it!  (<- this one somehow looks like Ryan, doesn't it?) Perhaps an issue that came within PW 2.5? I'd be really glad for an answer! That would be very kind!

PS: Workaround for now is of course to make specific hanna codes for all occurring case like [[open-col-3-div], [[open-col-3-aside] and so on. Not a very elegant solution…

[kongondo 6,701]

In the attributes, just put tag instead of tag=div Forget this

Rename to opencol3 OR open_col_3 rather than open-col-3.

Then call it as

[[opencol3]] OR [[open_col_3 tag=aside]]

Works for me,   . Seems the hyphens are throwing Hanna off?  Strange..see below

Edit 1:

It seems it is just the name with the hyphens that was throwing Hanna off. So, open-col-3 doesn't work, but opencol3 does. 

Edit 2: So, the instructions below are not entirely correct? Isn't that a hyphen? That first character?

Edited September 29, 2014 by kongondo

[jan 17]

Oh my god!! I trusted so much in PW, I never thought this could be a problem!!!! Thank you a lot kongondo!

And yes it is a hyphen. And it's also proofed in letters:

Problem solved.

[kongondo 6,701]

Haha, I missed that too ....If you can, please file a 'minor bug' report in the HC's GitHub page

[jan 17]

The issue was already reported in February:

https://github.com/ryancramerdesign/ProcessHannaCode/issues/3

I now posted it to the Hanna Code thread:

https://processwire.com/talk/topic/3745-hanna-code/page-10#entry75194