Need a solution for 404 errors when image not found

[bghouse]

I've spent almost 5 hours today trying to solve this problem, and read everything I could find up here. I have a client that we are using retina.js on a wordpress site. We are using the getbyTag because it's a directory site and I need it to find all these image markers and the @2x versions.

unfortunately, there are images the client is uploading in wp blog pages that need to NOT check for 2x, because there will never be 2x versions and it is throwing 404 errors. It's wordpres so no, there is no way to put data-no-retina in for the image. It's dynamic content.

I tried going the other direction with a document.querySelectorAll and specifying CSS selectors, which worked everywhere except this dynamic map markers when you zoom in...

What I desperately need is a way to say: "on load, grab all the img tags. Then, remove any where they have a class="no-retina", and only THEN go looking for the @2x" Of course, that's hoping I can slam in a class on every image, sometimes I cant without hacking other people's plugins. So I can usually always search for say .no-retina img, but not img.no-retina

For me personally, I dont really care about some 404 errors. But my clients get completely wigged when their Google Webmaster Tools says there are errors. They start getting all Chicken Little on me - lol.

Anyone have an idea for me - cause I'm pulling my hair out on this one.

[joshuaiz]

You could use jQuery to add a class or add data-no-retina to the dynamic images.

[bghouse]

Thanks for the idea, I guess I'd have to basically run this before retina.js, find the images that need to have data-no-retina on them by their wrapping html elements with the .no-retina class, and add the attribute. Eek... talk about a php programmer on the wrong side of the jquery river - hahahaha. my head hurts :-)

[joshuaiz]

Just call this before retina.js and you should be good to go:

jQuery(document).ready(function($){
 $('.no-retina').attr('data-no-retina');
});

[bghouse]

thanks joshuaiz, but sadly I can't get the class directly on the img element everywhere, sometimes the best I can do is put it on a div wrapper somewhere above the img. This is particularly the case, currently, with a couple of plugins that output via widget that my client is using. I'm trying to avoid changing the plugin for obvious reasons... but for the image that I can get a class onto this will work great.

[joshuaiz]

What I would do in this case is use a page slug body class function. This one should work:

http://www.wpbeginner.com/wp-themes/how-to-add-page-slug-in-body-class-of-your-wordpress-themes/

Then you can target all images on certain pages and in certain sections like .hentry, .entry-content or .sidebar depending on your theme and what images you want to target.

So something like this:

jQuery(document).ready(function($) {
    $('.my-page-slug .sidebar img').attr('data-no-retina');
});

...should work as long as this script loads in the footer after the main page load and before retina.js. Then you don't need a specific class on the images - you are targeting all of them in that particular section.

[bghouse]

Ah - yes, perfect - I wasn't thinking that I could chain down to the img like that... For some reason my brain just still sort of shuts off with jquery, even though it's completely logical. Thank you again!

[joshuaiz]

@bghouse yes this is the beauty of jQuery and the DOM. While it is good practice to not have super-specific selectors, sometimes it as unavoidable. Just like css, you can chain selectors together to target exactly what you want.

I always use a page slug body class function with every WordPress site. It makes it so much easier to add page-specific styles.

If you want a primer on jQuery, I recommend this video series:

http://code.tutsplus.com/courses/30-days-to-learn-jquery

Jeffrey Way really makes things clear and easy to follow along. On a personal note, I went through about half of the course making sure to type out all the examples then started from the beginning again. With this approach you will be a jQuery pro in no time.

[bghouse]

awesome - thank you so much!