Viewing 30 posts - 1 through 30 (of 33 total)
1 2
  • Author
    Posts
  • October 4, 2022 at 7:21 pm #1367622
    Sovietovic

    Hi,
    One quick question. Is there some way how I can make full screen slider (homepage) to be available by default on all blog posts as well?
    Problem is I don’t want advanced editor for blog posts. However when not using it the blog posts are losing ability to see homepage full screen slider.

    Is there some hack for this or would I need to create each blog post in Advanced editor and add full screen slider there?

    Thanks

    October 5, 2022 at 10:38 am #1367658
    Ismael

    Hey Jaro,

    Thank you for the inquiry.

    This is possible but you have to modify the single.php or the includes > loop-index.php file, and insert the slider shortcode directly in the templates. You can also use template hooks. To extract the actual shortcode of a specific element, you have to set the builder to debug mode.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode

    Best regards,
    Ismael

    October 5, 2022 at 10:52 am #1367665
    Sovietovic

    Thanks Ismael.
    Quick question. You mentioned these two options:
    1. Edit template directly
    2. Use template hooks

    Are both of these configurations lost on Enfold updates (needs to be re-added again) or are some of these two preserved?

    October 5, 2022 at 5:25 pm #1367697
    Sovietovic

    Ismael,
    I was able to get the shorcode of slider I would like to use by default on all pages. Based on reading about hooks it seems it is enough to adjust functions.php of my child theme. Are you able to provide me proper function for this to have it displayed same way like homepage on all blog posts? I couldn’t find anything about hooks in documentation.

    Here is debug information

    [av_slideshow_full size='no scaling' min_height='0px' stretch='' control_layout='av-control-default' slider_navigation='av-navigate-arrows av-navigate-dots' nav_visibility_desktop='' nav_arrow_color='' nav_arrow_bg_color='' nav_dots_color='' nav_dot_active_color='' src='' attachment='' attachment_size='' position='top left' repeat='no-repeat' attach='scroll' animation='slide' transition_speed='' autoplay='false' interval='5' img_scale='' img_scale_end='10' img_scale_direction='' img_scale_duration='3' img_scale_opacity='1' conditional_play='' img_scrset='' lazy_loading='disabled' id='' custom_class='' template_class='' av_uid='av-l8sf9yen' sc_version='1.0']
[av_slide_full slide_type='image' id='2841' video='https://' mobile_image='' fallback_link='https://' title='' video_format='' video_ratio='16:9' caption_pos='caption_bottom' custom_title_size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' custom_title='' custom_content='' heading_tag='' heading_class='' link_apply='' link='lightbox' link_target='' button_label='Click me' button_color='light' link1='manually,http://' link_target1='' button_label2='Click me' button_color2='light' link2='manually,http://' link_target2='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_uid='av-l8sfeja1' sc_version='1.0'][/av_slide_full]
[/av_slideshow_full]
    October 6, 2022 at 6:41 pm #1367849
    Sovietovic

    Ismael,
    Any luck to check this one please? I planned to migrate to this Enfold web over weekend and this seems to be the biggest but last blocker for me.
    I would really appreciate if you can have a look and somehow unblock me. I’ve tried to play with hooks today but it seems to be too much for me to understand how to achieve expected scenario. Would really help to have Enfold skilled person to unblock me :)

    I’ve tried to use following hook to insert it .However it always ends up under or top of the header. The image never ends up with transparent menu.

    Thanks a lot

    October 6, 2022 at 7:37 pm #1367860
    Mike

    Hi,
    Thanks for the link to your site, it looks like you were able to add the slider to all of your pages & posts with a function in your functions.php and the slider shortcode, but it looks like it added a second slider to your homepage and I believe that you only want this to add the slider to your posts, so I added if(is_single()) {…} to your function and it seems to be working, please check.

    for future readers the function is basically like this:

    add_action('ava_after_main_menu', 'add_top_image_for_blog');
