Jump to content
Gazley

Embedding Css Grid Markup In Textarea/ckeditor

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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! :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 by cstevensjr
  • Like 1

Share this post


Link to post
Share on other sites

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:

post-426-0-43596800-1411988622_thumb.png

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

post-426-0-17284500-1411988548_thumb.png

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

post-426-0-24673600-1411988746_thumb.png

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

Share this post


Link to post
Share on other sites

Sticking my foot in this one more time.

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

  • Like 1

Share this post


Link to post
Share on other sites

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! :cool: (<- 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…

Share this post


Link to post
Share on other sites

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?

post-894-0-35839600-1411997584_thumb.png

Edited by kongondo
  • Like 3

Share this post


Link to post
Share on other sites

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:

post-426-0-64666700-1412004784_thumb.jpg

:blink: Problem solved.

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...