Jump to content

Archived

This topic is now archived and is closed to further replies.

solosails

iBox Count number mode - dynamic

Recommended Posts

solosails

Hi,

 

I like the iBox's count mode, but at present, it is pretty limited in its use, is there anyway to make it dynamic so that it could look up number of users, or number of posts, or some other dynamically changing figure?

 

This would be great for the star slider option too.

 

Thanks in advance , Andrew

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Unfortunately, to make the box count dynamic such as getting post count or number of users, would require customizing the section, which isn't something we provide support for. However, you're free to attempt this yourself, just be sure to create a child of that section instead of editing the core code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
solosails

ok, thanks. 1 for the devs to consider perhaps?

 

 

Share this post


Link to post
Share on other sites
solosails

If anyone is interested in this, I have made a mod to the base iBox section to enable the count of users.

 

It only works if you leave the counter option box blank, then it will read the number of total Wordpress users. 

 

If anyone can get it to work so that you can type in USERS or POST or other shortcodes in the count box to chose an option, this would be great!

 

I changed lines 153 and 162

<?php
/*
	Section: iBox
	Author: PageLines
	Author URI: http://www.pagelines.com
	Description: An easy way to create and configure several box type sections at once.
	Class Name: pliBox
	Filter: component
	Loading: active
*/


class pliBox extends PageLinesSection {

	var $default_limit = 4;

	function section_opts(){

		$options = array();

		$options[] = array(

			'title' => __( 'iBox Configuration', 'pagelines' ),
			'key'	=> 'ibox_config',
			'type'	=> 'multi',
			'opts'	=> array(
				array(
					'key'			=> 'ibox_cols',
					'type' 			=> 'count_select',
					'count_start'	=> 1,
					'count_number'	=> 12,
					'default'		=> '4',
					'label' 	=> __( 'Number of Columns for Each Box (12 Col Grid)', 'pagelines' ),
				),
				array(
					'key'			=> 'ibox_media',
					'type' 			=> 'select',
					'opts'		=> array(
						'icon'	 	=> array( 'name' => __( 'Icon Font', 'pagelines' ) ),
						'count'		=> array( 'name' => __( 'Counter', 'pagelines' ) ),
						'image'		=> array( 'name' => __( 'Images', 'pagelines' ) ),
						'text'		=> array( 'name' => __( 'Text Only, No Media', 'pagelines' ) )
					),
					'default'		=> 'icon',
					'label' 	=> __( 'Select iBox Media Type', 'pagelines' ),
				),
				array(
					'key'			=> 'ibox_format',
					'type' 			=> 'select',
					'opts'		=> array(
						'top'		=> array( 'name' => __( 'Media on Top', 'pagelines' ) ),
						'left'	 	=> array( 'name' => __( 'Media at Left', 'pagelines' ) ),
					),
					'default'		=> 'top',
					'label' 	=> __( 'Select the iBox Media Location', 'pagelines' ),
				),
			)

		);

		$options[] = array(
			'key'		=> 'ibox_array',
	    	'type'		=> 'accordion', 
			'col'		=> 2,
			'title'		=> __('iBoxes Setup', 'pagelines'), 
			'post_type'	=> __('iBox', 'pagelines'), 
			'opts'	=> array(
				array(
					'key'		=> 'title',
					'label'		=> __( 'iBox Title', 'pagelines' ),
					'type'		=> 'text'
				),
				array(
					'key'		=> 'text',
					'label'	=> __( 'iBox Text', 'pagelines' ),
					'type'	=> 'textarea'
				),
				array(
					'key'		=> 'link',
					'label'		=> __( 'iBox Link (Optional)', 'pagelines' ),
					'type'		=> 'text'
				),
				array(
					'key'		=> 'class',
					'label'		=> __( 'iBox Class (Optional)', 'pagelines' ),
					'type'		=> 'text'
				),
				array(
					'key'		=> 'icon',
					'label'		=> __( 'Icon (Icon Mode)', 'pagelines' ),
					'type'		=> 'select_icon',
					'help'		=> '<a target="_blank" href="http://fortawesome.github.io/Font-Awesome/icons/">Click here</a> for a complete list of Font Awesome Icons'
				),
				array(
					'key'		=> 'count',
					'label'		=> __( 'Count Number (Counter Mode)', 'pagelines' ),
					'type'		=> 'text_small'
				),
				array(
					'key'		=> 'image',
					'label'		=> __( 'Box Image (Image Mode)', 'pagelines' ),
					'type'		=> 'image_upload'
				),
				array(
					'key'		=> 'color',
					'label'		=> __( 'Icon/Count Color', 'pagelines' ),
					'type'		=> 'color'
				),
				

			)
	    );

		return $options;
	}

	