function add_top_image_for_blog() {  
	if(is_single()) {
    echo do_shortcode("[av_slideshow_full ... [/av_slideshow_full]");
}
}

    Best regards,
    Mike

    October 6, 2022 at 7:47 pm #1367862
    Sovietovic

    Thanks Mike for confirmation I’ve did this properly. I learned this at the end :) I’ve used following to put it only for blog pages and works nicely.

    However issue is that the main menu is not transparent and needs to be manually set to be transparent+glassy for each blog page. How can I make this transparent option to be always transparent+glassy for my Enfold pages?
    Currently I need to go to Post/Page and set it in options there manually. Is there some way how to make this transparent+glassy menu by default for every new page/post?

    EDIT:
    I’ve found this code on docs page https://kriesi.at/documentation/enfold/header/#toggle-id-3-closed + support forum https://kriesi.at/support/topic/set-transparent-header-as-default-header-style/ and seems to set my option to default to transparent and glassy for new pages.

    
add_action( 'after_setup_theme', 'ava_enfold_builder_layout_mod' );
function ava_enfold_builder_layout_mod(){
  add_filter('avf_builder_elements', 'avf_enfold_builder_layout_settings_mod');
}

function avf_enfold_builder_layout_settings_mod($elements)
{
  $counter = 0;
    foreach($elements as $element)
    {
    // Layout > Header visibility and transparency
    if($element['id'] == 'header_transparency')  {
			$elements[$counter]['std'] = 'header_transparent header_glassy';
        }
        $counter++;
    }
  return $elements;
}

    Problem is however that once I create some page + save (it is glassy) and then edit it and save without changing anything the glassy effect is gone and the menu is transparent + border instead. I can’t set it back again to glassy with anything anymore. I can set everything else just not glassy anymore. It just ignores that setting. Now even with the above function I don’t see glassy header to be default anymore..

    Can you please provide proper function which will make this option default in options and will preserve on page updates?
    If you want to reproduce please login and do following:
    1. Create new test page with glassy header
    2. Check the page it won’t have glassy effect.

    I’m not sure what happened here but something seems to be doing strange stuff to my glassy header now

    Thanks

    October 6, 2022 at 11:45 pm #1367879
    Guenni007

    i see on your inserted code that there is a space behind header_glassy – and that is important !
    if i remove that space – the presetting will not work.

    ______________
    for the devs and mods:

    by the way: on functions-enfold.php on line 1335 there is:

    $header['header_transparency'] = 'header_transparency';

    is that correct ? why is it not 

     …
__( 'Transparent Header', 'avia_framework')	=> 'header_transparent',

    as in meta.php line 377 ???

    October 7, 2022 at 7:31 am #1367902
    Sovietovic

    Guenni,
    Sorry that space was already removed on my site, forgot to update previous post (did now).
    The issue still remains as I mentioned before. The code seems to be doing something strange to my side. Or better say I’m able to set glassy header anymore. Even if it is set it won’t display it ever. I did insert code yesterday to enforce glassy on all existing pages but I removed it later. Could that somehow do boo-boo to my site? :)

    October 7, 2022 at 7:48 am #1367906
    Guenni007

    This blank space at the end must remain set. – your snippet to preset the page/post header visibility and transparency only works if it is there.
    On my test page, the inconsistency you describe is not present. I can edit preset page layouts without changing anything in the settings. If I consciously want to change this setting, I can also set this.

    October 7, 2022 at 8:25 am #1367911
    Sovietovic

    Thanks Guenni,
    I’ve added space back and yes the option is now properly default for new posts.
    After digging more into this I can see that hook to display the slider on each page is doing some harm and header is not glassy. If I remove this code and add slider directly to page the header will be glassy.
    Code I’ve used:

    Now when I exchanged ava_after_main_menu with ava_after_main_container it seems to behave properly. I think this was a root cause for all my trouble. I will confirm once again I do all validations

    October 7, 2022 at 8:42 am #1367916
    Sovietovic

    So the issue continues. After I move slider from ava_after_main_menu to ava_after_main_container all my widgets go at the bottom of page.

    Can somebody please check function in previous post and somehow fix it so my widgets won’t go at the end of page + header will remain glassy? I’m starting to loose my brain :)

    October 7, 2022 at 1:39 pm #1367953
    Guenni007

    i tried to insert on header.php an own custom hook – but with no effort on doing that. Because to keep a child theme header.php would not be a problem either. The original position of the slide is just after the opening #main tag.

    But what you can try is to insert not the shortcode with that hook – but to insert html.
    Just style a page where it is like you wanted to have the slider on top. Inspect that page with developer tools of your browser and copy whole html code of it. Insert it via:

    add_action('ava_after_main_title', function() {
?>
here is the place for the whole html code
<?php
});
    October 7, 2022 at 2:18 pm #1367964
    Sovietovic

    Thanks a lot Guenni007.
    This seems to work properly with your function above and html code from Inspect (Dev Tools). Hope it won’t break anything else :) 

    
