slider just on the landing page

Customizr uses index.php for allllllllll the contents ??
What’s this landing page? Do you mean the home page or another page?
And, you don’t really have to modify parent theme files…
you can use some of those action hooks to achieve what you want..
and conditional check to check if you’re on the page you want..
For start page you mean the home page?
so you can use something like (in your child-theme functions.php):

add_action('__after_header', 'my_slider', 10);
function my_slider(){
    if ( tc__f('__is_home') )
        echo do_shortcode("[metaslider id=308]");
}

hope this helps

Ahh thx again
I will try this.

I have removed the slider customizr have. This slider contains a text inside the image which is really good.
Yes, hrmm I’ve been reading NOT to change the files.
It works though but that infect all the pages, no matter what pages I’ve created.
so all the editing in the child-theme′s functions.php that is?

landing page is google talk. SEO more likely and means the page the individuals first page. meaning the start page of my site.
There, i have 4 images sliding in about 20 seconds.
20 seconds of what i do and what my services are.
theres a rule saying a visitor have about 16-20 seconds on a website, if its not obvious what I’m doing, they click on next website.

Hi

This code you′ve paste doesn’t helped.

What i want is to have my own slider “metaslider” on the start page.
the customizr is set to “slider off” so there′s nothing below the menu right now.
When I’ve pasted this I’ve got this “Parse error: syntax error”

The slider on this demo page https://demo.themesandco.com/boxed-image-slider/
is not visible on other pages.
i would like my metaslider with a specific id is visible only on the start page as mention before.
Like the other pages i create where you can add this short code is not a problem.
That works super with different images and text and so on.

I can choose from two diff codes in the options of the slider

[metaslider id=xxx] to be add on a page/post. I can have 300 diff sliders if i want to.

<?php
echo do_shortcode(“[metaslider id=308]”);
?>

to be add in a php-file.
your code is correct but since i have my customize-slider in OFF-mode and i only want one slider. I though it was the index.php file to put the code.

Hi, the code I pasted above gives no parse error.
Just copied it in my child-theme functions.php, no problem and of course it works, it prints the metaslider after the header and just in my customizr home page.
Sorry but you probably have made some error somewhere else ??
(about the error)
Then, how did you build this landing page? Does it use the customizr header.php file? If not then __after_header isn’t available for that page.
Did you build it with a plug-in?
A link to your site?

Hi

I might have forgot to tell you about the function.php.

I do have a video (used to) in the slider, then images after the video, unless the user hold the mouse over the “image”=read video and the video is playing those 120 seconds.

Code:

<?php
add_filter('tc_slide_background' , 'set_video_slider', 10, 4);
function set_video_slider($_original_bg , $link, $id, $s_name ) {
  //////////////// Parameters :  ////////////////
  $my_slider_name = 'huvudsida';//set the name you have choosen when creating your slider
  $slide_position = 1; //<= this will replace the first slide
  $_video         = 'https://vimeo.com/46981451';//<=the url of your vimeo or youtube video
  $_autoplay      = false;//<= true = autoplay
  $_mute_volume   = false;// true = volume set to 0
  $_pause_on_slide = true;//true = the video is paused on slide change
  //////////////////////////////////////////////
  //uncomment this video array to run the random video
  //$_video         = array( 'https://www.youtube.com/watch?v=oUlLeDKPCYA' , 'https://vimeo.com/108792063', 'https://vimeo.com/73373514', 'https://vimeo.com/39312923', 'https://vimeo.com/108104171', 'https://vimeo.com/106535324' , 'https://vimeo.com/108138933', 'https://vimeo.com/107789364', 'https://vimeo.com/107580451' );

  $sliders        = tc__f('__get_option' , 'tc_sliders');

  //remove previous filter if set
  remove_filter('embed_oembed_html', '_add_an_id_for_youtube_player' , 10, 4);
  remove_filter('oembed_result' , 'enable_youtube_jsapi');
  remove_filter('oembed_result' , 'set_youtube_autoplay');
  remove_filter('oembed_fetch_url' , 'set_vimeo_url_query_args');

  if ( $my_slider_name != $s_name )
    return $_original_bg;

  $_slides = array();
  foreach ($sliders[$s_name] as $_sid) {
    $_slides[] = $_sid;
  }
  if ( $id != $_slides[$slide_position-1] )
    return $_original_bg;

  if ( ! is_array($_video) ) {
    $_return_video = $_video;
  } else {
    $rand_key       = array_rand($_video, 1);
    $_return_video = $_video[$rand_key];
  }

  //youtube or vimeo?
  $_provider = ( false !== strpos($_return_video, 'youtube') ) ? 'youtube' : false;
  $_provider = ( false !== strpos($_return_video, 'vimeo') ) ? 'vimeo' : $_provider;

  if ( ! $_provider )
    return $_original_bg;

  if ( 'youtube' == $_provider ) {
    add_filter('embed_oembed_html', '_add_an_id_for_youtube_player' , 10, 4);
    //Adding parameters to WordPress oEmbed https://foxland.fi/adding-parameters-to-wordpress-oembed/
    add_filter('oembed_result' , 'enable_youtube_jsapi');
    if ( false !== $_autoplay )
      add_filter('oembed_result' , 'set_youtube_autoplay');
  } elseif ( 'vimeo' == $_provider && false !== $_autoplay ) {
    add_filter('oembed_fetch_url' , 'set_vimeo_url_query_args');
  }

  //write some javascript : dynamic centering on resizing, responsiveness, Vimeo and YouTube API controls
  _write_video_slide_script($id, $_mute_volume, $_pause_on_slide, $_provider);

  $_return_video =  add_query_arg( 'cached' , time(),  $_return_video );
  //( false !== strpos($_return_video, '?') ) ? '&cached=' : '?cached=';
  return apply_filters('the_content', $_return_video );
}

