Hey hund-herrchen,

Thank you for the inquiry.

You have to apply the anchors or ID to the color section element instead of creating the anchor elements manually.

We found this element inside the color section:

<div class="mp1" id="leadership"></div>

Instead of doing that, try to apply the ID “leadership” to the color section’s Advanced > Developer Settings > ID attribute field.

Best regards,
Ismael

Hey simplicityltd,

Thank you for the inquiry.

This is probably an issue with fixed backgrounds as described in the following thread.

// https://kriesi.at/support/topic/ipad-and-mobile-images-not-appearing-as-background-in-row-grids/#post-1225784

To fix the issue, please try this code in the Quick CSS field or the child theme’s style.css file.

@media only screen and (max-width: 1366px) {
    .avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] > ul > li {
        background-attachment: scroll !important;
    }
}

Best regards,
Ismael

Hi,

Glad it’s fixed. Let us know if you need anything else.

Best regards,
Ismael

Hi,

Thank you for the update.

The site above is not loading properly. Did you move the site somewhere else? Please provide the new URL so that we can check it again, and a screenshot will help as well.

Best regards,
Ismael

Hi,

We added this css code in the Quick CSS field to increase the width of the portfolio container and align them with the category sort.

#top .isotope-item.special_av_fullwidth .inner-entry {
	width: 100%;
}

Screenshot: https://imgur.com/aKA3IlA

To fix the spacing issue, try to use this script in the functions.php file:

add_action('wp_footer', 'ava_auto_resize');
function ava_auto_resize(){
?>
<script>
(function($){	
	var int = window.setInterval(function(){
		$(window).trigger('resize');
	}, 1000);
	
	$(window).load(function () {	
		setTimeout(function() {
			clearInterval(int);
		}, 1000);
	});
})(jQuery);
</script>
<?php
}

Thank you for your patience.

Best regards,
Ismael

Hey heufti65,

Thank you for the inquiry.

Could you please provide a screenshot of the layout that you want to create? To create a container that spans the full width of the browser screen, try using the Grid Row element

Best regards,
Ismael

Hi,

The tab option is missing because the option string or text is not properly translated. Please replace the fr_FR language files in the enfold > lang folder. (see private field)

Thank you for your patience.

Best regards,
Ismael

Hi,

Thank you for the inquiry,

You can get the value of the copyright option by using the get_post_meta function.

get_post_meta( $post->ID, '_avia_attachment_copyright', true )

And to filter or adjust the default WordPress image markup, use the get_image_tag filter.

add_filter('get_image_tag', function($html, $id, $alt, $title, $align, $size) {
     $copyright = get_post_meta( $post->ID, '_avia_attachment_copyright', true );
     // do something to $html before returning it
     if($copyright) {
         $html .= "<span>{$copyright}</span>";
     }
     return $html;
}, 10, 6);

Another solution is to add a new attribute to the attachment image using the wp_get_attachment_image_attributes filter, but it might require additional script to extract the value of the new attribute and render it in the frontend.

Best regards,
Ismael

Hi,

Thank you for the update.

We can use the avf_ajax_search_label_names filter to change the post type title. Usage examples can be found here:

// https://kriesi.at/support/topic/search-bar-8/#post-1003538
// https://kriesi.at/support/topic/change-products-wording-on-ajax-search-menu/#post-866050

To sort the results by post type, try to use this snippet in the functions.php file.

function avf_order_search_by_posttype($orderby){
    if (!is_admin() && is_search()) :
        global $wpdb;
        $orderby =
            "
            CASE WHEN {$wpdb->prefix}posts.post_type = 'portfolio' THEN '1' 
                 WHEN {$wpdb->prefix}posts.post_type = 'product' THEN '2' 
                 WHEN {$wpdb->prefix}posts.post_type = 'post' THEN '3'  
            ELSE {$wpdb->prefix}posts.post_type END ASC, 
            {$wpdb->prefix}posts.post_title ASC";
    endif;
    return $orderby;
}
add_filter('posts_orderby', 'avf_order_search_by_posttype', 999, 1);

// https://codex.wordpress.org/Plugin_API/Filter_Reference/posts_orderby

