Image URLs in .js appended with virtual directories

Permalink
I have a bit of a weird problem with a site I'm building, something I've not come across before, and hope someone can help.

I have included a umber of social media feeds in my site, and the icons for these feeds are called from jquery.social.stream.1.5.4.js in the following fashipn:

twitter: {
                  id: '',
                  intro: 'Tweeted',
                  search: 'Tweeted',
                  out: 'intro,thumb,text,share',
                  retweets: false,
                  replies: false,
                  images: '', // large w: 786 h: 346, thumb w: 150 h: 150, medium w: 600 h: 264, small w: 340 h 150
                  url: 'twitter.php',
                  icon: 'twitter.png'
               },


This works fine on all of my top level pages, with the icons displaying as expected. However, when visit the sub level pages, the icons are not displaying. Pretty URLs are enabled, so I thought I would try going to the non-pretty page - lo and behold, the icons are fine here.

In an effort to troubleshoot, I returned to my js file, and changed the code to a direct URL as follows:-

twitter: {
                  id: '',
                  intro: 'Tweeted',
                  search: 'Tweeted',
                  out: 'intro,thumb,text,share',
                  retweets: false,
                  replies: false,
                  images: '', // large w: 786 h: 346, thumb w: 150 h: 150, medium w: 600 h: 264, small w: 340 h 150
                  url: 'http://thevernonhanbury.marmaladesoup.co.uk/twitter.php',
                  icon: 'http://thevernonhanbury.marmaladesoup.co.uk/cms/images/dcsns-dark/twitter.png'
               },


I expected this to work, as surely pulling the direct URL couldn't fail to take me to the icons required? Well apparently not, visiting the 'pretty URL' of the page again, still no icon. I right clicked the icon and opened it in a new window, and it appears C5 is appending my direct URLs with the virtual folders for the page:-

Should be

http://thevernonhanbury.marmaladesoup.co.uk/cms/images/dcsns-dark/t...

And is returning as

http://thevernonhanbury.marmaladesoup.co.uk/cms/stay/rooms-lamour-p...

Does anybody have any idea how this is happening, as I would like to keep the pretty URls for my site!

The site in question can be viewed herehttp://thevernonhanbury.marmaladesoup.co.uk/cms/...

Please let me know of you need any more info, and thanks in advance for any help you can offer.

 
localcreative replied on at Permalink Reply
As a bit of intriguing extra info, when I use chrome dev tools and inspect element on one of the missing icons, the images do not show as missing - thecode reads
<img src="images/dcsns-dark/facebook.png" alt class="icon">
and when I hover over that the image is visible within dev tools. Am I going crazy?
localcreative replied on at Permalink Reply
And if it helps, here is the page with pretty URLs enabled

http://thevernonhanbury.marmaladesoup.co.uk/cms/stay/rooms-lamour-p...

and here it is linked without pretty URL

http://thevernonhanbury.marmaladesoup.co.uk/cms/index.php?cID=146...
localcreative replied on at Permalink Reply
Please someone - anyone - I really need help on this!

I've now set up a news/blog system and the same thing is happening in there - so any sub-pages the links are taking me to page not found.
localcreative replied on at Permalink Reply
Anyone? I'll pay! I just need to get this sorted today!
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
deleted
mhawke replied on at Permalink Reply
mhawke
Have you fixed this? It looks fine to me at the moment.

Beautiful site!
localcreative replied on at Permalink Reply
Hi Mhawke - fixed in a roundabout way - as the issue was occurring on sub pages only, i created another instance of the Javascript file being called and after much testing the only URL that seems to work for the icons is icon: '../../../../images/dcsns-dark/facebook.png'. Obviously not ideal, and I'd love to know why direct URLs in the script would be changed by the C5 system as it's not something I've come across before.

But, this way works for now which is a relief!

Thanks, it's been some work to get everything functioning as I wanted it, particularly as responsive and parallax, but really pleased with the outcome.
mhawke replied on at Permalink Reply
mhawke
Glad to see you got it working. I have also fought with this odd path problem at times.

Just a suggestion... I'm on a slow-ish internet connection (and I'm across the pond in Canada) but the site loads very slowly for me. I'm wondering if the large PNG files would be better as JPGs instead. I only use PNG files if I need transparency. Mobile users would also appreciate the smaller file sizes.

Was your theme based off of one 'in the wild' or was it crafted from scratch?
localcreative replied on at Permalink Reply
Hi, optimisation is the next step...

The site is from scratch one off

Tom Helme

> On 3 Aug 2014, at 15:24, concrete5 Community <discussions@concretecms.com> wrote: