Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1395621

    on the site https://mondzorgcentrum-winschoten.nl/ontmoet-ons/ I made an overview of all members of staff. On mouse over you’ll see a 2nd image. I used the codeblock for this, hereby an example of code to realize this.

    <img class="circular--square" img onmouseover="this.src='https://mondzorgcentrum-winschoten.nl/wp-content/uploads/2023/01/lennie-van-vulpen-2-250x250px.jpg';" onmouseout="this.src='https://mondzorgcentrum-winschoten.nl/wp-content/uploads/2023/01/lennie-van-vulpen-1-250x250px.jpg';" src="https://mondzorgcentrum-winschoten.nl/wp-content/uploads/2023/01/lennie-van-vulpen-1-250x250px.jpg"

    On mobile I want to use the testimonial block for this, by putting the piece of code within the text field. The only problem is that upon a second time the page is saved the text editor alters the code, simplifying it to (causing the ‘on mouse animation’ / ‘second image’ to dissapear’:

    <img src="https://mondzorgcentrum-winschoten.nl/wp-content/uploads/2021/05/mondzorgcentrum-winschoten-kim-dijkman-1-250x250px.jpg" />

    How do I stop the Enfold editor from changing my code? Surely there is something I can add in a .php file or change a setting to stop this nuisance?


    Hey the_digital_manager,
    Thanks for your patience, but unfortunately the text field uses the WordPress function so there is not a way to disable this.
    Try adding your second image as a data-url attribute like this:

    <img class="circular--square" src="https://mondzorgcentrum-winschoten.nl/wp-content/uploads/2023/01/lennie-van-vulpen-1-250x250px.jpg" data-url="https://mondzorgcentrum-winschoten.nl/wp-content/uploads/2023/01/lennie-van-vulpen-2-250x250px.jpg" />

    WordPress will not remove this attribute when you try to re-edit the page as long as you edit in the text tab
    Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor to swap the images on hover:

    function swap_image_with_data_url() { ?>
    window.addEventListener('DOMContentLoaded', function() {
            $(this).find('img').attr('data-src', $(this).find('img').attr('src'));
            $(this).find('img').attr('src', $(this).find('img').attr('data-url'));
            $(this).find('img').attr('src', $(this).find('img').attr('data-src'));
    add_action('wp_footer', 'swap_image_with_data_url');

    Now the images will change on hover and back on mouse-out
    Please see my test page in the Private Content area.

    Best regards,


    Mike, I will test this right away, but I must say: WOOOHOOO, I’m so happy :D
    love you guys. always going the extra mile. If you are ever in the netherlands I’ll definitely say “first couple of rounds of beers on me!”


    It works. ‘case closed’ and many many thx!


    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘text editor alters code’ is closed to new replies.