How to Fix Images Loading in the Wrong Place?
The Koffler Boats website uses Posts for all of its inventory (boats, trailers, accessories) items. Sometimes, the wrong picture is displayed on the inventory (blog post) pages. The inventory pages list all of the posts for that category. The problem occurs on the blog posts page(s) when 2 images have the same, or sometimes even similar, filenames. However, clicking on one of the items and navigating to the post itself shows the correct image. This issue can be corrected by giving the images unique names as follows:
First, we need to re-save the image in question with a unique name that won’t be confused by WordPress. Download a copy of the image and save it with a unique name. Right-click save image as:
The problem – see the old name below:
Save it with a unique name. Important note: Google and search engines look for images in a number of ways and one is by their titles, so enter a name you think someone might use to try and find your item:
Now we need to edit the Post. For Koffler Boats this would be scrolling to the bottom of an inventory item (the Post) and clicking on edit (must be logged into WordPress to see the “Edit” link):
Next we need to change the media, click on the media “Upload/Insert” link:
Click on “Gallery” to list the media items already uploaded and associated with the current post. Then click on “show” next to the item that needs to be fixed:
This shows the current item details. Note that in the “Link URL” field we can see the problem again, that the current image is named 11.jpg and not something more unique:
It’s time to delete and replace the offending image. Click on “Delete” and then “Continue”:
Next we need to upload the uniquely named image. Make sure the “Add Media” (Upload/Insert) window is back to “From Computer” and upload the image that you saved earlier (note: you can see that our Gallery used to have 4 images, but now has 3):
Next scroll to the bottom of the new image and select “Use as Featured Image” and then click “Save all Changes:”
Next, navigate back to “Gallery” and enter a “1” into the blank “Order” field:
Then click “Update Gallery Settings:”
And lastly we need to update the post to ensure that our changes are saved. At the top right of the screen click on “Update:”
With these steps, the images on the Blog page should now load correctly.