Content / JM Elements plugin / How to replace Featurebox with Elements

How to replace Featurebox with Elements


comments: 0
There is available bootstrap 4 carousel 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 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 inuse as false, add new fields if it's needed. All settings is 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 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=0" class="active"></li>';
$JMELEMENTS_TEMPLATE['indicators']['end'] =  '</ol>';

$JMELEMENTS_TEMPLATE['featurebox']['start'] =  '  
 <div class="carousel-inner">';
$JMELEMENTS_TEMPLATE['featurebox']['item'] =  '

<div class="carousel-item ">
  <div class="page-header header-filter" style="background-image: url();">
    <div class="container">
      <div class="row">
        <div class="">
          <h1 class="title"></h1>
          <h4></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>';