Knowledge Base / Category / JM Elements plugin

JM Elements plugin

The History of Elements Plugin

Custom plugin packed with Gaia or OpenMind themes

CMS e107 is managing content very well. But you need to be an advanced user not to get lost in custom pages, menus, areas, layouts and other terms.Everything that this plugin does, you can do with e107 itself. This plugin just saves time, and site development is quicker with it.
I have this idea from my first theme for somebody. Everything was correct, site admin just wasn't able to customize anything, and they never got how chapter menus work. And I created some theme plugin with almost each my theme, but I wanted one solution for all my themes. It was hard to manage them. Somewhere on YTB is my video about content blocks plugin idea... 
Then AppStrap theme came, and AppStrap plugin was the first working element plugin. But I hit next limit with variable layouts. Then I got an idea with DNG theme, and I created the custom layout plugin.
And everything this came together while working on Gaia theme by Creative Tim.

Elements with your own theme

How to use it with your own theme

 Next text is just shortcut list of needed things to do. It supposes that you know how JM Elements works.

1. you have a theme without elements

2. install plugin

3. if you have installed elements from other theme, backup them and delete them (if you don't want to try them and you are creating your own ones)

4. create folder elements inside theme folder (for your own options files. otherwise you can use default ones)

5. create jmelements folder inside template folder with file theme_templates.php.  Create there at least one template key $THEME_TEMPLATE['yourkey']

6. add new element in admin area, set key (mode), select data set (option file) and template (template key)

7. test shortcode and play with the template. It's all

 

Extending theme with elements

How to extend theme packed already with elements

 Next text is just shortcut list of needed things to do. It supposes that you know how JM Elements works.

 You can create your own options and your own templates. If you don't want override already existing files, you should create folder custom inside elements and templates folder.

Rules for options are:

- 1. set - default options from plugin itself (folder default in plugin)

- 2. set - theme options from theme (folder elements in theme)

- 3. set - custom theme options from theme (folder elements/custom in theme)

Rules for templates are:

- 1. set - default template from plugin itself (folder templates, file default_template, array name $DEFAULT_TEMPLATE) -  this can be overridden by copying to theme folder. No merging. 

- 2. set  - theme template from theme itself (folder templates/jmelements, file theme_template, array name $THEME_TEMPLATE)

- 3. set - custom theme templates (folder templates/jmelements, file custom_template, array name $CUSTOM_TEMPLATE)

Inside template folders are other template files. They are used for dropdown options for element fields. They can be overridden standard way with theme templates. Prepacked ones are:

textcolour_template 

$TEXTCOLOUR_TEMPLATE[''] = '';
$TEXTCOLOUR_TEMPLATE['text-primary'] = 'text-primary';
$TEXTCOLOUR_TEMPLATE['text-secondary'] = 'text-secondary';
$TEXTCOLOUR_TEMPLATE['text-success'] = 'text-success';
$TEXTCOLOUR_TEMPLATE['text-warning'] = 'text-warning';
$TEXTCOLOUR_TEMPLATE['text-info'] = 'text-info';
$TEXTCOLOUR_TEMPLATE['text-light'] = 'text-light';

It has to be done this way because in the admin area you are able to work only with first key of frontend templates. 

 

How to replace Featurebox with Elements

There are available bootstrap 4 carousels with the new Material theme I am working on.
I really tried to use Featurebox for this, but I can't get it working. I spent hours with the debugging problem but I wasn't able to solve it. So I decided to use Elements at the end.

How to do it?


All changes are inside the theme folder.

1. create new file option_featurebox.php inside folder elements (the easier - just copy already existing element). Use the same array name as file name - in this case : "featurebox"

2. set fields. Not used fields just set value in use as false, add new fields if it's needed. All settings are very similar to admin UI fields.

3. add template array

4. go to admin, add new element with code "featurebox" and select template

5. in fact 2 templates are needed. There are 2 cycles - for indicators and for items themselves. Just copy the code from HTML template.

Add this to homepage layout:

{ELEMENTS: mode=featurebox&template=indicators}

{ELEMENTS: mode=featurebox&template=featurebox}

Example of code from template:

$JMELEMENTS_TEMPLATE['indicators']['start'] = '
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">';
$JMELEMENTS_TEMPLATE['indicators']['item'] = 
'<li data-target="#carouselIndicators" data-slide-to={ITEM_ID}0" class="active"></li>';
$JMELEMENTS_TEMPLATE['indicators']['end'] = '</ol>';
$JMELEMENTS_TEMPLATE['featurebox']['start'] = ' 
<div class="carousel-inner">';
$JMELEMENTS_TEMPLATE['featurebox']['item'] = '
{SETIMAGE: w=0&h=0&crop=1}
<div class="carousel-item {ITEM_ACTIVE}">
<div class="page-header header-filter" style="background-image: url({ITEM_BGIMAGE});">
<div class="container">
<div class="row">
<div class="{ITEM_CLASS}">
<h1 class="title">{ITEM_TITLE}</h1>
<h4>{ITEM_DESC}</h4>
<br>
</div>
</div>
</div>
</div>
</div>';
$JMELEMENTS_TEMPLATE['featurebox']['end'] = '
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>';