Support » Networking WordPress » Images and CSS broken on new subdirectory sites

  • I’m on Windows and installed XAMPP along with Bitnami’s WordPress. I enabled Multisite and added this in wp-config.php

    
    define('SUBDOMAIN_INSTALL', false);
    define('MULTISITE', true);
    define('DOMAIN_CURRENT_SITE', '127.0.0.1');
    define('PATH_CURRENT_SITE', '/wordpress/');
    define('SITE_ID_CURRENT_SITE', 1);
    define('BLOG_ID_CURRENT_SITE', 1);
    

    Here’s my .htaccess and I’ve tried a couple different suggestions

    
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    
    # add a trailing slash to /wp-admin
    RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
    
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
    RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
    RewriteRule . index.php [L]
    

    http://127.0.0.1 and http://127.0.0.1/wordpress work fine. When I add a new site, all I see is the raw html. No CSS and images are broken. One of the broken images is looking for it at http://127.0.0.1/wordpress/themedemos/wp-content/themes/twentyseventeen/assets/images/header.jpg but that doesn’t exist.

    • This topic was modified 1 year, 11 months ago by Jose Castaneda. Reason: fixed backticks for code
Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator bcworkz

    (@bcworkz)

    Your WordPress is in the /wordpress/ folder, yes? What .htaccess has the WP rewrite rules? It should be in /wordpress/.htaccess, not your site’s html root. The rewrite base line should be RewriteBase /wordpress/. The normal URL to get your main site’s home page would then be 127.0.0.1/wordpress/. Go to 127.0.0.1/wordpress/wp-admin/options.php and locate the home and siteurl entries. (entries listed alphabetically) The two options should both be http://127.0.0.1/wordpress. If you want your WP installation to be accessed at 127.0.0.1 root, it’s better to install it there 🙂 In any case, you can add a different set of rewrite rules to redirect requests to the /wordpress/ folder if you want.

    That all would be correct for a freshly installed multisite WP with no plugins and one of the default twenty* themes and such a site will work normally. Have you added a “themedemos” site to your network to account for that portion of the broken image link? If so, it’s normal for such a file to not exist, it will actually reside at httр://127.0.0.1/wordpress/wp-content/themes/twentyseventeen/assets/images/header.jpg. The themedemos version will only be valid on the themedemos site even though the actual location is shared among sites.

    Thanks for the reply.

    I’ve made some changes but the result is basically the same. I’m also doing this on a VM that I forgot to mention (if it matters). And this actually happens after I install WordPress, the default apache2 (LAMP install) works fine.

    WordPress is now installed in /var/www/html. Here’s my .htaccess –

    
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
    

    The WordPress Address and Site Address in options are both http://localhost. If I go there I’m not seeing any images.

    Additionally, the VM’s internal IP is 192.168.1.37, but I’m not sure how to add a dynamic IP instead instead of localhost.

    Moderator bcworkz

    (@bcworkz)

    So this is a now new single site installation? When you use the localhost “domain”, it works normally except the images do not display? Have you verified the image paths are correct in the page’s HTML source code? On single site, there is no site alias in the URL like the /themedemos/ bit from earlier, the image URL path should physically exist on the server. If the HTML path leads to the actual image file and the file indeed exists, the usual cause is file permissions. Verify both via your VM and your native O/S that other users can at least read image files.

    I’m not sure how one would truly manage dynamic IPs on a LAN. It’s usually not all that dynamic, once your router assigns an IP to a device, that device invariably keeps the same IP until the network makeup is changed. For the time being you can assume it’s static, realizing that if there is suddenly no access at all, the IP may have changed on you and you should find out what the new one is. You can make a hosts file entry for the current IP so you can keep using the same “domain” name, updating hosts should the IP change, A manual DNS server of a sort.

    For example, if your desired “domain” is apache.lan, add this to the hosts file:
    192.168.1.37 apache.lan
    You need to restart your computer for the new entry to register. Then you may access your site with httр://apache.lan/. You’ll need to update your WP home and siteurl settings to use apache.lan, and all media references in posts as well. If you already have a lot of content, a search and replace utility may be useful to be sure everything is changed over. You only need to do this in WP once. Future IP changes are handled in the hosts file, then the apache.lan reference in WP will always be valid.

    Not that it matters right now, but FYI, you can imagine how this hosts file scheme is useful when preparing sites destined for a hosted server. Add the planned public domain name to hosts, pointing to your VM’s IP. Prepare the site. When the site’s DB is migrated to a hosted server, all the domain references will be correct without need to search and replace. Simply remove the hosts entry to access the hosted version of the site 🙂

    Yeah I’m going to install Multisite after this is worked out. I basically started over.

    I went ahead and assigned a static IP (192.168.1.37) in my router and in WordPress.

    I’m still not getting any images from any though.

    https://imgur.com/a/WZoJ2Wn

    Moderator bcworkz

    (@bcworkz)

    Sure, good plan. Did you start over with new DB tables as well? There are likely many invalid paths in the former multisite DB data. I’ll assume by now you’ve checked the HTML source of the output page and verified the image path is correct. What happens if you directly request an image URL, for example localhost/wp-content/themes/twentyseventeen/assets/images/header.jpg?

    What do you have for home and siteurl in settings? localhost or 192.168.1.37 or 127.0.0.1? You could check the network developer tool of your browser after reloading the page with the tool up. It’ll at least tell you the status returned by the image request. If you click on an image request in the tool, you can see all other data related to the request, such as headers and timings. Something there could offer further clues.

    Yep I created a new VM which included the LAMP install and database. I put 192.168.1.37 in WordPress options.

    Did you see the screenshot? There aren’t any images shown on any twenty* themes (including in the HTML). http://192.168.1.37/wp-content/themes/twentyseventeen/assets/images/header.jpg does exist though. I even tried the Hana theme.

    Nevermind. After restarting Apache it works.

    Now to install Multisite….

    So far so good. So for anyone else that is having this problem – on a VM that starts periodically, it often gets assigned a different internal IP. Altho it gets a valid internal dynamic/available IP, WordPress needs a static one in its options.

    So in your router and in the OS for your VM, reserve an IP so when the VM starts, it’s forced to use the same internal IP every time.

    I’m not sure why WP doesn’t just use the current IP of the VM –

    phil@debian:~$ hostname -I
    192.168.1.37

    (2 days later after starting the VM)

    phil@debian:~$ hostname -I
    192.168.1.23

    I’m having one more issue though, that may be beyond the scope of this issue, but I can’t upload themes, media, plugins, etc. It says “The link you followed has expired” and I guess it’s a problem with php.ini. I’ve increased things like max_file_size but it doesn’t help.

    Moderator bcworkz

    (@bcworkz)

    Yeah, I saw the lack of images in the screen shot, but I cannot verify anything else related hence the seemingly dumb questions. It’s not clear to me what restarting did to solve this, but restarting frequently solves mysterious problems. Whatever works 🙂

    Reserving an IP in the router is a good solution, but thinking about this a bit more, it may be possible to dynamically set the current IP in WP. The home and site URL can be overridden in wp-config.php. As long as PHP can get the IP in real time, it can be set there. The problem will then be all the image references etc. in content that have the full URL hardcoded. Those can be updated on output through “the_content” filter. On second thought, this is rather messy, reserving is better, but this might be food for thought for someone.

    About the expired links issue. I think when I’ve encountered that error in the past, it was because the related PHP session had expired, but I can’t be sure. It may not relate to your issue anyway. But I do think looking at time out settings in php.ini and httpd.conf (or what ever your Apache uses for configuration) would be worth checking.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Images and CSS broken on new subdirectory sites’ is closed to new replies.