Instant article and repeating image - wordpress

I received this general warming:
General Warnings: Repeating Cover Image and First Image: The cover image and the image '9iememaison.quebec_v1xi5heeg9_8dqdz.png' seem to be the same or almost the same image. Please consider removing or replacing one of the images.
So I dug into the internet and I found nothing - except this:
https://wordpress.org/support/topic/same-image-displayed-twice
"I performed the preg replace on function "get_the_content()" of "class-instant-articles-post.php" just before returning the variable $this->_content;"
But my problem is that my cover image and first image are the same. How do I either remove the cover image, or rename the first image in a way like WordPress and instant article thing? It's an other image but at the moment it's the same image, because my feature image on my website and the thumbnail generate and image use in post are all the same. I don't use different image, so the best way is maybe like making a WordPress function that:
Copies the image
Renames the image
Puts that link in the post and if image is update then this image also.
Or maybe I'm just going to deep and there is an easier way to fix this.I didn't find it after checking all the instant article wp support, and looking through the web.

The best way to solve this, if you often have this situation, is probably to disable the Cover Image entirely by hooking into the plugin.
This can apply even if the error/warning doesn't show. I have found it doesn't show a warning when the images are pretty much exactly the same, which is strange, only when they are very different in size but same content/name.
Haven't found a solution for disabling Cover Image. Will hopefully update this if I end up having to create one.
Here's another relevant thread:
https://wordpress.org/support/topic/general-warningrepeating-cover-image-and-first-image/#post-8731646
and a very relevant github ticket:
https://github.com/Automattic/facebook-instant-articles-wp/issues/57

Related

WordPress website loading image which is not present in my website

My WordPress website takes a lot of time to load pages, a problem that many of us face. I used GT metrix to check my WordPress page and then checked my website waterfall.
One thing I saw taking more than half time of my page is an image which is not uploaded in my website.
check this image of gt metrix waterfall:
I checked it, and I found this is an image which I have not used in my entire webpage. Also I could not find where is this image used.
Same thing happens in different pages that has different images to it.
I deleted one image from my media but now when I check the GT metrix waterfall I get a 404 error code which means its still trying to load that image and I cannot find it.
This is a theme which I had purchased and its not a popular theme like divi or ocean and hence could not contact the support.
How to check where a particular image is used in my webpage using
the media library (can I do that?)
How to find out and remove this image? Or at least is there a way where I can delete the image from the library and hence my webpage should not look for this image wasting its time instead of getting a 404 code
Your problem is quite common indeed, for your specific case i can suggest by starting to search the image name in both code + DB, it MUST be somewhere.
If you cannot find it inside your stuff there's only one answer left: there's some JS third party script that is loading that for you, but in this case i seriously dubt it would be in the same domain as your site.
Using the media library there's not much you can understand, if you are VERY lucky it will have a message like "attached to" but that thing cover like 10% of the cases, most of the time the image ARE used but are not attached to anything like a post, so the media library won't tell you anything
I've had this happen before a few times, too. Isn't it frustrating!? If you could provide a URL, I (and others, I'm sure) would be happy to take a look and try to figure out what's going on. :)

How does the share-offsite url determine what size image to use?

We have the ability current to share current articles on our site by clicking on the sharing icon. This loads up a URL like:
https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.mydomain.com%2Fbuild-to-suit-leases-0419%2F
What's odd, is that the image that is loaded up from the OG:Image sometimes is very large while other times it's displayed as a small icon/banner layout. But in either case, the image is the exact same size and format which is used. The browser we use doesn't make a difference. I've also found that if I wait for the linked cache to clear and try to share the link again, it can give me a different layout.
Is there something else I can provide in that URL to specify the desired layout?
I think this was already answered here:
LinkedIn share requirements (BIG image)
But
Take a look at this link
https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en
So the recommended ratio of your image should be 1.91:1.
Do you have a working link for the URL you want to share?
I had problems before with it because we had something generating dynamic images and that was causing linkedin to display them little.
You can also add more meta tags to it like:
og:image:width - The number of pixels wide.
og:image:height - The number of pixels high.
More info about extra meta tags can be found here
http://ogp.me/

Needing guidance on image preview for wordpress

Hey guys I am needing some guidance on what this kind of image feature is called. I tried googling around but cant seem to find the correct name of the image feature. Its where there a bunch of small images surround a bigger image and when a smaller image is selected or hovered over then it will be shown on the bigger image place as seen here.
I am trying to add this feature into a clients website in wordpress but dont know the correct term to look for or if a plugin exists that allows me to do this sort of thing in wordpress.
Thank you all for your time!

Removing image size assignments - wordpress

I noticed that my images weren't crisp, and in the inspector found the piece of code that is making them blurry. But, now I don't know where to look within the actual code to remove this. It's not assigned in CSS. This is a portfolio page. I am using the Avada theme. Any ideas?
Link: http://www.madpeagames.com/gacha-sets/
enter image description here
Looking at your theme's demo I see sharp images and the image code is different. So, the problem is not caused by your theme.
My guess is that you use Jetpack's Photon on your site. Try to deactivate the module and see if this changes anything.
However, image compression is a good thing, especially when using lots of images. Perhaps, if deactivating the Photon module solves the issue, compare the speed of your website with and without Photon. If it makes a notable difference, look in the Photon settings, to see what you could change to solve the issue.
Also, JPEG files (.jpg) may not be the best choice for your thumbnails, because you lose a lot of quality when the image isn't shown at its original size. If changing the settings doesn't help, you could try to use PNG files instead.
If Photon causes the issue and you don't find a way to solve it, while still compressing your images, I would suggest to contact Jetpack support. Alternatively you could try to use a different WordPress plugin for image compression.
I hope that helps. GL!

Resizing the Tumblr Like button?

I am using a Tumblr like button provided by ThinkingStiff on like-button.tumblr.com and am having some problems.
I don't know if this is the right place to ask this question, but I couldn't contact ThinkingStiff through his like-button tumblr so this seemed like my best shot. First of all, I'd like to thank him for his codes on how to add a Like and Reblog button to any theme. I am using them on my blog over at shelteryou.tumblr.com and they are working wonderfully. However, as you can probably tell, the like button is a bit too big for my theme. I was wondering if there was a way to shrink it down to a more suitable size? Thank you in advance!
They use a background-image, so if you want to have a different size, you'd have to change the image resolution (or create a new image) in your favorite image editor. Then upload it to Tumblr (they provide a upload service for theme files only) or make a data URI out of it.
Then change the URL in background-image: url(…) to the new one (the first for the grey image, the second for the red one).
If you need the current images (so you can save them), copy/paste the two data URIs (everything inside the brackets) to your browser address bar.

Resources