Back to top arrow image not loading

[gregfields]

I just installed the latest version of Jumpstart and now the back to top arrow image is not loading. The site is http://lovewellfencing.com/

When I look in Firebug the image is supposed to be here: “http://lovewellfenc…ssets/svg/chev-up.svg” but I get a message “Failed to load the given URL”.

I am using the Super User base with a child theme.

Thanks!

Topic

[Jason Bobich]

Hi,

See the error you’re getting? http://lovewellfencing.com/lw/wp-content/themes/jumpstart/framework/assets/svg/chev-up.svg

It’s a 403, which means it’s a permissions issue. Did you upload the theme manually through FTP? Try getting to it with an FTP client, cPanel, or however you manage files on your server, and double check the permissions of that file. Make sure it’s readable.

[gregfields]

Thanks, Jason, that worked.

To update Jumpstart I uploaded the jumpstart-2.0.0.zip file to the server via FTP, deleted the old jumpstart directory and then unzipped the new file. Not sure why the permissions got messed up. The host is hostmonster.com. It made all the images in that directory 640 instead of 644.

Greg

[Jason Bobich]

Thanks, I’ll double check my local files to make sure it’s not something on my end where I manage the source files.

[srumery]

I have a development site where I can’t see the images either. My permissions are all set properly. I am not getting the 403 error but I still can not see the chev-up.svg image in the back to top area.

The same goes for the chev-down.svg from the “Add button that leads to next section.” feature in the Hero Unit element using builder. The button works really well but it’s just a circle with .2 opacity so you can’t really see it.

[Jason Bobich]

Yeah, I found it on my end. I had the incorrect permissions on my local files. I’ll have it fixed in the next update.

Note for future reference that users installing the jumpstart.zip through WordPress interface will not run into this. When WordPress extracts the ZIP and creates the theme directory, all permissions and everything are automatically setup correctly.

@srumery In the same way you would on a server, you can change the file permissions on your local computer. For example, if you’re on Mac, you’d highlight the file in your finder, click cmd+i, and then change the permissions.

[srumery]

This is a staging site blocked with Coming Soon Pro but you can still access the file. Just to make sure, I disabled CSP and the image still didn’t show up so that wasn’t the cause. Please check the file and see if you can find out what’s going on.

http://aspire.rumspeed.com/wp-content/themes/jumpstart/framework/assets/svg/chev-down.svg

It does not give an error and I’ve checked the server logs too. Nothing there to indicate a missing file or anything else. It’s clean. On this site, Jump Start V1 was installed and upgraded to v2. Would that have something to do with it?

I also just pushed up all the files in the svg folder again to see of that would help but it didn’t.

What do you think is going on here?

I did compare the file on my server with the one on your server and mine is missing this:
<polygon fill="#FFFFFF" points="306,230.3 0,545.4 16.8,561.7 306,263.9 595.2,561.7 612,545.4 "/>

Mine: view-source:http://aspire.rumspeed.com/wp-content/themes/jumpstart/framework/assets/svg/chev-down.svg
Yours: view-source:http://support.themeblvd.com/wp-content/themes/jumpstart/framework/assets/svg/chev-up.svg

Maybe I have an older version of the file?

[Jason Bobich]

The link you provided is working just fine? I’m accessing the file? On your site, maybe just clear your browser cache. Everything should be fine.

[srumery]

This is really strange. It’s still not working. Once the site is live maybe we can take another look at it. I’ll let you know if I need further help with this.

[srumery]

This site is live and chevrons are not working for the “back-to-top” or the testimonial slider on the home page.
http://www.kalamazoo-webdesign.com/

I am running the latest version of JumpStart – 2.0.3 and am using the Entrepreneur theme base.

Thank you.

(This is Kim, by the way. I am Scot’s partner) 🙂

[Jason Bobich]

Hi Kim,

What are you doing to minify and compress all of your CSS files together? Try disabling this to see if it’s causing the issue somehow. — Although, the compression seems to be adjusting the filepath properly on the .svg files for the arrows; so I’m not sure why it would be causing the issue, but let’s start there.

[srumery]

After an exhausting effort to figure this out, I found a solution. Our server configuration has nginx running as a reverse-proxy on top of Apache so it can quickly serve up cached files from WP Super Cache. When we fire up a new virtual server on our cloud application, nginx isn’t active until we manually setup a configuration file and reload nginx. On sites where nginx wasn’t setup, the SVG files were not being served up. This happened on our dev sites and a couple production sites.

I guess the Apache server isn’t configured for SVG. When nginx isn’t setup to handle the requests, Apache takes over and that is where we were stuck.

So, Apache needs to be tweaked on our server so the fallback works. Once nginx is configured, it works.

For reference, here are a few links on the subject:

1. http://stackoverflow.com/questions/3695409/nginx-offers-of-downoload-svg-instead-of-showing-it
2. https://wordpress.org/support/topic/could-not-display-svg
3. https://gist.github.com/xjamundx/3352424

This is a lot to pile on top of the original request and maybe is should be on it’s own thread. Feel free to break it apart into another topic. Maybe this will be helpful for someone else down the line.

[Author]

Replies