add_action('ava_after_main_title', function() {
?>
<img class="wp-image-2841 avia-img-lazy-loading-not-2841" src="https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1.jpg" width="1600" height="556" title="logo2" alt="" itemprop="thumbnailUrl" srcset="https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1.jpg 1600w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-300x104.jpg 300w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-1030x358.jpg 1030w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-768x267.jpg 768w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-1536x534.jpg 1536w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-1500x521.jpg 1500w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-705x245.jpg 705w" sizes="(max-width: 1600px) 100vw, 1600px" style="left: 0px;">
<?php
});

    One issue however comes from this is that when I configure the slider to be hidden on mobile phones the above code does not change and hence it always display on phone as well. Is there some hack for this as well?

    October 7, 2022 at 2:34 pm #1367970
    Guenni007

    you can even take the whole slider with all settings made by enfold.
    Sometimes these settings are made with classes on parent containers. So you had to find the correct container for html copy.
    For images enfold starts with a div.avia-image-container – try to copy that whole outer-html

    October 7, 2022 at 6:06 pm #1368003
    Sovietovic

    Guenni Thanks but it seems all I can gather is this div stuff below. That one again does not contain mobile turn on/off values seem so.
    At the end I put if clause to this function and it works nicely for desktop + mobile separatelly.
    I think we are good to close this one if there is no other way how to distinguish between desktop/mobile

    
add_action('ava_after_main_title', 'add_top_image_for_blog');
function add_top_image_for_blog() {
	if( !wp_is_mobile() ){
?>
<div data-rel="slideshow-1" class="avia-slide-wrap "><img class="wp-image-2841 avia-img-lazy-loading-not-2841" src="https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1.jpg" width="1600" height="556" title="logo2" alt="" itemprop="thumbnailUrl" srcset="https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1.jpg 1600w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-300x104.jpg 300w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-1030x358.jpg 1030w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-768x267.jpg 768w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-1536x534.jpg 1536w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-1500x521.jpg 1500w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-705x245.jpg 705w" sizes="(max-width: 1600px) 100vw, 1600px" style="left: 0px;"></div>
<?php
}};
    October 7, 2022 at 7:00 pm #1368008
    Guenni007

    please show me the link to a working page – where you have set it manually.

    you have to go back to where the slider starts:

    <div id="full_slider_1" class="avia-fullwidth-slider  …

    on this div there are the settings for mobile view by classes : av-small-hide av-mini-hide etc.

    October 7, 2022 at 7:03 pm #1368011
    Sovietovic

    Guenni, Thanks. I’ve edited last post few times now :) . It all works with last function where I put if clause (see above)

    
