LayerSlider on every blog post

Dear Ismael,
Thank you for your help. Not only the shortcodes do not work but also the PHP script. At least the PHP should work …

Why is that?

I would like to have tags on my blog single post, thus I need to use single.php because tags do not work with Advanced Layout Editor … but now if I understand correctly the integration with Layer Slider does not work in single.php?

So how I can achieve tags + layer slider in the single blog post?

Thank you for your time.

Best regards,
MD

Dear Ismael,
I did not try it, because you said that the workaround from the above is not recommended. So my question is … what is a recommended way? Shouldn’t that behavior (lack of “good ways” of adding layer slider to single blog post; PHP code not interpreted correctly etc.) considered as a bug?

Best regards,
MD

P.S I will try the “bad way” on the dev machine.

• This reply was modified 7 years, 2 months ago by midudek1.

Dear Ismael,
Thank you for your help. I have a look at the topic you posted above. It was a bit unclear for me at the beginning but I believe I have found a “nicer” way to include the LayerSlider in every blog post.

For people who are interested, here are the steps:
1.) as I am using child theme … if you don’t, then you need to modify directly the Enfold files … just be aware that after update those modification WILL DISAPPEAR … that is why it is better to use child theme
2.) copy “single.php” to your child directory … name of the file stays the same
3.) copy “header.php” to your child directory and give it a name “header-single.php”
4.) in you child directory create files “layerslider-header.html” and “layerslider-main.html”
5.) edit “single.php” and look for “get_header();” and replace it with “get_header(‘single’);”
6.) edit “header-single.php” and look for “wp_head();” and replace it with

wp_head();
include('layerslider-header.html');

7.) edit again “single.php” and add the following

        <?php include('layerslider-main.html'); ?>
        <div id='after_layer_slider_1' class='main_color av_default_container_wrap container_wrap fullsize'>

BEFORE

<div class='container_wrap container_wrap_first main_color <?php avia_layout_class( 'main' ); ?>'>

and REMEMBER to close the <div> at the end of a file. The end should look like this

                        </div><!--end container-->
                </div><!-- close default .container_wrap element -->
        </div><!-- close 'after_layer_slider_1' -->
<?php get_footer(); ?>

8.) edit “layerslider-header.html” and put the following inside … just REMEMBER to change your domain name from “example.com” to the one you are using

<link rel='stylesheet' id='layerslider-front-css'  href='http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/public/front.css?ver=6.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='layerslider-css'  href='http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/css/layerslider.css?ver=6.5.1' type='text/css' media='all' />
<script type='text/javascript' data-cfasync="false" src='http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/js/greensock.js?ver=1.19.0'></script>
<script type='text/javascript' data-cfasync="false" src='http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/js/layerslider.kreaturamedia.jquery.js?ver=6.5.1'></script>
<script type='text/javascript' data-cfasync="false" src='http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/js/layerslider.transitions.js?ver=6.5.1'></script>

9.) now edit “layerslider-main.html” and put the following inside … just REMEMBER to change your domain name from “example.com” to the one you are using

<div id='layer_slider_1' class='avia-layerslider main_color avia-shadow  avia-builder-el-1  el_after_av_textblock  el_before_av_textblock  slider-not-first container_wrap fullsize'    style='height: 157px;' >
<script data-cfasync="false" type="text/javascript">var lsjQuery = jQuery;</script><script data-cfasync="false" type="text/javascript">
lsjQuery(document).ready(function() {
if(typeof lsjQuery.fn.layerSlider == "undefined") {
if( window._layerSlider && window._layerSlider.showNotice) { 
window._layerSlider.showNotice('layerslider_9','jquery');
}
} else {
lsjQuery("#layerslider_9").layerSlider({sliderVersion: '6.5.1', type: 'fullwidth', skin: 'fullwidth', hoverPrevNext: false, navStartStop: false, navButtons: false, showCircleTimer: false, popupWidth: 640, popupHeight: 360, skinsPath: 'http://example.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/skins/'});
}
});
</script>
<div id="layerslider_9" class="ls-wp-container fitvidsignore" style="width:1300px;height:156px;margin:0 auto;margin-bottom: 0px;">
<div class="ls-slide" data-ls="bgcolor:#041c2c;kenburnsscale:1.2;"><img width="1158" height="795" src="http://example.com/wp-content/uploads/images/website/baner.electrical.circuit.png" class="ls-l" alt="" srcset="http://example.com/wp-content/uploads/images/website/baner.electrical.circuit.png 1158w, http://example.com/wp-content/uploads/images/website/baner.electrical.circuit-300x206.png 300w, http://example.com/wp-content/uploads/images/website/baner.electrical.circuit-768x527.png 768w, http://example.com/wp-content/uploads/images/website/baner.electrical.circuit-1030x707.png 1030w, http://example.com/wp-content/uploads/images/website/baner.electrical.circuit-705x484.png 705w, http://example.com/wp-content/uploads/images/website/baner.electrical.circuit-450x309.png 450w" sizes="(max-width: 1158px) 100vw, 1158px" style="top:18px;left:-463px;text-align:initial;font-weight:400;font-style:normal;text-decoration:none;wordwrap:false;opacity:1;mix-blend-mode:normal;" data-ls="fadein:false;clipin:0;transitionout:false;">
</div></div></div>

10.) this workaround works with WP 4.8.1, Enfold 4.1.2 and LayerSlider 6.5.1

In simple words I have copy & pasted the generated LayerSlider code (on other page build with Advanced Layout Editor) and put it in the correct places in <header> and <body> of the single post template.

Hope that descriptions will help some of you … Kriesi has quite a lot of room for improvements here …

Best regards,
MD

• This reply was modified 7 years, 2 months ago by midudek1.