Hey lle-it,
Sorry for the very late reply, to add a “Skip to content” button please try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_screen_reader_script(){
    ?>
    <script>
  jQuery(window).load(function(){
    jQuery( '<div id="skipnav"><p class="skipnav"><a href="#main_content">Skip to Content (Press Enter)</a></p></div>' ).insertBefore( '#top' );
    });
  </script>
    <?php
    }
add_action('wp_footer', 'custom_screen_reader_script');

In the above code please note the custom ID: main_content , this ID should be added to your page “main content” area that you want the Skip Nav to target.
To add a ID to an element such as a color section, please look in the element backend under the “developer” tab, for that element.
This approach will give you better control of the Skip Nav for each page. For example, your homepage may have a slider that the Skip Nav should jump over and go to the first color section, which contains the first content for that page. While other pages may have a different “first content” as defined by the UX and not the ALB elements.
I hope this makes sense.
With the above script you will also want to use this css to style, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.skipnav {position: absolute; display: none; text-align: left; margin: 0; padding: 0} /*For all, including Opera. Display:none used to switch off the skip links for Opera users (it's redundant, Opera has excellent keyboard navigation)*/
* html .skipnav {display: block} /*Switch on for IE6 and below*/
*+html .skipnav {display: block} /*Switch on for IE7*/
:root .skipnav {display: block} /*Switch on for Moz, FF and Safari*/
.skipnav p {margin: 5px 0 0 0; padding: 0; position: absolute; font-size: 2em}
.skipnav a {width: 26em; display:block; color: #fff; background: #333; text-decoration: none; padding: 5px; position: absolute; left: -1000em; top: 0; font-weight: bold}
.skipnav a:visited {color: #fff}
.skipnav a:focus, .skipnav a:active {z-index: 999; min-width: 250px; top: -.1em; left: 0; border: solid #777 2px; color: #fff; background: #333 !important} /*Note IE bug that requires use of :active to mimic effect of :focus*/
.skipnav a:hover {cursor: default} 

Please feel free to adjust to suit.
After applying the css, please clear your browser cache and check.
The expected results:

Best regards,
Mike

Hi,
Please ensure that the option at Enfold Theme Options > Main Menu > General > Append search icon to main menu is enabled when your menu is set to the left.
If this is enabled please set the menu to the left as you would link it and include admin login in the Private Content area so we can check what is hiding the search icon.

Best regards,
Mike

Hi,
Thank you for the feedback and glad to hear this helped, Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hey omerh570,
Sorry for the very late reply and thanks for the link to your site, it looks like you currently have the menu set to the left, please change this setting at: Enfold Theme Options > Header > Header Layout > Menu and Logo Position and pick a layout with the menu to the right.

Best regards,
Mike

Hi,
Thank you for the feedback, I have submitted a feature request to the dev team, and I will reply here as it is updated, there is also a chance that the dev may also ask questions here, so we will leave this open. Thank you for your patience.

Best regards,
Mike

Hi,
The dev team has replied that they thought adding a way to choose ACF fields from an element in the ALB was a good idea and they opened a feature request on their end. They said they would take a closer look after the current release. I’m sure you can understand they are trying to release v4.8 first.
But I believe this is quite encouraging, I will reply further as the feature request is updated, or the dev team might also ask questions here, so we will leave this open.

Best regards,
Mike

Hi,
Sorry for the very late reply, perhaps the function you are referring to is this one:

add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) {
	$quality = 65;   // compression level what you like in percent
	return $quality;
}

But I believe this was used before the default_jpeg_quality was added to the parent theme (Enfold) functions.php, currently the function is:

$resp_img_config = array(
		'default_jpeg_quality'	=> 100,						//	ensure best image quality - use filter avf_responsive_images_defaults to change
		'theme_images'			=> $avia_config['imgSize'],
		'readableImgSizes'		=> $avia_config['readableImgSize'],
		'no_lazy_loading_ids'	=> array()					//	add is's of images for permanently disable lazy loading attribute
	);

$resp_images->reinit( $resp_img_config );

Please note the 100 in the code.

Best regards,
Mike

Hi,
I certainly don’t want to sound rude, but unfortunately, I have been trying to explain that WordPress doesn’t perform this way.
You can prove this to yourself by testing on a WordPress install without Enfold and your image with the IPTC

Best regards,
Mike

Hi,
Wow, how about that? No, I didn’t do anything 😃
Thanks for the link, so the featured image on event detail page looks like it is using the “gallery” sized image (845px)
You could try editing the parent theme functions.php around line 187:

to this:
$avia_config['imgSize']['gallery'] = array('width'=>845, 'height'=>684 , 'crop' => false);
you would then need to regen your media thumbnails so the old images at this size are not cropped, all new images uploaded will follow this rule.
Or I believe you can choose which size image to use, within the element, if so try choosing the “masonry” sized image (705px), as you can see in the screenshot above, the masonry image is not cropped.

Best regards,
Mike

Hi,
Thank you for the screenshot, it looks very similar to my example above with the shortcode, to me this looks like the correct solution, please give this a try.
You can use the same slider as on your homepage if you copy and use that shortcode, you can see all of the pages shortcodes by using the Avia Layout Builder Debugger, or just recreate the element with the shortcode wand as described above.

Best regards,
Mike

Hi,
These fields in the WP media library are a part of the WP core and are not designed to get info from the images, they are designed to be entered manually by the user. (remember from above: “GD always strips profiles by default”)

But remember that the default WordPress has the functions for working with the GD script and not ImageMagick, so now that you are using ImageMagick and you want to incorporate its features I would recommend seeking out advice from an ImageMagick on WordPress expert, as in a freelancer, since ImageMagick is not used by WordPress by default researching into this further is beyond the scope of our support.

Best regards,
Mike

Hi,
To remove the ajax search result date, please try this css:

.ajax_search_excerpt {
	display: none !important;
}

I’m not sure what you mean by adding the FULL-SCREEN SLIDER element inside a 1/1 layout, for a single product page, please include a mockup. I think you would like to edit the product page with the Advanced Layout Builder (ALB), and use columns, sliders, etc.
Which you can by switching the ALB:

and using these ALB elements:

But you can not re-create the exact same product page as the default Woocommerce product page, but you could create your own layout. Try editing a test product and see if this will help.
If it is important to keep the current layout and add a slider as I did above in the screenshot, then the steps I showed would be the solution.

Best regards,
Mike

Hi,
I couldn’t find the single product page in your screenshot but I did find another linked below.
It is possible to inject a slider below the title bar on a single product page with a function and the slider shortcode in your functions.php
But I’m unsure if every single product gets the same slider or a different one, and if you plan on changing this often or never.
This example would be to add one slider to all single product pages. First, we will want to get the shortcode for our slider by using the Magic Shortcode Wand tool in the Classic Editor:

Then for this example I added only one image using the “featured” image size (1500px x 430px) with a title & caption, this is the shortcode result:

Then we will add that shortcode to this function, replacing [shortcode-here] with your shortcode.

add_action('woocommerce_before_single_product', 'woocommerce_before_single_product_mod');
function woocommerce_before_single_product_mod() {
	if(is_product()) {
		echo do_shortcode("[shortcode-here");
	}
}

Then add this code to the end of your functions.php file in Appearance > Editor.
My example looks like this:

add_action('woocommerce_before_single_product', 'woocommerce_before_single_product_mod');
function woocommerce_before_single_product_mod() {
	if(is_product()) {
		echo do_shortcode("[av_slideshow size='featured' control_layout='av-control-hidden' perma_caption='aviaTBperma_caption' conditional_play='' animation='slide' transition_speed='' autoplay='false' interval='5' lazy_loading='disabled' alb_description='' id='' custom_class='' av_uid=''][av_slide slide_type='image' id='866' video='https://' mobile_image='' fallback_link='https://' title='Caption Title' video_ratio='16:9' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link_apply='' link='lightbox' link_target='']Caption Text[/av_slide][/av_slideshow]");
	}
}

I also adjusted the slider top & bottom padding and margin with this css:

.single-product .template-shop {
    padding-top: 0 !important;
}
.single-product .template-shop .avia-slideshow {
    margin: 0 !important;
}

the rresults:

Please note that the slider is inside the page container so the page padding and margin still apply.

If you are going to try this please edit your functions.php via FTP so if you make an error in the code and it crashes your site, you will be able to correct it. The WordPress > Appearance > Editor works good and is easy to use, but if your site crashes you can not reach the editor, but with FTP you can.

Best regards,
Mike

Hi,
Glad to hear this helped, unless there is anything else we can help with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Thanks, currently your code is like this:
$('.logo a').find( 'img' ).attr('src', 'xxx/uploads/2021/01/2nd-logo.png').css({ 'padding-top': '20px','width':'max-content'});
try removing the width part of the css and only use the padding part in the jQuery, then use this css in your Quick CSS to make the logo 200px:

.logo {
	width: 200px !important;
}

The reason is that you want the logo 200px wide always, but the script is only fired on-scroll, so css in the Quick CSS would work better. The padding css is only for the second image (small one) to center it vertically, and is used only on scroll so the css in the jQuery is the correct approach.
I hope this helps.

Best regards,
Mike

• This reply was modified 4 years, 2 months ago by Victoria.