[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

Joomla 3.x. How to change a default gallery layout

Hello, this tutorial shows how to change default gallery layout in Joomla templates..

Joomla 3.x. How to change default gallery layout

In some cases you may need to change default gallery layout on your website. In order to do this, you should follow these steps:

  1. Open templates\themeXXXX\html\com_content\category\gallery.php file.

  2. In “gallery.php” file you should find the following code:

    <ul id="grid-list" class="btn-group">
          <li><a class="btn btn-info toGrid active"><i class="fa fa-th-large"></i></a></li>
          <li><a class="btn btn-info toList"><i class="fa fa-bars"></i></a></li>
        </ul>

    Joomla_3.x.How_to_change_default_gallery_layout_1

  3. Swap <li> items around, move class active to the list item to get the following code:

    <ul id="grid-list" class="btn-group">
              <li><a class="btn btn-info toList active"><i class="fa fa-bars"></i></a></li>
          <li><a class="btn btn-info toGrid "><i class="fa fa-th-large"></i></a></li>
        </ul>

    Joomla_3.x.How_to_change_default_gallery_layout_2

  4. In script initialization, on line 222 change:

    layoutMode: 'grid' to  layoutMode: 'list' 

    Joomla_3.x.How_to_change_default_gallery_layout_3

  5. On line 162 change:

    <li class="gallery-item mix mix_all gallery-grid <?php echo $item_hover_style; ?> <?php echo special_chars_replace(mb_strtolower(str_replace(" ","",$item->category_title))); ?>" data-date="<?php echo JHtml::_('date', $this->item->publish_up, 'YmdHis'); ?>" data-name="<?php echo $this->item->title; ?>" data-popularity="<?php echo $this->item->hits; ?>">

    to

    <li class="gallery-item mix mix_all gallery-list <?php echo $item_hover_style; ?> <?php echo special_chars_replace(mb_strtolower(str_replace(" ","",$item->category_title))); ?>" data-date="<?php echo JHtml::_('date', $this->item->publish_up, 'YmdHis'); ?>" data-name="<?php echo $this->item->title; ?>" data-popularity="<?php echo $this->item->hits; ?>">

    Joomla_3.x.How_to_change_default_gallery_layout_4

Now default gallery layout is changed.

Joomla_3.x.How_to_change_default_gallery_layout_5

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to change default gallery layout