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

Hey bts-de,
Sorry for the very late reply and thank you for your patience, so your image in this case is a background image of the link which does have the title tag: title="Individuelle Sonderanfertigung von MonLines, Soundbar Lift" typically background images do not have titles for accessibility compliance. In this case, I believe it interferes with screenreaders when the link has a title tag that is wrapping a background image with another title tag.
I believe in your case the link title tag is retrieved from the image title field in the media library, and so if the image title tag was included then you would have two titles wrapped that are the same, which would cause accessibility issues.

Best regards,
Mike

Hi,

@mgyura thanks for your feedback, I was not able to reproduce the error on your site, and I was only able to reproduce the error on @Gianluigi’s site when I used a VPN, as you can see from the screenshots and DevTools error link. So I’m assuming that you are experiencing the same issue, but this could be incorrect to assume because other factors could be browser-based “Ad-Blockers” or extensions, etc, but from your post that you tested on a friend’s Windows machine I doubt both machines are using the same extensions. Thus a slow network from your side, such as a wifi hotspot, phone signal or on your webhost side, CDN, etc makes sense to me.
All of the icons are shown with the font entypo-fontello.woff2 as shown in the screenshot above, not just the YouTube one, the reason the YouTube one is not showing is because the browser did this: [Intervention] Slow network is detected in the DOM waterfall.
But please note that the error and screenshots are from @Gianluigi’s site when I used a VPN, I was not able to reproduce the error on your site. Maybe it is a stretch to say that you are both experiencing the same error, but I wanted to try my best to find some sort of reason why this is occurring and this was the only this I could see the error on Windows 10 & Mac Big Sur
Please try testing your site like this: Go to Screenshot Guru and enter your url and view the results which show your YouTube icon:

Best regards,
Mike

Hi,
Sorry for the very late reply and thanks for your patience, I have two ways to load font awesome with functions.php snippets, the first one enqueues it and the second loads the css in the wp_head, you can try both (one at a time) to see which will give you a better load time, but there really should not be too much difference between them. Also note that the first one was loading v4.7.0 when I saved the code and the second was loading v5.3.1, but you can adjust to suit, I left the original links to demonstrate the link format.

add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
	function enqueue_font_awesome() {wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

function Font_Awesome_5(){
    ?>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <?php
    }
add_action('wp_head', 'Font_Awesome_5');

Best regards,
Mike

Hey 2SINN,
Sorry for the very late reply and thanks for your patience and the login to your site, I didn’t login though instead I copied your full-size image to my localhost and tried a few different “solutions” from the past to try to find one that would work for this.
So for your image please add the custom class openfullsize

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

function custom_script() { ?>
    <script>
(function ($) {
$(document).ready(function(){
    $('.openfullsize .avia-image-overlay-wrap .avia_image.lightbox-added').click(function(){
        var fullsize = $(this).find('img').attr('src');
        $('img.mfp-img').attr("src", fullsize);
    });
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

This will work and should not cause any conflicts because of the custom class, please note that it is still important that the “full-sized” image is explicitly selected in the image element.

Best regards,
Mike

Hey edechauvigny92,
Sorry for the very late reply and thanks for your patience, I assume that you followed these steps because you said that it doesn’t more “anymore” implying that it did work once for you. So to test on my localhost I followed these steps and changed my FR language file “Vous aimerez peut-être aussi” to “Tu pourrais aussi aimer” and this worked correctly for me using a child theme with Enfold v4.8.1 & WordPress 5.7
So perhaps your Poedit edit didn’t save correctly, or your functions.php code in not correct, or you have a plugin or cache that is overwriting the change? Please review these and try again.

Best regards,
Mike

Hi,

@ecomstore sorry but this thread is about adding ‘playsinline’ to the background video tag for a section from 2019, if you are having issues with Safari and videos then please open a new thread but note that Safari 12.1 had a known issue that seems to have been corrected with Safari 13.1+
The current version of Safari is 14.0.2 and the videos seem to work fine?

Best regards,
Mike

Hey Lissasan,
Sorry for the very late reply and thanks for your patience. To change the post slider img link to the same link in the post slider excerpt, try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_script() { ?>
    <script>
(function($){
  $(document).ready(function(){
  $("article.slide-entry").each(function(){
    var callinkurl = $(this).find(".slide-entry-excerpt.entry-content a.callink").attr("href");
    $(this).find("a.slide-image").attr("href", callinkurl);

});
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

I tested this on your test page by injecting the javascript via the browser and it worked correctly, but a key point is that your post slider excerpt link has the custom class “callin”, so please ensure you continue to add this custom class.
Please give this a try and let me know if this helps.

Best regards,
Mike

Hi,
@Rafíyel thank you for your input, but this thread was last active in 2019. We will close this.
If you have a specific question please create your own thread so we can assist 🙂

Best regards,
Mike

Hi,
Glad to hear this helped you move your project forward. As I pointed out earlier this thread is very long now and is covering too many topics to make reasonable sense, lets close this thread, and if you have any future questions you can open a new thread and we will be happy to assist, agree?

Best regards,
Mike

Hi,
Thanks for the feedback, and thanks for the login, perhaps a better solution would be to add a custom class to each of the blog elements on the homepage and duplicate this class on the corresponding blog elements on your other pages, this would replace the section ID of the css.

So every blog element with the custom class “red” would show the blog entries in red no matter what page they are on. Please give this a try, if you like I can demonstrate this with one blog element on your homepage and the corresponding “other” page.

Best regards,
Mike

Hi,
Glad to hear that this helped, in this case copying the selector within the table I had used Inspector > Copy Selector, but the heading-row also contained another Span, thus the two rules above.
So as you pointed out, typically this will provide a “good enough” selector, but in this case it was a little different 🙂

Best regards,
Mike