if( !wp_is_mobile() ){}

    Should be good to close this thread after this long fight :)
    Thanks a ton for these hacks

    October 7, 2022 at 7:09 pm #1368012
    Guenni007

    the shortcode will start too at this highest slider div – so you had to copy all that

    October 7, 2022 at 7:10 pm #1368013
    Sovietovic

    I’ve tried to find code you mentioned in Inspect and couldn’t. Not sure where and how to find it. All I could gather is already in my function. If you have some better instructions how to find this 

    <div id="full_slider_1" class="avia-fullwidth-slider  …

    Let me know. All I can see is 

    <div data-rel="slideshow-1" class="avia-slide-wrap ">...</div>
    October 7, 2022 at 7:13 pm #1368014
    Guenni007

    so – you used a fullwidth-slider at the beginning – and you try to insert it on default on all pages.
    This example page – where can i see it to inspect? – you post your domain allready – so i think you can post this link too.

    October 7, 2022 at 7:15 pm #1368016
    Guenni007

    i found your page try please :

    add_action('ava_after_main_title', function() {
?>
<div id="full_slider_1" class="avia-fullwidth-slider main_color avia-shadow av-small-hide av-mini-hide  avia-builder-el-0  el_before_av_textblock  avia-builder-el-first   container_wrap sidebar_right"><div class="avia-slideshow av-l8ypj1ln-1436a823a5edef515622515055099065 avia-slideshow-no scaling av_slideshow_full avia-slide-slider av-small-hide av-mini-hide av-slideshow-ui av-control-default av-slideshow-manual av-loop-once av-loop-manual-endless image_no_stretch avia-slideshow-1" data-slideshow-options="{&quot;animation&quot;:&quot;slide&quot;,&quot;autoplay&quot;:false,&quot;loop_autoplay&quot;:&quot;once&quot;,&quot;interval&quot;:5,&quot;loop_manual&quot;:&quot;manual-endless&quot;,&quot;autoplay_stopper&quot;:false,&quot;noNavigation&quot;:false,&quot;bg_slider&quot;:false,&quot;keep_padding&quot;:false,&quot;hoverpause&quot;:false,&quot;show_slide_delay&quot;:0}" itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject"><ul class="avia-slideshow-inner " style="padding: 0px; height: 486px;"><li class="avia-slideshow-slide av-l8ypj1ln-1436a823a5edef515622515055099065__0 av-single-slide slide-1 slide-odd next-active-slide active-slide" style="visibility: visible; opacity: 1; transition: none 0s ease 0s; transform: translateZ(0px);"><div data-rel="slideshow-1" class="avia-slide-wrap "><img class="wp-image-2841 avia-img-lazy-loading-not-2841" src="https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1.jpg" title="logo2" alt="" itemprop="thumbnailUrl" srcset="https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1.jpg 1600w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-300x104.jpg 300w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-1030x358.jpg 1030w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-768x267.jpg 768w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-1536x534.jpg 1536w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-1500x521.jpg 1500w, https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1-705x245.jpg 705w" sizes="(max-width: 1600px) 100vw, 1600px" style="left: 0px;" width="1600" height="556"></div></li></ul></div></div>
<?php
});
    October 7, 2022 at 7:19 pm #1368018
    Sovietovic

    Guenni,
    I finally got the code you pasted. I was checking homepage instead of “example page” like you named it. Now I was able to find the whole div and copy it to the function. This made it works properly for mobile as well (based on configuration of slider).

    Thanks a ton. I’ve added example page just for reference here. So I guess all is good now and it’s time for a beer :)

    October 7, 2022 at 7:29 pm #1368019
    Guenni007

    so – you can also use all settings of a slider, including image change, timing function, navigation styling etc. pp
    Glad that we could now still solve both. Drink a beer for me – unfortunately I have none left at home.

    October 7, 2022 at 7:34 pm #1368020
    Sovietovic

    Thanks Guenni,
    There is one “strange” thing still happening which I will ignore for now. When the page loads the slider is not full height and then goes to proper height. It’s visible but doesn’t break anything.

    October 7, 2022 at 8:43 pm #1368024
    Guenni007

    well that content is loaded after the other content is already in the DOM; next : maybe lazy-loading comes into account too on that.
    So if you just want to have the image up there without slider functions, why don’t you use a color-section anyway for performance reasons.
    See here ( sorry with your image ) a page with that color section – your image has a aspect ratio of 1600:556 so if the width is 100vw the height is 34.75vw
    this could be done by a custom ID f.e. banner in your quick css:

    #banner {
  height: 34.75vw;
  background-repeat: no-repeat;
  background-image: url(https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1.jpg);
  background-position: 0% 0%;
  background-attachment: scroll;
}

    and insertion code is:

    add_action('ava_after_main_title', function() {
?>
<div id="banner" class="avia-section main_color avia-section-default avia-no-border-styling avia-builder-el-1 av-small-hide av-mini-hide avia-full-stretch avia-bg-style-scroll container_wrap sidebar_right" data-section-bg-repeat="stretch">
	<div class="container av-section-cont-open">
		<div class="template-page content av-content-small alpha units">
			<div class="post-entry post-entry-type-page">
				<div class="entry-content-wrapper clearfix">
				</div>
			</div>
		</div>
	</div>
</div>
<?php
});

    see an example page with inserted banner image on top:
    https://enfold.webers-webdesign.de/test-jamesdk/

    October 7, 2022 at 10:02 pm #1368026
    Sovietovic

    Guenni, I’ve tried to copy/paste code above but in my case nothing really happened not sure if I did something wrong or was supposed to adjust the above code. When I copy paste it to style and second to functions, nothing happens.Does it need to be somehow more specific? Yes I don’t care about slider at all :)

    October 7, 2022 at 10:05 pm #1368027
    Sovietovic

    I see.. I’ve changed layout to stretched and it appeared. Does the same somehow work for boxed layout?

    October 8, 2022 at 11:01 am #1368048
    Guenni007

    Sorry – now I have changed my layout to Boxed – this makes no difference on my test platform, except for large screen widths larger than 1600px the image is further enlarged and cropped. To avoid this on your installation, please switch back to your boxed layout and we will find a way.
    i see on boxed layout there is a little different html for those sections – but we can leave out the empty content of this color-section anyway:
    (it is only important that we have inside the div with container class)

    add_action('ava_after_main_title', function() {
?>
<div id="banner" class="avia-section main_color avia-section-default avia-no-border-styling avia-builder-el-0  avia-builder-el-first av-small-hide av-mini-hide avia-full-stretch avia-bg-style-scroll container_wrap sidebar_right" data-section-bg-repeat="stretch">
  <div class="container av-section-cont-open"></div>
</div>
<?php
});

    In a boxed layout we can prevent the enlargement by giving the #banner a maximum height – since body is set to 90% width – this must be included in the calculation.

    @media only screen and (min-width: 990px) {
  #banner {
    max-height: calc(0.9 * 556px);
    height: calc(0.9 * 34.75vw);
    background-repeat: no-repeat;
    background-image: url(/wp-content/uploads/2022/10/logo2-1.jpg);
    background-position: 0% 0%;
    background-attachment: scroll;
  }
}

/****  beneath the 990px boxed layout body goes to 100% width ******/
@media only screen and (max-width: 989px) {
  #banner {
    max-height:556px;
    height: 34.75vw;
    background-repeat: no-repeat;
    background-image: url(/wp-content/uploads/2022/10/logo2-1.jpg);
    background-position: 0% 0%;
    background-attachment: scroll;
  }
}
    October 8, 2022 at 11:21 am #1368049
    Guenni007

    i switch back to stretched layout on my testinstallation – so settings will be not right now on that page
    and i removed your image now.

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 33 total)
1 2
  • The topic ‘fullscreen slider by default for blog pages with transparent glassy header’ is closed to new replies.