Hi,
Sorry, there is not a shortcode for the “related post element” other than my old “hack”.
The correct way to use the “Related Post” element is to not use the Advanced Layout Builder for posts and to assign “Tags” to each post so that they have a taxonomy to connect their relationship and thus be displayed.
So to help you move forward correctly with your current Advanced Layout Builder “posts” and create a “Related Post” area anywhere on your page I will demonstrate how this can easily be done with the “Blog Element”, but for now on I will call this “Similar Posts” to not confuse this explanation with the built-in “Related Post”.
So the first step is to open the backend of the post that you created with the ALB:

Then in the element choose Display entries from a custom taxonomy & Post Tag & Grid Layout & No Title and no excerpt:

Then in the Styling tab choose 3 Blog Grid Columns & 3 Post Numbers & No Pagination:

Naturally you can change any of these settings to the way you wish, for my example I decided to place the blog element in a 3/5 column, but you can make it different for your site and then further customize with css if you wish.


For future searchers that find this thread and were hoping to use woocommerce shortcodes to show products in-line on posts that are similar or related items to posts please see this post

Best regards,
Mike

Hi,

@Guenni007 thank you for this info, I had not looked at the WordPress core code, I believe that this also points to WordPress working to make the core files accessibility compliant as this double title tag causes issues with screen readers. I would not recommend using a filter to force what WordPress is removing, but this will naturally be up to each user to decide.

Best regards,
Mike

Hey Almo,
Sorry for the very late reply, I see that your screenshot is of an email that you received from the autoresponder, the spaces, and the gaps that you see is created by your email clients default css and how it addresses line breaks and HTML entities.
Messages sent by the contact form or autoresponder doesn’t include any css from the theme and thus can not be adjusted by the theme, unlike messages that are sent by commercial autoresponder services that also attach images and css that do style their messages.
While it would be possible from a technical standpoint for you to re-write the contact.php file to achieve this, this is outside our support scope because our autoresponder is only meant to have the basic functionally of sending the message and not a full WYSIWYG editor.
Thank you for your understanding.

Best regards,
Mike

Hi,

@stucki1 glad to hear that @Guenni007 was able to help you sort this out. Thank you for sharing your solution @Guenni007

Best regards,
Mike

Hi,

@corefocusgroup as we have not heard back from you as to if this had helped you, but you can also see this thread where unfortunately there is no other way to load the icon font aside from using font face, so the only way to optimize it is to adjust the font-display property.

function avf_custom_font_display( $font_display, $font_name )
{
	// Check for a font and change the default theme setting
	if( 'entypo-fontello' == $font_name )
	{
		return 'block';
	}

	return $font_display;
}

add_filter( 'avf_font_display', 'avf_custom_font_display', 10, 2 );

Best regards,
Mike

Hi,
Sorry for the very late reply, as I understand your question you would like to have a conditional function to change the “shop_catalog” image based on screen size, you can try the solution on this thread

add_filter( 'woocommerce_get_image_size_thumbnail', function( $size ) {
    if( ! is_singular('product') ) {
        return array(
            'width'  => 200,
            'height' => 300,
            'crop'   => 0,
        );
    }

    return $size;
} );

and then you would need to regenerate the thumbnails and test with a new item. If this doesn’t help then you will need to set the image size in between the desktop and mobile sizes and then use css to scale to images up and down based on screen size, such as Victoria had suggested.

Best regards,
Mike

Hi,
Thank you for your patience, I believe that you are referring to the section in the screenshot in the Private Content area for mobile screens.
Please give this css a try:

@media only screen and (max-width: 767px) {
    .locatie-tabel tr:first-child > td:first-child {
        padding-top:15px !important;
    }
}

and see my test result below.

Best regards,
Mike

Hi,
Sorry for the very late reply, the mobile menu is created from the regular menu that is created in the WordPress menu option, it is not really another menu, so you should create a footer menu and a secondary menu, which is the menu used above the header and not shown on mobile, and then your two main menus for each language which will also be used for mobile menus.

Best regards,
Mike

Hi,
I believe that the title tag of the link that wraps the image is the title of the image in the media library correct?
I tried to point out above that adding the same title to the link and the image will cause accessibility issues with screen readers.
In elements where the image is not wrapped in a link the title tag is applied to the image, but when the image is wrapped in a link the title tag is applied to the link. Do you plan on having your site compliant with users that have accessibility issues such as low sight?

Best regards,
Mike

Hi,
Your image is not showing so I’m not quite sure what you wanted to show, but I don’t see an author tag in the link of the image.
What I was trying to point out is that the link has a title tag that wraps the image, please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
I disabled the “Enfold Related Posts Element” plugin and disabled “lazy loading” in the Enfold Theme Options > Performance > Lazy Loading cleared your cache and the images are loading better now.
Please don’t use this plugin, I wrote it almost 4 years ago, poorly 🙂 it was never official and I have removed it from GitHub today.
Anyways, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad this helped, it is not “better” to include the code only on the landing page like I did, I only do this to test, but sometimes I like to do this with a script it might only be used on one page, because I’m a minimalist 🙂
Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hi,
The Error “Uncaught ReferenceError: jQuery is not defined” in the Console, typically means that you are loading jQuery in the footer, so the script is running before jQuery is loaded.
This is an option in the theme settings at Enfold Theme Options > Performance > Load jQuery in your footer, but many caching & minifying plugins also do this, so please check and disable.
If you don’t see the Enfold Theme Options > Performance > Load jQuery in your footer option, then this means that your webhost has modified the WordPress install.

Best regards,
Mike

Hi,

Testing it on Screenshot Guru, I can see the YouTube icon, but that doesn’t really tell me anything

What it says is that a completely different computer on a different network is showing your page loading correctly, this would be the same as if somebody wanted to know if your website was down or not, they would use downforeveryoneorjustme.com
I hear your frustration and I wish I had more to offer but Nikko and I both can not reproduce this, and a third-party test can not either. I will ask the rest of the team to take a look, perhaps I missed something.

Best regards,
Mike