[Iurie Malai]

I try to insert the slider by a shortcode, but without success. Here is my function code, but something is wrong (see the result):

add_shortcode(‘display_flex_slider’, ‘display_flex_slider_shortcode_handler’);

function display_flex_slider_shortcode_handler(){
$slider = infinity_option_get( ‘cbox_flex_slider’ ) > 0;
if ( $slider === true ) {
$flex_slider = ‘<div id=”flex-slider-wrap-full” class=”column ten”>’ . infinity_load_template( ‘engine/includes/feature-slider/template.php’ ) . ‘</div>’;
return $flex_slider;
}
}

The adapted slider code is from the Homepage Template.
Can someone help me?

[Scott Voth]

Hi Iurie @iurie –

I’m not sure about the coding – maybe someone else on this forum can help you out with it – but instead of going through all the trouble of doing this, you might consider installing the “Meta-Slider” plugin which is very easy to use, generates its own shortcode, and lets you create 4 different types of sliders that are responsive (work well on mobile devices).  It has a lot of configurations as well.  It has a nice video tutorial to get you started.

http://cbox107.svoth.com/wp-admin/admin.php?page=metaslider

 

• This reply was modified 10 years, 2 months ago by Scott Voth.
• This reply was modified 10 years, 2 months ago by Scott Voth.

[Iurie Malai]

@scottvoth – Scott, thank you! If I will fail with the shortcode I will try the plugin that you recommend.

I copied the featured slider template to the template folder of my CBOX child theme and renamed it to featured-slider.php. I load it with the below shortcode/function (see the source). Also was needed a little css code: .flexslider li { display: initial !important; }. The function and the shortcode works, but somehow strange, all slides are displayed as one (all together). Is there a way to improve this behavior? I hope @haystack or @r-a-y can help.

function display_flex_slider_shortcode_handler( $attr ){
ob_start();
get_template_part( ‘templates/featured’, ‘slider’ );
return ob_get_clean();
}

add_shortcode(‘display_flex_slider’, ‘display_flex_slider_shortcode_handler’);

 

[Christian Wach]

@iurie The slider is only set to load on the homepage, so you have to explicitly load it elsewhere. It’s also a bit confusing because the script now seems to be called bxSlider and I’m not sure exactly how it differs from flexSlider. However, the following code works for me:

// handle shortcode during page render
add_shortcode( 'display_flex_slider', 'display_flex_slider_shortcode_handler' );
function display_flex_slider_shortcode_handler( $attr ) {
	// I don't seem to need the output buffering
	get_template_part( 'templates/featured', 'slider' );
}

// handle presence of shortcode prior to page being rendered
add_action( 'wp', 'my_cbox_has_shortcode' );
function my_cbox_has_shortcode() {
	if ( is_page() ) {
		global $post;
		if ( has_shortcode( $post->post_content, 'display_flex_slider' ) ) {
			add_action( 'wp_enqueue_scripts', 'my_cbox_enqueue_styles' );
			add_action( 'close_body', 'my_cbox_theme_flex_slider_script' );
		}
	}
}

function my_cbox_enqueue_styles() {
	// bxslider CSS
	wp_enqueue_style( 
		'my_bx_slider_css',
		get_template_directory_uri() . '/assets/css/bxslider/jquery.bxslider.css',
		null, // dependencies
		0.1, // version
		'all' // media
	);
	// bxslider JS
	wp_enqueue_script( 
		'my_bx_slider_js',
		get_template_directory_uri() . '/assets/js/jquery.bxslider.min.js',
		array( 'jquery' )
	);
}

function my_cbox_theme_flex_slider_script() {
	// render script tag 
	?>
	<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery('.slides').bxSlider({
				adaptiveHeight: true,
				auto: true,
				autoHover: true,
				mode: 'fade',
				video: true,
				useCSS: false,
				controls: false,
				pause : <?php echo infinity_option_get( 'cbox_flex_slider_time' ); ?>000,
				speed: <?php echo infinity_option_get( 'cbox_flex_slider_transition' ); ?>
			});
		});
	</script>
	<?php
}

You’ll have to deal with any CSS inconsistencies from there, since the page width may be wider than the slider.

Let me know if that works for you – your site seems unavailable from here.

Cheers, Christian

• This reply was modified 10 years, 1 month ago by Christian Wach. Reason: tweaked code
• This reply was modified 10 years, 1 month ago by Christian Wach. Reason: added CSS advice

[Iurie Malai]

@haystack –
Christian, I am impressed by your work! Thank you! I thought that the task will be a little easier :-)!

I re-enabled my site, so you can see how your code works. It seems like it needs some adjustments.

A small explanation: In my slider I have two test slides with two featured images – with sizes 424 × 283 and 960 × 639 px.

 

UPDATE

About adjustments – they are necessary in your code or I can do this by some CSS?

• This reply was modified 10 years, 1 month ago by Iurie Malai.
• This reply was modified 10 years, 1 month ago by Iurie Malai.
• This reply was modified 10 years, 1 month ago by Iurie Malai.
• This reply was modified 10 years, 1 month ago by Iurie Malai.

[Christian Wach]

@iurie – yes, it won’t have come through in the email notification, but I updated my reply above to say “You’ll have to deal with any CSS inconsistencies from there, since the page width may be wider than the slider.”

My advice would be to stick to Feature Images that are wide enough to cover all likely page widths and to stick to a consistent aspect ratio as well. If you don’t have images that are wide enough, you can wrap you slider in a div to restrict its width. For example:

<div style="width:640px;">
[display_flex_slider]
</div>

Cheers, Christian

[Iurie Malai]

@haystack –
Thanks, I will try now.

[Iurie Malai]

@haystack –
Christian, I want to say a big thank you!

The only needed adjustments was the CSS .flex-container {width: 640px; margin: 0px auto;}.
For those who will want to implement this solution the rule is simple: all representative images for Featured Slider must have a width not less than that fixed by this CSS.

Best regards,
Iurie

[Christian Wach]

@iurie, that’s a neater solution to the width issue than mine. Glad the slider’s working for you now.

As you say in another thread, it would be useful to have some kind of “resolved” flag for topics – like this one – that offer solutions to certain CBOX issues. Alternatively, perhaps there could be a page in the Documentation section that points to such topics.

Cheers, Christian

[Author]

Posts