Support » Plugin: Autoptimize » Images do not display after adding custom class

  • Resolved Carl Gross

    (@carlgross)


    I’m back, with a follow up question to the previous lazy load question. I am trying to add a custom class to each tag, so I can then exclude them from lazy load. I have added that class to my tags. But now, when I load my page, these images don’t display at all. Here is a screenshot illustrating the issue. This screenshot is for one image, but the same occurs for all images in my slider (i.e. all images with this custom class), even as they slide into view.

    To be clear, I still have the Autoptimize lazy load enabled, but I have not yet added a custom class to the lazy-load exclusions field (it is still empty). If I disable Autoptimize lazy load, the issue is still present. But if I deactivate Autoptimize, the issue goes away.

    I’ve tried clearing the Autoptimize cache, and the browser cache, but to no avail.

    One additional oddity is that this issue occurs on my live site. I have a private clone of my site that I use for testing and development–the issue does *not* occur on my dev site. Curious.

    Thoughts on that?

    Currently, I’ve removed the custom class from my site, so unfortunately you cannot see it in-action. If it really helps though, I could perhaps re-add the custom class on my live site, so you could see the issue in-action. That would of course break my home page slightly (i.e. display blank images in the main image slider), so I would need that to be relatively short duration.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    my only guess is that the class you choose is coincidentally already in use, try another one maybe, with some randomization?

    Good idea actually. But I tried renaming the class, but the issue remained. I didn’t see anything of note in the PHP error log.

    I think I fixed it, and the issue seemed to lie in some potentially non-standard or improper coding I was doing. Here is what I was doing. To add the custom class to my elements, here is the PHP code I added:

    $hh_hs_class = 'class=hh_disable_lazy';
    <img src="<?php echo esc_url( $slide['image'] ); ?>" <?php echo esc_attr( $hh_hs_class ); ?> />

    As you can see, I saved an entire string as class=hh_disable_lazy then tried to echo that into the tag. On my dev site, there were no issues with this, but on my live site, this seemed to cause the issue. I say that because I changed my method so that I saved only the class name in the string, so my code was:

    $hh_hs_class = 'hh_disable_lazy';
    <img src="<?php echo esc_url( $slide['image'] ); ?>" class="<?php echo esc_attr( $hh_hs_class ); ?>" />

    When I did this, the issue went away. Thoughts on that? Is it not advised, or even incorrect, to insert the class name as I did in my first attempt, i.e. not only save the class name to a variable, but the entire class= portion as well? My motivation for trying that was so I could hopefully save an empty class written in some cases. I realize I may not have described that very well. If that’s the case, just know that my motivation was relatively weak 🙂

    Does your plugin amend, or re-write the existing class inside an tag? If so, maybe the way I was inserting the class was interfering with that? I say that in-part because when the issue was present, the tag’s src attribute never switched over to the data-src value. Shouldn’t your plugin ensure that occurs? Anyway, I could be way off there.

    Also, it’s a bit weird that the issue manifested itself on my live site, but not my dev site.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    No, AO does not touch/ change/ act on classes (except for lazyload exclusion purposes).

    The only difference between the 1st & 2nd method seems to be the lack/ presence of the quotes around the classname. Maybe indeed compare results in the HTML page source between the 2 methods to understand what was happening?

    OK thanks for all that. Things are working as expected and as desired now, so I probably won’t put too much time into troubleshooting what went wrong. If the issue occurs again, maybe I’ll revisit it.

    We can consider this resolved.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.