Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/drmikecrowe/cmsms_smartysnippets

Develop new smarty block and functions for complex HTML used in modern themes
https://github.com/drmikecrowe/cmsms_smartysnippets

Last synced: 13 days ago
JSON representation

Develop new smarty block and functions for complex HTML used in modern themes

Host: GitHub
URL: https://github.com/drmikecrowe/cmsms_smartysnippets
Owner: drmikecrowe
License: gpl-2.0
Created: 2015-02-28T16:39:10.000Z (almost 10 years ago)
Default Branch: master
Last Pushed: 2015-02-28T18:09:11.000Z (almost 10 years ago)
Last Synced: 2024-11-05T21:14:13.436Z (2 months ago)
Language: PHP
Size: 274 KB
Stars: 0
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# cmsms_smartysnippets
Develop new smarty block and functions for complex HTML used in modern themes

### What Does This Do?

Smarty helper functions to assist in complex theme implementation. Allows you to define dynamic Smarty snippets that can be integrated in your content. Best of all, these snippets are TinyMCE compatible, so you can enter complex HTML inside page content and not loose attributes.

### Screenshots

* [Screenshot #1](https://raw.githubusercontent.com/drmikecrowe/cmsms_smartysnippets/master/SmartySnippets1.png)
* [Screenshot #2](https://raw.githubusercontent.com/drmikecrowe/cmsms_smartysnippets/master/SmartySnippets2.png)

### Usage Instructions:

* Each snippet is prefixed with "ss_" to avoid naming conflicts
* Two different types of snippets are supported:

* Blocks: Requires 2 tags, and open/close, such as:

````{ss_example ...} content inside block {/ss_example} ````

* Functions: Single tag with all paramters, such as:

```` {ss_glyphicon icon="globe"}Here's a globe ````

* A snippet should have a single HTML element wrapping your content. For example, make sure that your top-level HTML attribute wraps your contact in something like:

```` your template ````

* Attributes: The following parameters become attributes of your tag:

* 'id', 'name', 'autocomplete', 'autocorrect', 'autofocus', 'autosuggest', 'checked', 'dirname', 'disabled', 'tabindex', 'list', 'max', 'maxlength', 'min', 'multiple', 'novalidate', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'step', 'data\_target', 'data\_toggle'

* Two smarty variables are created from these parameters:

* {$attributes} -- All the parameters above, concatenated into a single string
* {$attributes_without_id} -- Same as above, but without the id (useful when you insert your id manually)

* Smarty Variables:

* All other parameters are converted to smarty parameters. See below for examples
* NOTE: In order to support attributes with "-" (such as data-target, data-toggle), attribute names using "\_" are converted to "-". So, your tag may be `{ss_element data_toggle="xxxx"}`, which will result in {$attributes} containing `data-toggle="xxxx"`. Therefore, I recommend NOT using "\_" in your parameters, to simplify this process.

### How Does It Work?

#### Block Example:

You may define blocks of HTML code with parameters, such as elements
from themes. For example, your Block snippet may be a Twitter
Bootstrap panel, such as:

``` HTML

{$content}

```

Then, in your page, you would use this like so:

``` HTML
{ss_panel header="This is my test panel" id="panel_id" class="outer-class" contentclass="content-class"}
This is the content of the panel
{/ss_panel}
```

When rendered, your content will be:

``` HTML

This is the content of the panel

```

#### Function Example:
A function is similar, but doesn't require a closing tag. For instance, this is a real snippet from a recent theme:

``` HTML

{foreach $images as $image_root}
{assign "image" cms_join_path($directory, $image_root)}

{/foreach}

```

Inserted into the page as such:

``` HTML
{ss_carousel images=get_matching_files("uploads/carousel", "png") height="200px" directory="uploads/carousel" class="color parallax" data-stellar-background-ratio="0.5"
style="background-image:url(/uploads/theme/assets/images/preview/slider/parallax_bg.jpg)"}
```

### Included Blocks

* block.row.tpl -- Creates a bootstrap row, such as ```{ss_row}.....{/ss_row}```
* block.column.tpl -- Creates a bootstrap column, such as ```{ss_column}.....{/ss_column}```
* block.div.tpl -- Generic div block. Used when you need to create a hidden div, or something.
* block.panel.tpl -- [Bootstrap panel](http://bootstrapdocs.com/v3.2.0/docs/components/#panels) example
* block.section.tpl -- [HTML5 Section block](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) (seems to be prevalent in many new themes). This shows how to take an HTML block from your newly purchased theme and convert it into a generic tag
* function.carousel.tpl -- Embed [Owl Carousel](http://owlgraphic.com/owlcarousel/) in a page and show all images in a specific image directory in the carousel
* function.glyphicon.tpl -- Quickly embed a [Glyphicon](http://glyphicons.com/)

### Donations

[Donations](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TGALC82DKFEJ4) are appreciated, and would encourage continual improvement of this module.

### Support

As per the GPL, this software is provided as-is. Please read the
text of the license for the full disclaimer.

### Copyright and License

This module has been released under the [GNU Public
License](http://www.gnu.org/licenses/licenses.html#GPL).
You must agree to this license before using the module.

Ecosyste.ms: Awesome

https://github.com/drmikecrowe/cmsms_smartysnippets

Awesome Lists containing this project

README

{$header}

This is my test panel