#77 - flex box based gallery layout

inc/classes/BxDolTemplate.php

@@ -350,7 +350,6 @@ class BxDolTemplate extends BxDol implements iBxDolSingleton
             'functions.js',
             'jquery.webForms.js',
             'jquery.dolPopup.js',
-            'elementQuery.min.js',
             'marka/marka.min.js',
         ));
 

modules/base/text/classes/BxBaseModTextSearchResult.php

@@ -25,6 +25,9 @@ class BxBaseModTextSearchResult extends BxBaseModGeneralSearchResult
         $this->sUnitTemplate = $this->aUnitViews[$this->sUnitViewDefault];
         if (isset($this->aUnitViews[bx_get($this->sUnitViewParamName)]))
             $this->sUnitTemplate = $this->aUnitViews[bx_get($this->sUnitViewParamName)];
+
+        if ('unit_gallery.html' == $this->sUnitTemplate)
+            $this->addContainerClass (array('bx-def-margin-neg', 'bx-base-text-unit-gallery-wrapper'));
     }
 
     function getDesignBoxMenu ()

modules/base/text/classes/BxBaseModTextTemplate.php

@@ -72,6 +72,7 @@ class BxBaseModTextTemplate extends BxBaseModGeneralTemplate
                     'summary_attr' => bx_html_attribute($sSummaryPlain),
                     'content_url' => $sUrl,
                     'thumb_url' => $sPhotoThumb ? $sPhotoThumb : '',
+                    'strecher' => str_repeat('      ', 40),
                 ),
             ),
             'bx_if:no_thumb' => array (
@@ -79,6 +80,7 @@ class BxBaseModTextTemplate extends BxBaseModGeneralTemplate
                 'content' => array (
                     'content_url' => $sUrl,
                     'summary_plain' => $sSummaryPlain,
+                    'strecher' => mb_strlen($sSummaryPlain) > 240 ? '' : str_repeat('      ', round((240 - mb_strlen($sSummaryPlain)) / 6)),
                 ),
             ),
         );

modules/base/text/template/css/main.css

@@ -35,6 +35,10 @@
 .bx-base-text-unit-gallery .bx-base-text-unit-thumb {
     float:none;
     line-height:1.25em;
+    background-size:cover;
+    background-position:center center;
+    display:table;
+    width:100%;
 }
 
 .bx-base-text-unit-gallery h2 {
@@ -51,6 +55,86 @@
     float:left;
 }
 
+.bx-base-text-unit-strecher {
+    visibility: hidden;
+}
+
+
+/* flexbox */
+
+.bx-base-text-unit-gallery-wrapper {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+
+    /* makes all items on a row equal height */
+    -webkit-box-align: stretch;
+    -webkit-align-items: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+
+    /* wrap onto the next line rather than stretching or shrinking */
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+
+    /* tells flexbox to start items from the left */
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    plex-pack: start;
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+}
+
+.bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+
+    -webkit-box-flex: 0;
+
+    -webkit-flex: 0 0 100%;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+
+    overflow:hidden;
+}
+
+@media (min-width:533px) and (max-width:720px) {
+    .bx-layout-column-half .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
+    .bx-layout-column-thin .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
+        -webkit-flex: 0 0 49.8%;
+        -ms-flex: 0 0 49.8%;
+        flex: 0 0 49.8%;
+    }
+}
+
+@media (min-width:533px) and (max-width:1024px) {
+    .bx-layout-column-wide .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
+    #sys_search_results .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
+    .bx-layout-column-fullwidth .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
+        -webkit-flex: 0 0 49.8%;
+        -ms-flex: 0 0 49.8%;
+        flex: 0 0 49.8%;
+    }
+}
+
+@media (min-width:1024px) {
+    .bx-layout-column-wide .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
+        -webkit-flex: 0 0 49.8%;
+        -ms-flex: 0 0 49.8%;
+        flex: 0 0 49.8%;
+    }
+    #sys_search_results .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
+    .bx-layout-column-fullwidth .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
+        -webkit-flex: 0 0 33.25%;
+        -ms-flex: 0 0 33.25%;
+        flex: 0 0 33.25%;
+    }
+}
+
 /* view page */
 
 .bx-base-text-entity-content p:first-child,

