Images not displayed when moving site to local

I set up a local environment to customize a friend's WP blog. However almost none of the images are being displayed.

The remote site's URL is http://sitename.com and my local virtual host is http://sitename.dev.

I have found a couple different cases when the images are not displayed:

  • The src URL looks like this: http://i1.wp.com/sitename.com/wp-content/uploads/xxxxxx and opening this link on the browser shows the image correctly. However there's a srcset attribute with the URL http://i1.wp.com/sitename.dev/wp-content/uploads/xxxxxx and that causes a 504 HTML error because obviously there is no http://i1.wp.com/sitename.dev.
  • The other case just has a src URL like the previous srcset, it looks like http://i1.wp.com/sitename.dev/wp-content/uploads/xxxxxx so it is unable to load the resource.

So it looks like the main problem is that i1.wp.com that is being prepended to my local URL and it's completely messing with the routes.

When editing posts from wp-admin all images are shown correctly. Well the featured image preview isn't displayed correcly because it tried prepending i1.wp.com again but when selecting the image from the gallery it is displayed correcty (and the URL is http://sitename.dev/xxxxx).

I have no idea where that prepended segment comes from but I would like to know how to either get rid of it or how to set up images correctly in my local environment.

Topic localhost local-installation images Wordpress

Category Web

1
answered at

You need to update all the links in the database. Depending on the size of the website, this can be difficult. I move sites over regularly. The best thing to do is - without playing around with the database yourself is to use the 'Velvet Blues Update URLs'. It's basically a string and replace which replaces the old links to the new one with a simple UI.

https://en-gb.wordpress.org/plugins/velvet-blues-update-urls/

1
answered at

use a plugin to replace all links from the dev site to match the links with the new domain.

You can also use wp-cli as well.

https://developer.wordpress.org/cli/commands/search-replace/

1
answered at

The problem was the Photon Jetpack feature. I just had to disable it. Although I consider this to be a dirty patch, and not a proper answer.

1
answered at

Well images are basically stored "wp_posts". Links of each image are stored in "guid" column of the table.

try this in your DB

SELECT * FROM `wp_posts` ORDER BY `wp_posts`.`guid` ASC

So the problem is clear - the links doesnt match. To get rid of the problem simply manually reselect each image from your current setup. Thats it.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.