Hey Jason,

Thank you for the inquiry.

You have to apply a featured image for each post. The image that you added in the Advance Layout Builder (ALB) will NOT be automatically set as featured image. Please check the documentation below for more info.

// https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/#setting-a-featured-image

Best regards,
Ismael

Hi,

Thank you for the inquiry.

1.) The maximum size of the masonry thumbnail is 705px so uploading images with that exact same size should be fine, uploading a larger image is recommended.

2.) Please try to add this code in the functions.php to display the post summary and read more link in the category pages.

function change_blog_archive_style() {	
	global $avia_config;
	if(!is_single()){ $avia_config['blog_content'] = "excerpt_read_more"; }
}
add_action('get_header', 'change_blog_archive_style');

Best regards,
Ismael

Hey Ressources_Formation,

Thank you for the inquiry.

Looks like the masonry element is using a smaller version of the images (180x180px) which is why the images are blurry. It should be using the masonry thumbnail by default, which has a maximum width of 705px.

Did you adjust or select a different thumbnail in the Styling > Masonry Settings > Image Size settings? Please try to select a different thumbnail with larger dimension like the Masonry or Gallery thumbnail. You should also try to temporarily deactivate the image compression plugin, see if it changes anything.

Best regards,
Ismael

Hi,
Glad to hear, for two images you need to specify the two images, the first image container was .avia-image-container.avia-builder-el-8 img the second one is .avia-image-container.avia-builder-el-10 img so to add both to the same script it would look like this:

function custom_replace_images_in_image_element() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
var image1 = document.querySelector("#top.postid-142 .avia-image-container.avia-builder-el-8 img");
var link1 = document.querySelector("#top.postid-142 .avia-image-container.avia-builder-el-8 a");
var source1 = ("https://archiv.dorfgeschichte.li/wp-content/uploads/fruher-und-heute/Restaurant-Fernsicht-1966.jpg");
var image2 = document.querySelector("#top.postid-142 .avia-image-container.avia-builder-el-10 img");
var link2 = document.querySelector("#top.postid-142 .avia-image-container.avia-builder-el-10 a");
var source2 = ("https://archiv.dorfgeschichte.li/wp-content/uploads/fruher-und-heute/Restaurant-Fernsicht-1966.jpg");
image1.src = source1
image1.srcset = source1
link1.href = source1
image2.src = source2
image2.srcset = source2
link2.href = source2
});
</script>
  <?php
}
add_action('wp_footer', 'custom_replace_images_in_image_element');

but I see your test page has changed so I don’t know if we are talking about the big images or the thumbnails, but as long as you specify the image containers this should work.

Best regards,
Mike

Hi,
It is a page created with the Advanced Layout Builder, so you can edit it.
Our documentation explains that a Coming soon page or a Maintenance mode page both use the maintenance mode option and you just choose any page you wish to use.
The demo that you linked to is just a single page with a color section that has a background image, some text, an Animated Countdown element and a contact form:

If you already have a demo imported I would not recommend importing a second demo as it will change your settings, if this is your first and only import for your root domain then go ahead.
Please note in this demo the background image for the color section will need to be set, and the Animated Countdown will not show until you set the future date and time, by default it is a past date. So when you first look at it, it will just be a white screen because the text is white, but once you set the background image you will see the text.
Another option is to Enable the Avia Layout Builder Debugger that will add a box under the Advanced Layout Builder to enter or copy the page shortcode, you can add this shortcode:

[av_section min_height='100' min_height_pc='25' min_height_px='500px' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' padding='large' custom_margin='0px' custom_margin_sync='true' av-desktop-custom_margin='' av-desktop-custom_margin_sync='true' av-medium-custom_margin='' av-medium-custom_margin_sync='true' av-small-custom_margin='' av-small-custom_margin_sync='true' av-mini-custom_margin='' av-mini-custom_margin_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' color='main_color' background='bg_color' custom_bg='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/coming-soon/wp-content/uploads/sites/8/2014/09/people_town_dark.jpg' attachment='23' attachment_size='full' attach='fixed' position='center center' repeat='stretch' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' custom_arrow_bg='' css_position_z_index='' av-desktop-css_position_z_index='' av-medium-css_position_z_index='' av-small-css_position_z_index='' av-mini-css_position_z_index='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-a1x9c' sc_version='1.0']

[av_one_fourth first av_uid='av-9gjw4']

[/av_one_fourth][av_one_half av_uid='av-8vhv8']

[av_image src='https://kriesi.at/themes/enfold-coming-soon/files/2014/09/logo_coming_soon-80x80.png' attachment='16' attachment_size='thumbnail' align='center' animation='pop-up' link='' target='' styling='no-styling' caption='' font_size='' appearance='' av_uid='av-83py0'][/av_image]

[av_heading tag='h1' padding='10' heading='<strong>Coming Soon</strong><br/>to a place near you!' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#ffffff' size='44' subheading_active='subheading_below' subheading_size='15' custom_class='' av_uid='av-7hhy0']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.sellus dolor. Maecenas vestibulum mollis
[/av_heading]

[/av_one_half][av_one_fourth av_uid='av-6xyuw']

[/av_one_fourth][av_hr class='invisible' height='100' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-6dkag']

[av_countdown date='10/02/2023' hour='12' minute='0' timezone='UTC' min='1' max='5' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' align='av-align-center' size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' size-text='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' style='av-trans-light-style' color_numbers='' color_timeunit='' alb_description='' id='' custom_class='' template_class='' av_uid='av-5u01o' sc_version='1.0' admin_preview_bg='']

[av_hr class='invisible' height='100' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-5bvnk']

[av_one_fourth first av_uid='av-49xao']

[/av_one_fourth][av_one_half av_uid='av-3nz68']

[av_contact email='' title='' button='Notify me on Launch' on_send='' sent='Thank you!' link='manually,http://' subject='' autorespond='' captcha='' color='av-custom-form-color av-light-form' av_uid='av-331gw']
[av_contact_field label='Name' type='text' options='' check='is_empty' width='element_third' av_uid='av-2su9g'][/av_contact_field]
[av_contact_field label='E-Mail' type='text' options='' check='is_email' width='element_third' av_uid='av-25qmk'][/av_contact_field]
[/av_contact]

[av_textblock size='21' font_color='custom' color='#ffffff' av_uid='av-1r2uk']
<p style="text-align: center;">Want to get notified once we are ready to launch? Leave us your mail address and we will!</p>
[/av_textblock]

[/av_one_half][av_one_fourth av_uid='av-102pc']

[/av_one_fourth][/av_section]

but you will still need to set the image.

Best regards,
Mike

Hi,

Glad to know that the filter is working. We provided an explanation in the following thread.

// https://kriesi.at/support/topic/bug-in-enfold-for-woocommerce-prduct-images/#post-1363586

Using the filter just reverts the thumbnail size back to the default woocommerce thumbnail, which is required by the Woocommerce > Product Images settings.

Best regards,
Ismael

Hey WebbR,

Thank you for the inquiry.

Adding this filter in the functions.php file should help.

dd_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

This will revert the thumbnails back to default (woocommerce_thumbnail).

Best regards,
Ismael

Hey j0schi,

Thank you for the inquiry.

The theme sets the product thumbnail size to 450x450px by default but you can use this filter in the functions.php file to revert the product thumbnail settings back to default.

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Related threads:

// https://kriesi.at/support/topic/bug-in-enfold-for-woocommerce-prduct-images/
// https://kriesi.at/support/topic/woocommerce-product-image-size-bug/

Best regards,
Ismael

Hi,

Thank you for the update.

Did you use the filter? The filter can be added in the child theme’s functions.php file. You don’t have to redo it again on every update. It will override the default thumbnail shop_catalog and replace it woocommerce_thumbnail.

Best regards,
Ismael

Hi,
Glad to see that you found a plugin for this, to center the thumbnails try this css:

#top #main .thumbnail_container img {
    margin: auto;
}

the expected results:

Best regards,
Mike

Hi,
Unfortunately not with your current thumbnails because they are cropped, the thumbnail image you see is the whole image.
Please see the direct image link to the thumbnail below, you will see what I mean.
I don’t see any other solution but to create square new images.

Best regards,
Mike

Hey orianos,

Thank you for the inquiry.

You may need to add this filter in the functions.php file to revert the product thumbnail settings back to default.

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Related threads:

// https://kriesi.at/support/topic/bug-in-enfold-for-woocommerce-prduct-images/
// https://kriesi.at/support/topic/woocommerce-product-image-size-bug/

Best regards,
Ismael

Hi,
Since your image is a portrait layout and looks like it is twice as tall as it is wide, I believe you will find your best results will be if you make your original image square and then upload it, your new thumbnails will then show the full product. Woocommerce images work better if they are square since the div is also square.

Best regards,
Mike

Hey bptdxvkalsel,

Thank you for the inquiry.

You may need to add open graph data in order to display a thumbnail when sharing an entry. The following plugin should help.

// https://wordpress.org/plugins/opengraph/

This is also available on Yoast.

// https://yoast.com/help/getting-open-graph-for-your-articles/

Best regards,
Ismael