Best regards,
Ismael

Hey danowen777,

Thank you for the inquiry.

The theme automatically formats the content of the tooltip and encodes some characters in the front and backend, which is probably why it’s stripping some of the player markup. If you want to disable the formatting, we have to modify the enfold\config-templatebuilder\avia-shortcodes\image_hotspots\image_hotspots.php, look for this code around line 854:

$output .= "<div class='av-image-hotspot av-image-hotspot-{$counter} {$hotspot_tooltip_display}' data-avia-tooltip-position='{$data_pos}' data-avia-tooltip-alignment='{$align}' data-avia-tooltip-class='{$tooltip_width} {$tooltip_pos} {$extraClass} {$tooltip_style} av-tt-hotspot' data-avia-tooltip='".esc_attr(ShortcodeHelper::avia_apply_autop($content))."' style='{$pos_string}'>";

Remove the esc_attr and avia_apply_autop wrapping the $content.

$output .= "<div class='av-image-hotspot av-image-hotspot-{$counter} {$hotspot_tooltip_display}' data-avia-tooltip-position='{$data_pos}' data-avia-tooltip-alignment='{$align}' data-avia-tooltip-class='{$tooltip_width} {$tooltip_pos} {$extraClass} {$tooltip_style} av-tt-hotspot' data-avia-tooltip='".$content."' style='{$pos_string}'>";

Best regards,
Ismael

Hi,

Thank you for the update.

Where can we see the issue again? The content slider is working properly in post page, but the top bar layout is a bit different in the post compare to the home page — the menu items are missing. (see private field)

Best regards,
Ismael

Hi,

Thanks for chiming in.

You have to apply the order property to the child elements or the columns, and the flex display property should be applied to the parent container, in this case the color section.

// https://www.w3schools.com/cssref/css3_pr_order.asp
// https://www.w3schools.com/css/css3_flexbox.asp

The class and ID attribute can be added in the element’s Advanced > Developer Settings toggle.

If you want to learn more about the flexbox layout, please check this article.

// https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Best regards,
Ismael

Hi,

Sorry for the delay. We didn’t really find any errors in the page aside from the duplicated scrollbar. Do you happen to know why the scrollbar is duplicated? Did you add any css modifications?

Is it possible to clone the site to a sub domain or a staging environment so that we can test it properly?

Best regards,
Ismael

Hi,

Thank you for the update.

This looks like a plugin error because SP_PCP_Resize.process() is not a theme function. To fix the issue with the file compression, try to disable the timestamp or add a custom one in the Performance > File Compression section, enable the Show advanced options and set the Unique timestamp of merged files to the second option.

Best regards,
Ismael

Hi,

Thank you for the info.

Did you install or activate any lazy loading option in your site? It probably causes the images to load after the scripts.

One solution is to load the images asynchronously instead of waiting for other resources to load, but it will require a bit of modification. For the color section, we have to modify the themes\enfold\config-templatebuilder\avia-shortcodes\section.php file and remove the background image property. We will then replace it with a data-src attribute containing the image URL.

Please replace the section.php file with this code.

// https://pastebin.com/0ZiZb5iE

Then add this snippet in the functions.php file.

add_action('wp_head', function() {
 ?>
	<script>
		(() => {
		'use strict';
 		const objects = document.getElementsByClassName('asyncImage');  
		
		Array.from(objects).map((item) => {
			const img = new Image();
			img.src = item.dataset.src;
			
			img.onload = () => {
				item.classList.remove('asyncImage');
				return item.nodeName === 'IMG' ? 
				item.src = item.dataset.src :        
				item.style.backgroundImage = url(${item.dataset.src})
			};
		});
	})();
	</script>
 <?php
}, 999);

After that, edit the color section element, go to the Advanced tab and use “asyncImage” as a Custom CSS Class name. The script will look for the color section with the “asyncImage” class attribute, load the URL inside the data-src attribute and place it as a background when it’s is fully loaded. This will all happen while the page is loading.

This is from: https://medium.com/front-end-weekly/how-to-optimize-image-loading-on-your-website-855020fb41ae

Best regards,
Ismael