function set_vimeo_url_query_args($provider) {
  $provider = add_query_arg( 'autoplay', 1 , $provider );
  $provider = add_query_arg( 'loop', 0 , $provider );
  return $provider;
}

function set_youtube_autoplay($html) {
  if ( strstr( $html,'youtube.com/embed/' ) )
     return str_replace( '?feature=oembed', '?feature=oembed&autoplay=1&loop=1)', $html );
  return $html;
}

function _add_an_id_for_youtube_player($html, $url, $attr, $post_ID ) {
  //@to do make the id unique
  return str_replace('iframe', 'iframe id="youtube-video"', $html);
}

function enable_youtube_jsapi($html) {
  if ( strstr( $html,'youtube.com/embed/' ) )
    return str_replace( '?feature=oembed', '?feature=oembed&enablejsapi=1', $html );
  return $html;
}

function _write_video_slide_script($id, $_mute_volume, $_pause_on_slide, $_provider) {
  ?>
    <script type="text/javascript">
      jQuery(function ($) {
        var $_slide_wrap    = $('.slide-'+<?php echo $id ?>),
            $vid_iframe     = $('iframe' , $_slide_wrap ),
            vid_height      = $vid_iframe.attr('height'),
            vid_width       = $vid_iframe.attr('width'),
            wind_width      = $(window).width(),
            is_active       = false,
            $slider_wrapper = $_slide_wrap.closest('#customizr-slider'),
            $_pause_on_slide = <?php echo (true != $_pause_on_slide) ? 'false' : 'true'; ?>,
            $_mute_volume   = <?php echo (true != $_mute_volume) ? 'false' : 'true'; ?>,
            $_provider       = '<?php echo $_provider; ?>';

        //$('.carousel-caption' , $_slide_wrap ).remove();
        $('.carousel-image', $_slide_wrap ).css('text-align' , 'center');

        //Beautify the video
        $('iframe' , $_slide_wrap )
          .attr('width' , '').attr('height' , '')
          .css('width', '100%').css('max-width', '100%').css('position','relative')
        _re_center();
        $(window).resize( function() {
          setTimeout(function() { _re_center();}, 200)
        });

        function _re_center() {
          var new_height    = (wind_width * vid_width) / vid_height,
              _height       = $('#customizr-slider').height(),
              push_up       = (new_height - _height )/2;
          $('iframe' , $_slide_wrap ).css('height' , new_height ).css('bottom' , push_up );
        }

        //VIMEO PLAYER API
        //https://developer.vimeo.com/player/js-api
        // Listen for messages from the player
        if (window.addEventListener){
            window.addEventListener('message', onMessageReceived, false);
        }
        else {
            window.attachEvent('onmessage', onMessageReceived, false);
        }

        // Helper function for sending a message to the player
        function post(action, value, player) {
            if ( ! player || 0 == player.length )
              return;
            var data = {
              method: action
            };

            if (value)
              data.value = value;

            var message   = JSON.stringify(data);
                url       = window.location.protocol + player.attr('src').split('?'),
            player[0].contentWindow.postMessage(message, url);
        }

        //Mute volume when player is ready
        function onMessageReceived(e) {
            var data          = JSON.parse(e.data),
                $activeSlide  = $slider_wrapper.find('.item.active'),
                $player       = $('iframe[src*=vimeo]', $activeSlide );
            switch (data.event) {
                case 'ready':
                    ( true == $_mute_volume) && post('setVolume', +0.00001 , $player );
                break;
            }
        }
			//EVENTS :
          //Unmute on hover
          $_mute_volume && $_unmute_on_hover && $slider_wrapper.hover( function() {
            post('setVolume', +0.8 , $('iframe[src*=vimeo]', $(this).find('.item.active') ) );
          }, function() {
            post('setVolume', +0.000001 , $('iframe[src*=vimeo]', $(this).find('.item.active') ) );
          });
        // Call the API on 'slid'
        $slider_wrapper.on('slid', function() {
          ( true == $_pause_on_slide) && _pause_inactive_slides();
        });

        function _pause_inactive_slides() {
          var $activeSlide  = $slider_wrapper.find('.item.active'),
              $player       = $('iframe[src*=vimeo]', $activeSlide );

          //if current slide has no player. Pause all other players, else play this player
          if ( ! $player.length ) {
            $slider_wrapper.find('iframe[src*=vimeo]').each( function() {
              post( 'pause', false , $(this) );
            });
          }
          post( 'play', null, $player );
        }

        //YOUTUBE PLAYER API
        //https://developers.google.com/youtube/iframe_api_reference
        //https://developers.google.com/youtube/player_parameters
        //https://stackoverflow.com/questions/8869372/how-do-i-automatically-play-a-youtube-video-iframe-api-muted
        //https://css-tricks.com/play-button-youtube-and-vimeo-api/

        if ( 'youtube' == $_provider ) {
          var player;
          //important : the function onYouTubeIframeAPIReady has to be added to the window object
          //when wrapped in another closure
          window.onYouTubeIframeAPIReady = function () {
              player = new YT.Player('youtube-video', {
                events: {
                  'onReady': onPlayerReady
                  //'onStateChange': onPlayerStateChange
                }
              });
          }

          //Play and Mute volume when player is ready
          function onPlayerReady() {
            player.playVideo();
            if ( true == $_mute_volume)
              player.mute();
            else
              player.unMute();
          }
           // Call the API on 'slid'
          $slider_wrapper.on('slid', function() {
            if ( true !== $_pause_on_slide)
              return;
            var $activeSlide  = $slider_wrapper.find('.item.active'),
                $player       = $('iframe[src*=youtube]', $activeSlide );

            //if current slide has no player. Pause all other players, else play this player
            if ( ! $player.length ) {
              $slider_wrapper.find('iframe[src*=youtube]').each( function() {
                player.pauseVideo();
              });
            } else {
              player.playVideo();
            }

          });//end on slid

          //load the youtube API script asynchronously
          var tag = document.createElement('script');
          tag.src = "https://www.youtube.com/player_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        }

      });
    </script>
  <?php
}

Those php-code is pasted in the function.php and might inter fear the code you gave me here.

I was thinking of two things.
Is it possible to move the php-code and make a snippet of it and place the original customize slider with a kewl video on any other page or post?

the code you gave me at the first is working.
But its not in the center and more to the left.
Ive tried some center php but thats another language for me ??

I can temporarily open the site even though its not ready.
sites name is wilmer media . se (with not space and add www.)

I edit in child-theme, then i activate the customizr-pro, should be correct?

Thanks in advance

Godmorning here in sweden.

I had a issue before of using customizr-pro′s feature and editing in the child-theme didn’t worked together.

On https://doc.themesandco.com/customizr-pro/faq/#child-theme there′s a text of adding a -pro which i did and it′s still active.
But the slider is not there and active – strange.

The center of the slider worked in the child-theme, i simply took a deeper look and discovery the center box wasn’t checked.

Hi,
no the code I gave you doesn’t conflict with the video slider. And of course a Parse error, isn’t conflicting error. And it’s just the “type” of the error, but the reason? What does it exaclty say?

This code:

add_action('__after_header', 'my_slider', 10);
function my_slider(){
    if ( tc__f('__is_home') )
        echo do_shortcode("[metaslider id=308]");
}

says:
after the header (an hook which is in customizr(-pro) header.php) if we’re in home (checked with the customizr functino tc__f(‘__is_home’)) echo that do_shortcode (which is the code you wrote in you first message). So what we do? Just take your code and execute it after the header at a certain condition (is home).
That said.. you can move it almost whatever you want maybe using __before_loop with a priority of 100 ? (looking at how you modified the index.php).
But anyway, that’s the code using customizr hooks, and a customizr function to check the context, you might want to take a look at the wordpress conditional tags?

Hi

i removed the code (customizr, video) since i don’t need it there.
So I’ve just add your code and it′s working.

Thank for the describing text about what the code is doing.

But i can’t activate the customize-pro anymore, if i do it will go blank as you can see now with no slider like before.

Why cant the child-theme working with customizr-pro anymore?
Do i need to re-install something?

Hi poker1970,
if you have problems with the customizr-pro child-theme you should open a new topic here.
We cannot really handle pro support here (wp.org forum rules).

Okey.

Im deeper than i thought in php.
The code helped but it has to be added in every functions.php though.

But i have another Q which is about the container of the width-issue.
When adding anything. a slider with a short-code o a page, the theme is set to 1170 px.
If i want to add a slider (in customizr) with a full width and the text remain inside the containers width.
Any clue?

Mmm but it’s normal, ’cause you put the shortcode inside the page/post content, which is inside the main container, which is a container with width 1170px (desktop mode)..
If you want a slider in full width, then you have to put it outside the container, and to do that you need a code similar to the one above, using conditional tags to match the page you want to show the slider on.
..