   function section_template( ) {
	
		// The boxes
		$ibox_array = $this->opt('ibox_array');
		
		$format_upgrade_mapping = array(
			'text'	=> 'ibox_text_%s',
			'title'	=> 'ibox_title_%s',
			'link'	=> 'ibox_link_%s',
			'class'	=> 'ibox_class_%s',
			'image'	=> 'ibox_image_%s',
			'icon'	=> 'ibox_icon_%s'
		); 
		
		$ibox_array = $this->upgrade_to_array_format( 'ibox_array', $ibox_array, $format_upgrade_mapping, $this->opt('ibox_count')); 
		
		// must come after upgrade
		if( !$ibox_array || $ibox_array == 'false' || !is_array($ibox_array) ){
			$ibox_array = array( array(), array(), array() );
		}
		
		// Keep
		$cols = ($this->opt('ibox_cols')) ? $this->opt('ibox_cols') : 4;
		$media_type = ($this->opt('ibox_media')) ? $this->opt('ibox_media') : 'icon';
		$media_format = ($this->opt('ibox_format')) ? $this->opt('ibox_format') : 'top';
		
		$width = 0;
		$output = '';
		$count = 1; 
		
		if( is_array($ibox_array) ){
			
			$boxes = count( $ibox_array );
			$result = count_users();
			foreach( $ibox_array as $ibox ){
	
				$text = pl_array_get( 'text', $ibox, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.'); 
				$title = pl_array_get( 'title', $ibox, 'iBox '. $count); 
				$link = pl_array_get( 'link', $ibox ); 
				$user_class = pl_array_get( 'class', $ibox ); 
				$image = pl_array_get( 'image', $ibox ); 
				$icon = pl_array_get( 'icon', $ibox ); 
				$counter = pl_array_get( 'count', $ibox, $result['total_users']); 
				$color = pl_hash( pl_array_get( 'color', $ibox ), false);
				
	
				$text = sprintf('<div data-sync="ibox_array_item%s_text">%s</div>', $count, $text );
				$title = sprintf('<h4 data-sync="ibox_array_item%s_title">%s</h4>', $count, $title );
				$text_link = ($link) ? sprintf('<div class="ibox-link"><a href="file:///C|/Users/Woody/www/Sole Sails/wp-content/themes/dms/dms/sections/ibox/%s">%s <i class="icon icon-angle-right"></i></a></div>', $link, __('More', 'pagelines')) : '';


				$text_color = ( $color && $color != '' ) ? sprintf( 'color: %s;', $color ) : ''; 

				$format_class = ($media_format == 'left') ? 'media left-aligned' : 'top-aligned';
				$media_class = 'media-type-'.$media_type;

				$style = '';
				$media_html = '';

				if( $media_type == 'icon' ){
				
					if(!$icon || $icon == ''){
						$icons = pl_icon_array();
						$icon = $icons[ array_rand($icons) ];
					}
					
					$background = ($color) ? sprintf('<span class="invert-icon" style="background-color: %s;"></span>', $color) : '';
					$media_html = sprintf( '<i class="iii icon icon-3x icon-%s " style="%s"></i>%s', $icon, $text_color, $background );

				} elseif( $media_type == 'image' ){
				
					$media_html = '';

					$style .= ($image) ? sprintf('background-image: url(%s);', $image) : '';

				} elseif( $media_type == 'count' ){

					$media_html = sprintf('<span class="pl-counter" style="%s">%s</span>', $text_color, $counter);
					

				}
				
				$wrap_class = 'wrap-'.$media_type;

				$media_link = '';
				$media_link_close = '';

				if( $link ){
					$media_link = sprintf('<a href="file:///C|/Users/Woody/www/Sole Sails/wp-content/themes/dms/dms/sections/ibox/%s">',$link);
					$media_link_close = '</a>';
				}

				if($width == 0)
					$output .= '<div class="row fix">';

				
				$output .= sprintf(
					'<div class="span%s ibox %s %s %s fix">
						<div class="ibox-media img">
							%s
							<span class="ibox-icon-border pl-animation pl-appear pl-link pl-link-invert %s" style="%s">
								%s
							</span>
							%s
						</div>
						<div class="ibox-text bd">
							%s
							<div class="ibox-desc">
								%s
								%s
							</div>
						</div>
					</div>',
					$cols,
					$format_class,
					$user_class,
					$wrap_class,
					$media_link,
					$media_class,
					$style,
					$media_html,
					$media_link_close,
					$title,
					$text,
					$text_link
				);

				$width += $cols;

				if($width >= 12 || $count == $boxes){
					$width = 0;
					$output .= '</div>';
				}
				
				
				$count++;
			}

			

		}

		printf('<div class="ibox-wrapper pl-animation-group">%s</div>', $output);
		
		$scopes = array('local', 'type', 'global');
	//	foreach($scopes as $scope)
	//		$this->opt_update( 'ibox_array', false, $scope );

	}
	
	function old_section_template( ) {

			$boxes = ($this->opt('ibox_count')) ? $this->opt('ibox_count') : $this->default_limit;
			$cols = ($this->opt('ibox_cols')) ? $this->opt('ibox_cols') : 3;

			$media_type = ($this->opt('ibox_media')) ? $this->opt('ibox_media') : 'icon';
			$media_format = ($this->opt('ibox_format')) ? $this->opt('ibox_format') : 'top';

			$width = 0;
			$output = '';

			for($i = 1; $i <= $boxes; $i++):

				// TEXT
				$text = ($this->opt('ibox_text_'.$i)) ? $this->opt('ibox_text_'.$i) : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem.';

			$text = sprintf('<div data-sync="ibox_text_%s">%s</div>', $i, $text );
			$user_class = ($this->opt('ibox_class_'.$i)) ? $this->opt('ibox_class_'.$i) : '';

				$title = ($this->opt('ibox_title_'.$i)) ? $this->opt('ibox_title_'.$i) : __('iBox '.$i, 'pagelines');
				$title = sprintf('<h4 data-sync="ibox_title_%s">%s</h4>', $i, $title );

				// LINK
				$link = $this->opt('ibox_link_'.$i);
				$text_link = ($link) ? sprintf('<div class="ibox-link"><a href="file:///C|/Users/Woody/www/Sole Sails/wp-content/themes/dms/dms/sections/ibox/%s">%s <i class="icon icon-angle-right"></i></a></div>', $link, __('More', 'pagelines')) : '';


				$format_class = ($media_format == 'left') ? 'media left-aligned' : 'top-aligned';
				$media_class = 'media-type-'.$media_type;

				$media_bg = '';
				$media_html = '';

				if( $media_type == 'icon' ){
					$media = ($this->opt('ibox_icon_'.$i)) ? $this->opt('ibox_icon_'.$i) : false;
					if(!$media){
						$icons = pl_icon_array();
						$media = $icons[ array_rand($icons) ];
					}
					$media_html = sprintf('<i class="icon icon-3x icon-%s"></i>', $media);

				} elseif( $media_type == 'image' ){

					$media = ($this->opt('ibox_image_'.$i)) ? $this->opt('ibox_image_'.$i) : false;

					$media_html = '';

					$media_bg = ($media) ? sprintf('background-image: url(%s);', $media) : '';

				}

				$media_link = '';
				$media_link_close = '';

				if( $link ){
					$media_link = sprintf('<a href="file:///C|/Users/Woody/www/Sole Sails/wp-content/themes/dms/dms/sections/ibox/%s">',$link);
					$media_link_close = '</a>';
				}

				if($width == 0)
					$output .= '<div class="row fix">';


				$output .= sprintf(
					'<div class="span%s ibox %s %s fix">
						<div class="ibox-media img">
							%s
							<span class="ibox-icon-border pl-animation pl-appear pl-contrast %s" style="%s">
								%s
							</span>
							%s
						</div>
						<div class="ibox-text bd">
							%s
							<div class="ibox-desc">
								%s
								%s
							</div>
						</div>
					</div>',
					$cols,
					$format_class,
					$user_class,
					$media_link,
					$media_class,
					$media_bg,
					$media_html,
					$media_link_close,
					$title,
					$text,
					$text_link
				);

				$width += $cols;

				if($width >= 12 || $i == $boxes){
					$width = 0;
					$output .= '</div>';
				}


			 endfor;

			printf('<div class="ibox-wrapper pl-animation-group">%s</div>', $output);

		}


}

Share this post


Link to post
Share on other sites
solosails

Danny I originally edited the core file to test this, but now I have it working, I restored the core file and tried uploading it as a child version, but dont seem to be able to get it working?

 

Am I right in thinking you simply copy that entire folder /sections/ibox/ into your child theme yes?

 

It doesn't seem to be working for me.

 

Cheers, Andrew

Share this post


Link to post
Share on other sites
solosails

Oh, I think I've done it with a combination of renaming it iBox2 and flushing the cache.

 

Cheers, A

Share this post


Link to post
Share on other sites
solosails

Here's the amended section for anyone interested ..

 

[ptiframe]116-uwmfjj[/ptiframe]

Share this post


Link to post
Share on other sites
Danny

Thanks for sharing. In regards to the section not working when you using a child theme, it is likely that you never clicked on Reload Sections from the Add to Page panel in the DMS toolbar.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
solosails

Hi Danny Ah, yes, that could well be it. Anyway, it is working now. 

 

As I mentioned, if anyone who actually knows what they are doing could extend this hack to make it have a few options available in the section's control panel, like post numbers etc, that would be fantastic.

 

Cheers, A

Share this post


Link to post
Share on other sites

