By yevgeny.ananin on

Ok,

I'm trying to use an image tag from within a panel to call an image from: sites/default/files/[file-collection]/[file]. I'm trying to use a root relative path so the tag looks like <img src="/sites/default/files/[file-collection]/[file]" ... />. But when I look at the page the image is broken, and when I copy the image's url by right-clicking it, it shows the url as:
http://www.[my-website].org/[name-of-panel-page-from-which-i-am-calling-...

That is...the image I'm trying to access from sites/default/... is not being called relative to the root, but relative to the panel page that contains the image tag. And on top of that, Drupal is adding all that "%E2%80%9D" junk. Is there any way that I can just get it to reference the root directory?

Thanks in advance!

⋅ Categories: Drupal 7.x

Comments

christopher james francis rodgers’s picture

christopher james francis rodgers commented

The %** encoding has to do with the way non-standard alpha-numeric characters in a URL are converted.

See .. http://www.tutorialspoint.com/html/html_url_encoding.htm

%e2 for example is the character â


All the best; intended.
-Chris (great-grandpa.com)
___
"The number one stated objective for Drupal is improving usability." ~Dries Buytaert *

yevgeny.ananin’s picture

yevgeny.ananin commented

Ok, thanks for the response. But there weren't any alpha-numeric characters in my img tag src, just a plain path to a jpg. And I still don't understand why the path isn't relative to the site's root?

christopher james francis rodgers’s picture

christopher james francis rodgers commented

By alpha-numeric I mean a-z, and 0-9.

I always avoid using blank-spaces and non-alpha-numeric characters.

I also only use lower-case a-z alphabetic characters. Never capital (upper-case) alphabetic characters.

===

The fact that %E2%80%9D is showing up means that somehow
you have three "Non-ASCII control characters" in your specified path.

Non-ASCII control character
%E2 = â - â

Non-ASCII control character
%80 = € - €

%9d =  - [that character is not displayed in my western left-to-right English-only browser]
%9d = &#157;

This problem alone will break the path.

===

Trial and error:

I thought the leading forward-slash "/" implied 'start at the root'
but I now see that that is not the case on one of my Drupal 7 sites.

Try it without the leading forward-slash "/" since that is what is working for me.

<img src="sites/default/files/[folder-name]/file-name.jpg (or *.gif, or *.jpeg, etc.) ... />

===

You might try the whole URL temporarily just to see if you can get the image to display,
and then once you know it can work, you can try shorter/ relative URLs.

 ...src="http://my-site-name.com/sites/default...

or if your Drupal root is in a sub-directory

...src="http://my-site-name.com/[sub-directory-name]/sites/default...

===

This assumes you know for sure that is the location of the image(s).

If that is where you uploaded it using FTP, for example, then of course you know it is there.

If you uploaded it using WYSIWYG or some other method, then maybe the images are not where you think they are.

===

I have at times found that it was necessary to add the 'width' and 'height' attributes to the 'img' tag in order to get the image to display, but I forget the circumstances surrounding that.

<img
alt="This is a good habit - supplying alternative text when images do not load"
class="whatever" 
src=" ... "
width="123" 
height="345"
/>

Note: 'pixels' are implied, so you do Not have to specify 123px.

Note 2: The above multiple line code will not work if your "Text format" (Filtered HTML, Full Html, etc.)
is using "Convert line breaks into HTML.... "
===


All the best; intended.
-Chris (great-grandpa.com)
___
"The number one stated objective for Drupal is improving usability." ~Dries Buytaert *

yevgeny.ananin’s picture

yevgeny.ananin commented

Hi, thanks again for all the suggestions. Unfortunately I've tried everything that you mentioned. I've tried with and without the leading slash.
Here is the image tag that I used: <img src=”/sites/default/files/collections/overdrive_logo.jpg” align=”left” style=”margin: 0px 10px 0px 0px;” />
I used this img tag within a pane of a panel page that has the url: www.mywebsite.com/books_media/ebooks.
When I save the code and look at the image, I look at its url and the url is: www.mywebsite.com/books_media/ebooks%E2%80%9D/sites/default/files/collections/overdrive_logo.jpg%E2%80%9D
So, Instead of using the root relative path, the image tag is relative to the panel page that it is rendered in. And I don't know why it adds all that junk.
When I try using the full path of the website in the src i get http://www.mywebsite.com/books_media/ebooks%E2%80%9Dhttp://www.mywebsite.com/sites/default/.../overdrive_logo.jpg%E2%80%9D
Crazy right?

But what's really weird is...if I take that same relative path and put it inside of an anchor tag like so:
<a href="/sites/default/files/collections/overdrive_logo.jpg">file</a>
it works just fine!!! That is, I get a functional link that opens the jpg image in another browser tab. So the a tag works perfectly fine but for some reason the img tag doesn't. This is driving me nuts!

druser01’s picture

druser01 commented

I dont know the reason but I often experience this while the site (url) was piggybacking on the main server, though .htaccess file has been edited correctly.