Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 2, 2022 at 4:03 pm #1360318
    max2consulting

    Hello there,

    recently I made a code to have an element only loading on no-mobile (you#r builder only hides it, but still loads for example images – bad for mobile pagespeed).

    the code is here: https://pastebin.com/CG2EHrj6

    unfortunately, it totaly breaks the #wrap_all. Even with the div around it, as soon as the ava_shortcodes are used, they will be rendered, but put outside the #wrap_all container, and everything from the builders content (rows, columns) will load after the hooked shortcode, but also outside the #wrap_all, which breaks css etc.

    I also used this in child-themes function.php as seen in the forum:

    function avf_custom_exec_sc_only_mod( $exec_sc_only, $obj_sc, $atts, $content, $shortcodename, $fake )
    {
    return true;
    }
    add_filter( ‘avf_alb_exec_sc_only’, ‘avf_custom_exec_sc_only_mod’, 10, 6 );

    Please tell me why it does so, I need a fix asap

    August 3, 2022 at 7:33 am #1360424
    Ismael

    Hey max2consulting,

    Thank you for the inquiry.

    We adjusted the code a bit. Please try to use this instead.

    // https://pastebin.com/RaGuRctE

    If you get an error, try to correct this part.

    [av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' av_uid='av-k7l5vuhy' admin_preview_bg='']{$acfheaderslider}[/av_textblock]

    Best regards,
    Ismael

    August 3, 2022 at 9:31 pm #1360544
    max2consulting

    Hi Ismael,

    sadly it doesn’ do anything.
    The site I provided to you, which shows the problem, has a header_image acf field filled, so maybe have a look at the upper part.
    I just tried it the the header_slider acf field, it puts I what I want it to, so this part is fine, the only problem is, it somehow, as said, breaks all builder-content outside of the wrap_all container in the frontends html and therefore the css

    maybe it’s because of the use of avia shortcodes outside the builder? but as also said, I’ve tried a code you provided in another thread to make the use of the shortcodes outside the builder possible

    August 3, 2022 at 11:43 pm #1360555
    Guenni007

    i do not know if the get_field function is as it should. the rest of the code is ok i think

    August 4, 2022 at 7:37 am #1360575
    Ismael

    Hi,

    Thank you for the update.

    so maybe have a look at the upper part.
    I just tried it the the header_slider acf field

    Yes, we actually modified the fullwidth slideshow shortcode and combined the output. Please enable the Appearance > Theme File Editor panel and provide the login details in the private field. We will try to check the issue further.

    Best regards,
    Ismael

    August 4, 2022 at 2:43 pm #1360635
    max2consulting

    Hi Ismael,

    I used to insert the element as wished within the builder the normal way and (because the debug is enabled) I then copied the created shortcode(s) from this to build my custom code. Again,
    I think it’s because I use them outside the builder but used a code provided here to make it possible, but seems, it doesn#t work (anymore?)


    @Guenni007    :

    It is correct. The first one is an image-field which returns the image-id, the second one is just plain text-field. the output/render of this part is absolutely correct as I wish it to be. the only problem is, it pulls this and all the stuff made inside the builder out of the wrapping-container #wrap_all and therefore breaks the appearance in the frontend (like paddings etc)

    August 5, 2022 at 5:24 am #1360720
    Ismael

    Hi,

    Thank you for the info.

    Is there a staging version of the site? We don’t want to accidentally break the site while editing the code.

    Another solution is to extract the actual html of the slideshow and the layer slider and replace the shortcode. This solution works on our end.

    This is an example of the fullwidth slider’s html.

      $output .= '
<div id="full_slider_1" class="avia-fullwidth-slider main_color avia-shadow    container_wrap fullsize">
<div class="avia-slideshow av-41ebxqf-8e1d42e67b1a6175203854efa82b817e avia-slideshow-no scaling av_slideshow_full avia-slide-slider av-slideshow-ui av-control-default av-slideshow-manual av-loop-once av-loop-manual-endless 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: 366px;">
 	<li class="avia-slideshow-slide av-41ebxqf-8e1d42e67b1a6175203854efa82b817e__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-3345 avia-img-lazy-loading-not-3345" src="http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136.jpg" width="2560" height="1440" title="teahub.io-spaceship-wallpaper-631136" alt="A new home world. Test our faith." itemprop="thumbnailUrl" srcset="http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136.jpg 2560w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-300x169.jpg 300w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-1030x579.jpg 1030w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-768x432.jpg 768w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-1536x864.jpg 1536w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-2048x1152.jpg 2048w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-1500x844.jpg 1500w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-705x397.jpg 705w" sizes="(max-width: 2560px) 100vw, 2560px" style="left: 0px;"></div></li>
</ul>
</div>
</div>
';

    Best regards,
    Ismael

    August 5, 2022 at 4:45 pm #1360823
    max2consulting

    Hello Ismael,

    sadly I cannot use the rendered html, because for example the heights may vary etc.
    This is why I used the shortcodes instead.

    Plase have a look at the staging credentials below

    August 8, 2022 at 4:20 am #1361039
    Ismael

    Hi,

    sadly I cannot use the rendered html, because for example the heights may vary etc.

    That is actually not an issue because the theme or the script that is responsible for the slideshow will automatically adjust the slide height based on the current conditions. We adjusted the filter a bit, remove the shortcode and use the actual html of the slideshow instead.

    

function ava_header_banner_slider_func ()
{
    $output = "";
    $header_image = get_field( "header_image" );
    $header_slide = get_field( "header_slider" );
    $image_id = $header_image ? $header_image : $header_slide;
    $img = wp_get_attachment_image_src( $image_id, 'full' );
    $imgalt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
    $img_markup = avia_markup_helper( array( 'context' => 'image_url', 'echo' => false, 'id' => $image_id, 'custom_markup' => "" ) );
    $imgalt = ! empty( $imgalt ) ? esc_attr( $imgalt ) : '';
    $img_tag = "<img src='{$img[0]}' width='{$img[1]}' height='{$img[2]}' alt='{$imgalt}' {$img_markup} />";
	$img_tag = Av_Responsive_Images()->make_image_responsive( $img_tag, $image_id, true );

    if(!wp_is_mobile()) {

		if($header_image) {

			$output .= '
<div class="avia-slideshow avia-slideshow-no scaling av_slideshow_full avia-slide-slider av-slideshow-ui av-control-default av-slideshow-manual av-loop-once av-loop-manual-endless avia-slideshow-1" data-slideshow-options="{"animation":"slide","autoplay":false,"loop_autoplay":"once","interval":5,"loop_manual":"manual-endless","autoplay_stopper":false,"noNavigation":false,"bg_slider":false,"keep_padding":false,"hoverpause":false,"show_slide_delay":0}" itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
<ul class="avia-slideshow-inner" style="padding: 0px; height: 96px; transition: none 0s ease 0s; transform: translateZ(0px);">
 	<li class="avia-slideshow-slide av-single-slide slide-1 slide-odd next-active-slide">
<div data-rel="slideshow-1" class="avia-slide-wrap ">'.$img_tag.'</noscript></div></li>
</ul>
</div>
';

		} 

		if($header_slide) {
            $slider = "";
			$pattern = '/\[layerslider id=\"\d+\"\]/i';

			if(preg_match($pattern, $header_slide)) {
				$slider .= "[av_section min_height='' min_height_pc='25' min_height_px='500px' padding='small' margin='aviaTBmargin' custom_margin='0px,10px' color='alternate_color' background='bg_color' custom_bg='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='fullwidth-slider' custom_class='fullwidth-container' aria_label='' av_element_hidden_in_editor='0' av_uid='av-36lacc'][av_one_full first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='0px,0px,0px,0px' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-243acc'][av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' av_uid='av-k7l5vacc' admin_preview_bg='']{$header_slide}[/av_textblock][/av_one_full][/av_section]";
			}

            $output .= do_shortcode($slider);
		}

    	echo $output;
	}	
}

    Thank you for your patience.

    Best regards,
    Ismael

    August 8, 2022 at 12:15 pm #1361096
    max2consulting

    Hello Ismael, thanks for the code, it seems to work…but only for the images.
    now I need it also for the layerslider to work.

    did you figure out, why using shortcodes, which is way more comfortable, doesn’t work?

    August 15, 2022 at 7:14 am #1361679
    Ismael

    Hi,

    Sorry for the delay. Can you give us a link to a page that should display a layer slider (header_slider)? Again, you can extract the actual html of the color section and place the layer slider shortcode inside, same as what we did with the full width slider.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.