Knowledge Base

How to replace Featurebox with Elements


comments: 0
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=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>';