  • Similar Content

    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • Audun MB
      By Audun MB+
      I've added a number option (ie the first box has a 1 next to or above, second box has 2, etc) to iBoxes in DMS (as a custom section), and I'd like that for PL5 Boxes as well. Adding it for iBox was quite easy:
      First this: 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pagelines' ) ), 'count' => array( 'name' => __( 'Counter', 'pagelines' ) ), 'image' => array( 'name' => __( 'Images', 'pagelines' ) ), 'numb' => array( 'name' => __( 'Number', 'pagelines' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pagelines' ) ) And then this } elseif( $media_type == 'numb' ){ $background = ($color) ? sprintf('<span class="invert-icon" style="background-color: %s;"></span>', $color) : ''; $media_html = sprintf( '<i class="iii icon iboks-number" style="%s">%s</i>%s', $text_color, $count, $background ); } And some CSS (though I used the style for icon mostly). iBox already did know which number the box had in the sequence, so adding the number was quite simple. 
      The Boxes code, and PL5 code in general, is a bit mor complex with javascript (with Knockout) and php, and some CSS cheats. It took me a while to figure out how it works, and I'm not sure I quite grasp it yet.
      Adding a number option to the media array is the same as iBox:
      array( 'key' => 'ibox_media', 'type' => 'select', 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pl-section-boxes' ) ), 'count' => array( 'name' => __( 'Counter', 'pl-section-boxes' ) ), 'boxnumb' => array( 'name' => __( 'Numbering', 'pl-section-boxes' ) ), 'image' => array( 'name' => __( 'Images / SVG', 'pl-section-boxes' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pl-section-boxes' ) ) ), 'default' => 'icon', 'label' => __( 'Select iBox Media Type', 'pl-section-boxes' ), ), In the section template I'll add a line for the boxnumber. In addition I have to add variuous boxnumb classes in the build.less file to make it hidden by default and style it.
      function section_template(){ ?> <script type="text/html" id="boxes-template"> <a class="boxes" data-bind="class: boxclass() + ' pl-col-sm-' + $root.ibox_cols(), plhref: link" > <div class="boxes-pad" data-bind="class: 'pl-control-'+ $root.ibox_format()"> <div class="boxes-media media-left"> <span class="the-boxes-media pl-animation pl-appear" data-bind="class: 'media-'+$root.ibox_media(), style: { color: color, width: $root.image_width() + 'px', opacity: $root.image_opacity}"> <div class="pl-image" data-bind="plbg: image, class: $root.image_format"></div> <span class="pl-counter" data-bind="pltext: count"></span> <span class="pl-boxnumb" data-bind="pltext: ?numbervalue?"></span> <i class="boxes-icon pl-icon" data-bind="class: 'pl-icon-'+icon()"></i> </span> </div> <div class="boxes-text media-right"> <h3 class="boxes-title" data-bind="pltext: title"></h3> <div class="boxes-desc" data-bind="pltext: text"></div> </div> </div> </a> </script> Where I'm stuck is how to get the number to supply to pltext. Since the boxes are numbered in the configuration panel (showing as Item 1, Item 2, ...) I guess there is something in the code that could give me the box number, but what would that be? Finding it in the pure php code of iBox was quite easy, but the Javascript-Knockout.js-PHP code in PL5 isn't that easy to read. 
      I realise that I'm developer terrority now, but I'd appreciate any help. I guess this could be useful for more people if get it to work. Maybe it should be added as a standard option? "X things you need to know" or similar is staple website content and the Boxes section is ideal for that with numbers. On our website the "X things you need to know"-pages is half our traffic. 
    • laka74
      By laka74+
      Dear support,
      I'm having problems using the iBox - can't change anything or delete it ?!
      http://seriousplay.training/
      Best
      regards
      Lasse Kramer
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
×