modules/base/text/template/unit_gallery.html

@@ -1,12 +1,20 @@
 <div class="bx-base-text-unit bx-base-text-unit-gallery bx-def-gal-unit-size bx-def-padding">
+<div>
 
     <bx_if:thumb>
-        <a href="__content_url__"><img class="bx-base-text-unit-thumb bx-def-gal-img-size bx-def-round-corners bx-def-color-bg-box bx-def-font-middle" alt="__summary_attr__" src="__thumb_url__" /></a>
+        <a href="__content_url__" title="__summary_attr__">
+            <div class="bx-base-text-unit-thumb bx-def-gal-div-size bx-def-round-corners bx-def-color-bg-box bx-def-font-middle" style="background-image:url(__thumb_url__)">
+                <div class="bx-base-text-unit-strecher">__strecher__</div>
+            </div>
+        </a>
     </bx_if:thumb>
 
     <bx_if:no_thumb>
         <div class="bx-def-gal-img-column">
-            <div class="bx-base-text-unit-no-thumb bx-def-gal-div-size bx-def-round-corners bx-def-color-bg-box bx-def-font-middle bx-def-font-grayed bx-def-padding bx-def-box-sizing">__summary_plain__</div>
+            <div class="bx-base-text-unit-no-thumb bx-def-gal-div-size bx-def-round-corners bx-def-color-bg-box bx-def-font-middle bx-def-font-grayed bx-def-padding bx-def-box-sizing">
+                __summary_plain__
+                <div class="bx-base-text-unit-strecher">__strecher__</div>
+            </div>
         </div>
     </bx_if:no_thumb>
 
@@ -21,3 +29,4 @@
     </div>
 
 </div>
+</div>

modules/boonex/posts/classes/BxPostsSearchResult.php

@@ -119,13 +119,6 @@ class BxPostsSearchResult extends BxBaseModTextSearchResult
         $this->setProcessPrivateContent(false);
     }
 
