Topic: Revolution slider visibility settings

1 2 →

Author

Posts

September 18, 2015 at 2:48 am #394755

Participant

In my above masthead slider I have an animated arrow that nicely points to a button in the header, to entice people to optin to my list with a 2-step optin (quite proud of that! Thanks support staff, for your help in setting that up through this thread https://community.theme.co/forums/topic/button-launch-lightbox-form/!)

Though the sliders are responsive, the arrow won’t sit in the appropriate place when viewed small screens. So, for mobile screens, I want to have a slider that is styled more appropriately for small screens.

Initially, I thought I could do that with revolution slider’s visibility settings, by having separate layers for large and small screens. Where the visibility settings for these layers would be ON/ON/OFF/OFF and OFF/OFF/ON/ON respectively (for desktop/laptop/tablet/phone screens).

https://www.dropbox.com/s/xmqk03c5o9h31rz/Screenshot.png?dl=0

If this would work, it would be an elegant solution. However….. 🙁

I don’t know whether that is a bug in revolution slider, but that simply does NOT work. The large screen layers (i.e. with ON/ON/OFF/OFF settings) show up on ALL screens, regardless of device. The small screen layers (i.e. with OFF/OFF/ON/ON settings) NEVER show up on any device. The official revolution slider documentation isn’t very helpful here.

There is a solution on the forum to have an entirely DIFFERENT slider for mobile screens (https://community.theme.co/forums/topic/slider-replacement-above-masthead-for-mobile/) but that is for an older revolution slider version. Using the layer visibility settings that are available on this version, would be a much more elegant solution in my opinion. If only it would work 😉

Any thoughts?

September 18, 2015 at 2:53 am #394758

Tristan A

Participant

This reply has been marked as private.

September 18, 2015 at 3:12 am #394766

Rue Nel

Moderator

Hello There,

Thanks for writing in!

The easiest way to have your mobile slider is to customize your above masthead settings. Since what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After your child theme is setup, you can copy the wp-content/themes/x/framework/views/global/_slider-above.php file to your child theme’s folder wp-content/themes/x-child/framework/views/global/_slider-above.php. This is where you customize and insert your mobile slider.

<?php

// =============================================================================
// VIEWS/GLOBAL/_SLIDER-ABOVE.PHP
// -----------------------------------------------------------------------------
// Slider output above all page content.
// =============================================================================

if ( X_REVOLUTION_SLIDER_IS_ACTIVE ) :

  GLOBAL $post;

  if ( is_home() ) {
    $id = get_option( 'page_for_posts' );
  } elseif ( x_is_shop() ) {
    $id = woocommerce_get_page_id( 'shop' );
  } else {
    $id = $post->ID;
  }
  
  $slider_active = get_post_meta( $id, '_x_slider_above', true );
  $slider        = ( $slider_active == '' ) ? 'Deactivated' : $slider_active;

  if ( $slider != 'Deactivated' ) :

    $bg_video           = get_post_meta( $id, '_x_slider_above_bg_video', true );
    $bg_video_poster    = get_post_meta( $id, '_x_slider_above_bg_video_poster', true );
    $anchor             = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_enable', true );
    $anchor_alignment   = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_alignment', true );
    $anchor_color       = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_color', true );
    $anchor_color_hover = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_color_hover', true );

    ?>

    <div class="x-slider-container above<?php if ( $bg_video != '' ) { echo ' bg-video'; } ?>">

      <?php if ( $bg_video != '' ) : echo function_exists( 'cs_bg_video' ) ? cs_bg_video( $bg_video, $bg_video_poster ) : ''; endif; ?>

      <?php if ( $anchor == 'on' ) : ?>

        <style scoped>
          .x-slider-scroll-bottom.above       { color: <?php echo $anchor_color; ?>;       }
          .x-slider-scroll-bottom.above:hover { color: <?php echo $anchor_color_hover; ?>; }
        </style>

        <a href="#" class="x-slider-scroll-bottom above <?php echo $anchor_alignment; ?>">
          <i class="x-icon-angle-down" data-x-icon=""></i>
        </a>

      <?php endif; ?>

      <?php // The default slider ?>
      <div class="default-slider x-hide-xs">
      <?php putRevSlider( $slider ); ?>
      </div>

      <?php // The mobile slider ?>
      <div class="mobile-slider x-hide-lg x-hide-md x-hide-sm">
      <?php putRevSlider( 'your-mobile-slider' ); ?>
      </div>

    </div>

  <?php endif;

endif;

Please take note of the alias of your mobile slider.
Hope this helps. Kindly let us know.

September 18, 2015 at 3:30 am #394774

Tristan A

Participant

Ok thanks!

So if I understand correctly, I should not expect that the revolution slider’s device visibility settings can be used for this??

So how should I modify the PhP code to present a different slider for mobile on the home page only?

Kind regards,

Tristan

PS lots of thanks for your quick replies, the theme is great!

September 18, 2015 at 4:12 am #394797

Rue Nel

Moderator

Hello There,

Thanks for getting back to us!

So if I understand correctly, I should not expect that the revolution slider’s device visibility settings can be used for this??
Yes, because the container of the slider in the code, we also added the visibility class. This is to make sure that it will only display to the specified screen size.

To clarify further: I will ONLY need a different slider for my home page slider. I have above masthead sliders for posts as well (through a template change in my child theme) but these do not require a different version on the mobile screens.
We have modified the code so that the mobile slider will only display on the homepage. Please use this code instead:

<?php

// =============================================================================
// VIEWS/GLOBAL/_SLIDER-ABOVE.PHP
// -----------------------------------------------------------------------------
// Slider output above all page content.
// =============================================================================

if ( X_REVOLUTION_SLIDER_IS_ACTIVE ) :

  GLOBAL $post;

  if ( is_home() ) {
    $id = get_option( 'page_for_posts' );
  } elseif ( x_is_shop() ) {
    $id = woocommerce_get_page_id( 'shop' );
  } else {
    $id = $post->ID;
  }
  
  $slider_active = get_post_meta( $id, '_x_slider_above', true );
  $slider        = ( $slider_active == '' ) ? 'Deactivated' : $slider_active;

  if ( $slider != 'Deactivated' ) :

    $bg_video           = get_post_meta( $id, '_x_slider_above_bg_video', true );
    $bg_video_poster    = get_post_meta( $id, '_x_slider_above_bg_video_poster', true );
    $anchor             = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_enable', true );
    $anchor_alignment   = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_alignment', true );
    $anchor_color       = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_color', true );
    $anchor_color_hover = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_color_hover', true );

    ?>

    <div class="x-slider-container above<?php if ( $bg_video != '' ) { echo ' bg-video'; } ?>">

      <?php if ( $bg_video != '' ) : echo function_exists( 'cs_bg_video' ) ? cs_bg_video( $bg_video, $bg_video_poster ) : ''; endif; ?>

      <?php if ( $anchor == 'on' ) : ?>

        <style scoped>
          .x-slider-scroll-bottom.above       { color: <?php echo $anchor_color; ?>;       }
          .x-slider-scroll-bottom.above:hover { color: <?php echo $anchor_color_hover; ?>; }
        </style>

        <a href="#" class="x-slider-scroll-bottom above <?php echo $anchor_alignment; ?>">
          <i class="x-icon-angle-down" data-x-icon=""></i>
        </a>

      <?php endif; ?>

      <?php if ( is_frontpage() ) : ?>

      <?php // The default home slider ?>
      <div class="default-slider x-hide-xs">
      <?php putRevSlider( $slider ); ?>
      </div>

      <?php // The mobile slider ?>
      <div class="mobile-slider x-hide-lg x-hide-md x-hide-sm">
      <?php putRevSlider( 'your-mobile-slider' ); ?>
      </div>

      <?php else : ?>

      <?php // The slider ?>
      <?php putRevSlider( $slider ); ?>

      <?php endif; ?>

    </div>

  <?php endif;

endif;

Hope this helps. Please let us know if this works out for you.

September 18, 2015 at 4:49 am #394818

Tristan A

Participant

Ok, thanks!

One minor request still…

I already have a child theme set up, with a functions.php that contains a few customizations already.

I figured that i could just add your code to it. Unfortunately, that breaks the site. So i am a bit lost as to how to add it to the current child-theme’s function.php. I also tried without the first line of your code too, since it makes sense to have <?php only once? Didn’t work either.

This is what my current child-theme’s functions.php looks like, perhaps you can help to point out where this new could should sit.

Many thanks!!

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

// Additional Functions
// =============================================================================
// remove Order Notes from checkout field in Woocommerce
add_filter( 'woocommerce_checkout_fields' , 'alter_woocommerce_checkout_fields' );
function alter_woocommerce_checkout_fields( $fields ) {
     unset($fields['order']['order_comments']);
     return $fields;
}
add_filter( 'woocommerce_enable_order_notes_field', '__return_false', 1);
//====skip product cart pages
add_filter('add_to_cart_redirect', 'themeprefix_add_to_cart_redirect');
function themeprefix_add_to_cart_redirect() {
 global $woocommerce;
 $checkout_url = $woocommerce->cart->get_checkout_url();
 return $checkout_url;
}
//====redirect after purchase
add_action( 'template_redirect', 'wc_custom_redirect_after_purchase' ); 
function wc_custom_redirect_after_purchase() {
	global $wp;
	
	if ( is_checkout() && ! empty( $wp->query_vars['order-received'] ) ) {
		wp_redirect( 'http://www.confidenthabits.com/thank-you' );
		exit; }
	}
// change text on place order button
add_filter( 'woocommerce_order_button_text', create_function( '', 'return "Get Access Now";' ) );
//Facebook Like JS SDK
add_action( 'x_before_site_begin', 'x_print_fb_sdk' );
function x_print_fb_sdk(){
	?>
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=488362497983165&version=v2.3";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	<?php
}
//remove returning customer reminder from checkout
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
//shortcode in header bar
add_filter('x_option_x_topbar_content', 'top_bar_content_shortcode');
function top_bar_content_shortcode ( $content ) {
return do_shortcode ( $content );
}

September 18, 2015 at 5:03 am #394831

John Ezra

Member

Hi Tristan,

Thanks for updating the thread! The code is mean for the _slider-above.php and not the Functions.php

You need to put the file in the following folder:

wp-content/themes/x-child/framework/views/global/_slider-above.php

and then replace the code with the code provided.

Hope this helps – thanks!

September 18, 2015 at 5:05 am #394833

Tristan A

Participant

OOPS!!!

Terribly sorry, I didn’t read properly.

I apologize!!

September 18, 2015 at 5:40 am #394848

Zeshan

Member

No worries! Glad to hear it helped! 🙂

September 18, 2015 at 6:19 am #394873

Tristan A

Participant

Sorry to bother you again….

I did add the _slider_above.php to the appropriate directory. Entered the slider alias for the mobile slider in there…..

Reset file permissions, emptied caches…. and it is still showing the large screen slider on mobile?? Could there be an error in the php coding?

September 18, 2015 at 6:21 am #394874

Tristan A

Participant

This reply has been marked as private.

September 18, 2015 at 4:44 pm #395344

Rad

Moderator

Hi there,

Sorry but, can’t connect with your given sftp login credentials.

But one thing for sure, the code is not there or active, I just checked your site’s html source code.

Thanks.

September 19, 2015 at 1:51 am #395627

Tristan A

Participant

Whilst making a screenshot to show that the code was there, i noticed something….
HUGELY embarrasing…. I had called the file _slider_above.php instead of _slider-above.php. So two underscores.

So stupid of me!

So I changed that.

As you can see now from this screenshot https://www.dropbox.com/s/ljrijdtial2m0zn/Schermafdruk%202015-09-19%2008.42.09.png?dl=0
the file is there where it should be.

This is the code, with the proper alias (copied it from the rev slider global settings page):

<?php

// =============================================================================
// VIEWS/GLOBAL/_SLIDER-ABOVE.PHP
// -----------------------------------------------------------------------------
// Slider output above all page content.
// =============================================================================

if ( X_REVOLUTION_SLIDER_IS_ACTIVE ) :

  GLOBAL $post;

  if ( is_home() ) {
    $id = get_option( 'page_for_posts' );
  } elseif ( x_is_shop() ) {
    $id = woocommerce_get_page_id( 'shop' );
  } else {
    $id = $post->ID;
  }
  
  $slider_active = get_post_meta( $id, '_x_slider_above', true );
  $slider        = ( $slider_active == '' ) ? 'Deactivated' : $slider_active;

  if ( $slider != 'Deactivated' ) :

    $bg_video           = get_post_meta( $id, '_x_slider_above_bg_video', true );
    $bg_video_poster    = get_post_meta( $id, '_x_slider_above_bg_video_poster', true );
    $anchor             = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_enable', true );
    $anchor_alignment   = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_alignment', true );
    $anchor_color       = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_color', true );
    $anchor_color_hover = get_post_meta( $id, '_x_slider_above_scroll_bottom_anchor_color_hover', true );

    ?>

    <div class="x-slider-container above<?php if ( $bg_video != '' ) { echo ' bg-video'; } ?>">

      <?php if ( $bg_video != '' ) : echo function_exists( 'cs_bg_video' ) ? cs_bg_video( $bg_video, $bg_video_poster ) : ''; endif; ?>

      <?php if ( $anchor == 'on' ) : ?>

        <style scoped>
          .x-slider-scroll-bottom.above       { color: <?php echo $anchor_color; ?>;       }
          .x-slider-scroll-bottom.above:hover { color: <?php echo $anchor_color_hover; ?>; }
        </style>

        <a href="#" class="x-slider-scroll-bottom above <?php echo $anchor_alignment; ?>">
          <i class="x-icon-angle-down" data-x-icon=""></i>
        </a>

      <?php endif; ?>

      <?php if ( is_frontpage() ) : ?>

      <?php // The default home slider ?>
      <div class="default-slider x-hide-xs">
      <?php putRevSlider( $slider ); ?>
      </div>

      <?php // The mobile slider ?>
      <div class="mobile-slider x-hide-lg x-hide-md x-hide-sm">
      <?php putRevSlider( 'homephone' ); ?>
      </div>

      <?php else : ?>

      <?php // The slider ?>
      <?php putRevSlider( $slider ); ?>

      <?php endif; ?>

    </div>

  <?php endif;

endif;

So I think codewise, I now did everything you said.

What happens now, is that the screen shows up entirely empty on both large and small screens?

September 19, 2015 at 3:19 am #395677

Rue Nel

Moderator

Hello There,

A white screen usually means there is a fatal PHP error. Can you please enable WP_DEBUG mode? You can do this by opening wp-config.php and adding
define( 'WP_DEBUG' , true ); just above /* That's all, stop editing! Happy blogging. */ For example:

define('WP_DEBUG', true);

/* That's all, stop editing! Happy blogging. */

When you revisit the page with the white screen, you should have some error output describing the issue in more detail.

Please let us know how it goes.

September 19, 2015 at 3:22 am #395681

Rue Nel

Moderator

Hello There,

define('WP_DEBUG', true);

/* That's all, stop editing! Happy blogging. */

When you revisit the page with the white screen, you should have some error output describing the issue in more detail.

Please let us know how it goes.

Author

Posts

1 2 →