-    function displayResultBlock ()
-    {
-        $s = parent::displayResultBlock ();
-        $s = '<div class="bx-posts-wrapper ' . ('unit_gallery.html' == $this->sUnitTemplate ? 'bx-def-margin-neg bx-clearfix' : '') . '">' . $s . '</div>';
-        return $s;
-    }
-
     function getAlterOrder()
     {
         $aSql = array();

modules/boonex/posts/install/config.php

@@ -58,7 +58,8 @@ $aConfig = array(
      * Transcoders.
      */
     'transcoders' => array(
-		'bx_posts_preview'
+		'bx_posts_preview',
+        'bx_posts_gallery',
     ),
 
     /**

modules/boonex/posts/install/sql/enable.sql

@@ -12,7 +12,7 @@ SET @iCategId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options` (`name`, `value`, `category_id`, `caption`, `type`, `check`, `check_error`, `extra`, `order`) VALUES
 ('bx_posts_summary_chars', '700', @iCategId, '_bx_posts_option_summary_chars', 'digit', '', '', '', 1),
-('bx_posts_plain_summary_chars', '200', @iCategId, '_bx_posts_option_plain_summary_chars', 'digit', '', '', '', 2),
+('bx_posts_plain_summary_chars', '240', @iCategId, '_bx_posts_option_plain_summary_chars', 'digit', '', '', '', 2),
 ('bx_posts_per_page_browse', '12', @iCategId, '_bx_posts_option_per_page_browse', 'digit', '', '', '', 10),
 ('bx_posts_rss_num', '10', @iCategId, '_bx_posts_option_rss_num', 'digit', '', '', '', 20);
 

modules/boonex/posts/install/sql/install.sql

@@ -129,10 +129,12 @@ INSERT INTO `sys_objects_storage` (`object`, `engine`, `params`, `token_life`, `
 ('bx_posts_photos_resized', 'Local', '', 360, 2592000, 3, 'bx_posts_photos_resized', 'allow-deny', 'jpg,jpeg,jpe,gif,png', '', 0, 0, 0, 0, 0, 0);
 
 INSERT INTO `sys_objects_transcoder` (`object`, `storage_object`, `source_type`, `source_params`, `private`, `atime_tracking`, `atime_pruning`, `ts`) VALUES 
-('bx_posts_preview', 'bx_posts_photos_resized', 'Storage', 'a:1:{s:6:"object";s:14:"bx_posts_files";}', 'no', '1', '2592000', '0');
+('bx_posts_preview', 'bx_posts_photos_resized', 'Storage', 'a:1:{s:6:"object";s:14:"bx_posts_files";}', 'no', '1', '2592000', '0'),
+('bx_posts_gallery', 'bx_posts_photos_resized', 'Storage', 'a:1:{s:6:"object";s:14:"bx_posts_files";}', 'no', '1', '2592000', '0');
 
 INSERT INTO `sys_transcoder_filters` (`transcoder_object`, `filter`, `filter_params`, `order`) VALUES 
-('bx_posts_preview', 'Resize', 'a:4:{s:1:"w";s:3:"300";s:1:"h";s:3:"200";s:11:"crop_resize";s:1:"1";s:10:"force_type";s:3:"jpg";}', '0');
+('bx_posts_preview', 'Resize', 'a:4:{s:1:"w";s:3:"300";s:1:"h";s:3:"200";s:11:"crop_resize";s:1:"1";s:10:"force_type";s:3:"jpg";}', '0'),
+('bx_posts_gallery', 'Resize', 'a:1:{s:1:"w";s:3:"960";}', '0');
 
 -- FORMS
 

modules/boonex/posts/install/sql/uninstall.sql

@@ -8,9 +8,9 @@ DROP TABLE IF EXISTS `bx_posts_posts`, `bx_posts_files`, `bx_posts_photos_resize
 DELETE FROM `sys_objects_storage` WHERE `object` = 'bx_posts_files' OR `object` = 'bx_posts_photos_resized';
 DELETE FROM `sys_storage_tokens` WHERE `object` = 'bx_posts_files' OR `object` = 'bx_posts_photos_resized';
 
-DELETE FROM `sys_objects_transcoder` WHERE `object` = 'bx_posts_preview';
-DELETE FROM `sys_transcoder_filters` WHERE `transcoder_object` = 'bx_posts_preview';
-DELETE FROM `sys_transcoder_images_files` WHERE `transcoder_object` = 'bx_posts_preview';
+DELETE FROM `sys_objects_transcoder` WHERE `object` IN('bx_posts_preview', 'bx_posts_gallery');
+DELETE FROM `sys_transcoder_filters` WHERE `transcoder_object` IN('bx_posts_preview', 'bx_posts_gallery');
+DELETE FROM `sys_transcoder_images_files` WHERE `transcoder_object` IN('bx_posts_preview', 'bx_posts_gallery');
 
 -- FORMS
 

template/_row_1_column.html

@@ -1,5 +1,5 @@
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-1-column-column1">
+        <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>

template/css/default.less

@@ -483,34 +483,31 @@ h3,
     .padding(3px);
 }
 
+
 .bx-def-gal-img-column {
     .column-width-raw(100%);
 }
+
 .bx-def-gal-img-size {
-    max-width:100%;
-    height:auto;
+    .width(@bx-size-gallery-img-width);
+    .height(@bx-size-gallery-img-height);
 }
+
 .bx-def-gal-div-size {
-    max-width:100%;
-    .min-height(@bx-size-gallery-img-height);
+    width:100%;
+    .height(@bx-size-gallery-img-height);
 }
 .bx-def-gal-unit-column {
     .column-width-raw(100%);
 }
 .bx-def-gal-unit-size {
     display:inline-block;
-    width:100%;
+    width:100%; 
     height:auto;
     vertical-align:top;
     overflow:hidden;
     .box-sizing();
 }
-div.bx-search-result-block[min-width~="480px"][max-width~="720px"] .bx-def-gal-unit-size {
-    width:50%;
-}
-div.bx-search-result-block[min-width~="720px"] .bx-def-gal-unit-size {
-    width:33.3%;
-}
 
 /* z-index */
 

template/layout_1_column.html

@@ -1,5 +1,5 @@
 <!-- layout 1 column [ start ] -->
-<div class="bx-layout-wrapper bx-layout-1-column">
+<div class="bx-layout-wrapper bx-layout-1-column bx-layout-column-fullwidth">
     <bx_include_auto:_row_1_column.html />
 </div>
 <!-- layout 1 column [  end  ] -->

template/layout_2_columns.html

@@ -1,12 +1,12 @@
 <!-- layout 2 columns [ start ] -->
 <div class="bx-layout-wrapper bx-layout-2-columns">
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-2-columns-column1">
+        <div class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half">
             <div class="bx-layout-cell bx-def-padding-right" id="bx-layout-cell-1">
                 __cell_1__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-2-columns-column2">
+        <div class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half">
             <div class="bx-layout-cell bx-def-padding-left" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_3_columns.html

@@ -1,17 +1,17 @@
 <!-- layout 3 columns [ start ] -->
 <div class="bx-layout-wrapper bx-layout-3-columns">
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-3-columns-column1">
+        <div class="bx-layout-col bx-layout-3-columns-column1 bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-right" id="bx-layout-cell-1">
                 __cell_1__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-3-columns-column2">
+        <div class="bx-layout-col bx-layout-3-columns-column2 bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-leftright" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-3-columns-column3">
+        <div class="bx-layout-col bx-layout-3-columns-column3 bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-left" id="bx-layout-cell-3">
                 __cell_3__
             </div>

template/layout_bar_left.html

@@ -1,12 +1,12 @@
 <!-- layout bar left [ start ] -->
 <div class="bx-layout-wrapper bx-layout-bar-left">
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-bar-left-bar">
+        <div class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-right" id="bx-layout-cell-1">
                 __cell_1__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-bar-left-content">
+        <div class="bx-layout-col bx-layout-bar-left-content bx-layout-column-wide">
             <div class="bx-layout-cell bx-def-padding-left" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_bar_right.html

@@ -1,12 +1,12 @@
 <!-- layout bar right [ start ] -->
 <div class="bx-layout-wrapper bx-layout-bar-right">
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-bar-right-content">
+        <div class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide">
             <div class="bx-layout-cell bx-def-padding-right" id="bx-layout-cell-1">
                 __cell_1__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-bar-right-bar">
+        <div class="bx-layout-col bx-layout-bar-right-bar bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-left" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_bottom_area_2_columns.html

@@ -2,12 +2,12 @@
 <div class="bx-layout-wrapper bx-layout-top-area-2-columns">
 
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-2-columns-column1">
+        <div class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half">
             <div class="bx-layout-cell bx-def-padding-right" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-2-columns-column2">
+        <div class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half">
             <div class="bx-layout-cell bx-def-padding-left" id="bx-layout-cell-3">
                 __cell_3__
             </div>

template/layout_top_area_2_columns.html

@@ -4,12 +4,12 @@
     <bx_include_auto:_row_1_column.html />
 
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-2-columns-column1">
+        <div class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half">
             <div class="bx-layout-cell bx-def-padding-right" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-2-columns-column2">
+        <div class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half">
             <div class="bx-layout-cell bx-def-padding-left" id="bx-layout-cell-3">
                 __cell_3__
             </div>

template/layout_top_area_3_columns.html

@@ -4,17 +4,17 @@
     <bx_include_auto:_row_1_column.html />
 
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-3-columns-column1">
+        <div class="bx-layout-col bx-layout-3-columns-column1 bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-right" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-3-columns-column2">
+        <div class="bx-layout-col bx-layout-3-columns-column2 bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-leftright" id="bx-layout-cell-3">
                 __cell_3__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-3-columns-column3">
+        <div class="bx-layout-col bx-layout-3-columns-column3 bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-left" id="bx-layout-cell-4">
                 __cell_4__
             </div>

template/layout_top_area_bar_left.html

@@ -4,12 +4,12 @@
     <bx_include_auto:_row_1_column.html />
 
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-bar-left-bar">
+        <div class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-right" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-bar-left-content">
+        <div class="bx-layout-col bx-layout-bar-left-content bx-layout-column-wide">
             <div class="bx-layout-cell bx-def-padding-left" id="bx-layout-cell-3">
                 __cell_3__
             </div>

template/layout_top_area_bar_right.html

@@ -4,12 +4,12 @@
     <bx_include_auto:_row_1_column.html />
 
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-bar-right-content">
+        <div class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide">
             <div class="bx-layout-cell bx-def-padding-right" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-bar-right-bar">
+        <div class="bx-layout-col bx-layout-bar-right-bar bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-left" id="bx-layout-cell-3">
                 __cell_3__
             </div>

template/layout_topbottom_area_2_columns.html

@@ -4,12 +4,12 @@
     <bx_include_auto:_row_1_column.html />
 
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-2-columns-column1">
+        <div class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-right" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-2-columns-column2">
+        <div class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-thin">
             <div class="bx-layout-cell bx-def-padding-left" id="bx-layout-cell-3">
                 __cell_3__
             </div>
@@ -17,7 +17,7 @@
     </div>
 
     <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-1-column-column1">
+        <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
             <div class="bx-layout-cell" id="bx-layout-cell-4">
                 __cell_4__
             </div>

template/scripts/BxBaseConfig.php

@@ -30,8 +30,6 @@ class BxBaseConfig extends BxDol implements iBxDolSingleton
 
             'bx-size-gallery-img-width' => '300px',
             'bx-size-gallery-img-height' => '200px',
-            'bx-size-gallery-unit-width' => '300px',
-            'bx-size-gallery-unit-height' => '320px',
 
             'bx-color-page' => '#fff',
             'bx-color-block' => '#fff',

template/scripts/BxBaseSearchResult.php

@@ -26,6 +26,8 @@ class BxBaseSearchResult extends BxDolSearchResult
 
     protected $sCenterContentUnitSelector = false;
 
+    protected $aContainerClasses = array('bx-search-result-block', 'bx-def-margin-bottom', 'bx-clearfix');
+
     function __construct($oFunctions = false)
     {
         parent::__construct();
@@ -55,7 +57,8 @@ class BxBaseSearchResult extends BxDolSearchResult
                 $sCode .= $this->displaySearchUnit($aValue);
 
             $sSearchResultBlockId = 'bx-search-result-block-' . rand(0, PHP_INT_MAX);
-            $sCode = '<div id="' . $sSearchResultBlockId . '" class="bx-search-result-block bx-def-margin-bottom bx-clearfix">' . $sCode . '</div>';
+            $sClasses = implode(' ', $this->aContainerClasses);
+            $sCode = '<div id="' . $sSearchResultBlockId . '" class="' . $sClasses . '">' . $sCode . '</div>';
 
             if (!$this->_bLiveSearch && $this->sCenterContentUnitSelector) {
                 $sCode .= "
@@ -77,7 +80,7 @@ class BxBaseSearchResult extends BxDolSearchResult
         if ($this->id) {
             $sTitle = _t($this->aCurrent['title']);
         	$sCode = $this->oFunctions->designBoxContent($sTitle, $sContent, $this->iDesignBoxTemplate, $sMenu);
-            return '<div class="bx-page-block-container bx-def-padding-topbottom bx-clearfix" id="bx-page-block-' . $this->id . '">' . $sCode . '</div>';
+            return '<div class="bx-page-block-container bx-search-results bx-def-padding-topbottom bx-clearfix" id="bx-page-block-' . $this->id . '">' . $sCode . '</div>';
         }
 
         return array(        	
@@ -293,6 +296,34 @@ class BxBaseSearchResult extends BxDolSearchResult
     {
         $this->iDesignBoxTemplate = $i;
     }
+
+    /**
+     * Add class to search result container 
+     * @param $mixed CSS class name string or array of classes
+     */
+    function addContainerClass ($mixed)
+    {
+        if (!is_array($mixed))
+            $mixed = array($mixed);
+
+        foreach ($mixed as $s)
+            if (false === array_search($s, $this->aContainerClasses))
+                $this->aContainerClasses[] = $s;
+    }
+
+    /**
+     * Remove class from search result container 
+     * @param $mixed CSS class name string or array of classes
+     */
+    function removeContainerClass ($mixed)
+    {
+        if (!is_array($mixed))
+            $mixed = array($mixed);
+
+        foreach ($mixed as $s)
+            if (false !== ($i = array_search($s, $this->aContainerClasses)))
+                unset($this->aContainerClasses[$i]);
+    }
 }
 
 /** @} */