• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

ImagePath

Morgain

Well-known member
#1
I've been using full path URLs but I want to learn the ImagePath method please.

I can't find where the ImagePath is set - great start I know.
Being me I'd have left it unchanged when I did the mega settings though.

So, example.

http://www.housemorgain.co.uk/forumxf/styles/default/xenforo/widgets/star42.png
Checked as working - image shows up.

I tried

Code:
<url('@imagePath/styles/default/xenforo/widgets/star42.png'>
Then I tried cutting out a directory name one by one starting from 'widgets.'

styles/default/xenforo/widgets/

down to
Code:
<url('@imagePath/star42.png'>
Then I tried putting them back one by one starting from the right with 'widgets.'

Nope. So there must be something I'm not doing right in the first part before it gets into directories.
A magic dot somewhere?
 

Brogan

XenForo moderator
Staff member
#2
Your markup is not correct.

Is that supposed to be CSS or HTML?

For HTML use img src, for CSS use background: url...
 

Dodgeboard

Well-known member
#3
Your image path is set here:

admincp -> Appearance -> Styles -> {the style you are changing} -> "Path to Images"

By default, the path will be "styles/default"

Since you have the file located in widgets, when you want to use this graphic in CSS, the imagepath variable must be appended with /xenforo/widgets/star42.png

Example usage (CSS) *might be* something like this...

background: @primaryLight url('@imagePath/xenforo/widgets/star42.png')
 

Morgain

Well-known member
#4
Brogan yes I thought the code was not correct so that is why I wrote in for advice.
Thank you I did not know to include the term 'background.'

Dodge thank you for your characteristically careful step by step instructions.
Not doing so great however.

First when I try to check the ImagePath setting I don't find it - though pleased to see your instruction is precisely where I was looking earlier.

admincp -> Appearance -> Styles ->Default Style
(Default Style is a link on the page, on the left of what could potentially be a list of Styles)
Page doesn't offer me "Path to Images"
Page title is Edit Style: Default Style

Page URL http://www.housemorgain.co.uk/forumxf/admin.php?styles/default-style.1/edit
The form on this page has 4 fields - Parent Style: Title: Description: Options:
That's it.

I tried assuming I'd not changed the setting wherever it is. In the template at issue I put
Code:
<background: @primaryLight url('@imagePath/xenforo/widgets/star42.png')>
I also tried searching Templates on " imagePath " to see if I could find it being used anywhere else to check the imagePath setting but there were no results.

Once I get the imagePath sorted can I put something like
Code:
<background: @ffffff url('@imagePath/xenforo/widgets/star42.png')>
as I'm happy using colour codes.
 
F

Floris

Guest
#5
<background> is not a valid html5 tag, doesn't exist.
<background> is now valid css2.
 

Fuhrmann

Well-known member
#6
First when I try to check the ImagePath setting I don't find it - though pleased to see your instruction is precisely where I was looking earlier.
Morgain, you can always use the admin search. Take a look, I have search for "imagePath":
1.png
Ok, I found. So, i click and then i got it:
2.png
 

Morgain

Well-known member
#7
Fuhrman thank you - the missing bit was to look in Style/ Style Properties/ General.

I found it and it is standard
styles/default

Though I do not have the admin search you do on my admin front page control panel.

<background> is not a valid html5 tag, doesn't exist.
<background> is now valid css2.
I don't understand what you are telling me.
To display my image star42.png should the code be -
(where imagePath is standard "styles/ default")
Code:
<background color: @ffffff url('@imagePath/xenforo/widgets/star42.png')>
More completely it is like this - until I learn to translate tables into css
Code:
<tr><td><a href="http://www.housemorgain.co.uk/forumxf/index.php">
<background color: @ffffff url('@imagePath/xenforo/widgets/star42.png')>
<font color=#800000  size=3><b>ALL FORUMS</b></font>
<div align="right">Index of Forums</a></div>
</td></tr>
 

Fuhrmann

Well-known member
#8
To display my image star42.png should the code be -


You just want to display a image?

You can use this:

<img src="@imagePath/xenforo/widgets/star42.png" />


Though I do not have the admin search you do on my admin front page control panel.
What version of XenForo do you are running?

Admin Search was released in XenForo 1.1.0 Beta 1.
 

Morgain

Well-known member
#9
You just want to display a image?

You can use this:

<img src="@imagePath/xenforo/widgets/star42.png" />


.
PHEW! Is all displaying my nice pics WITH neat grown up code!
Fuhrmann you is dandy.

What version of XenForo do you are running?

Admin Search was released in XenForo 1.1.0 Beta 1.
1.0.4 - blimey I only downloaded a couple of weeks ago. Oh I didn't get the beta was being cautious.

Slightly going off this thread topic on images but it's about filepaths
- is there a similar shortening for the general URL to the XF forum directory?

I have lots of links building up like this
<a href="http://www.housemorgain.co.uk/forumxf/ ...">LABEL</a>

Is there something I can use instead of the http://www.housemorgain.co.uk/forumxf/
 

Morgain

Well-known member
#11
Fuhrmann thank you it is all WORKING beautifully. Now my lines of code are much shorter and easier to handle - and I understand them even so. Plus better for changes later on.

It didn't work when I just wanted to link to the forums list (home)
like this
<a href="{xen:link }">ALL FORUMS</a>

But all the others did.

The link you gave was Floris explaining a whole lot to me (again) on that thread. I didn't quite understand the last bit over there at the time but with help here today now I do.
 

Fuhrmann

Well-known member
#12
Fuhrmann thank you it is all WORKING beautifully. Now my lines of code are much shorter and easier to handle - and I understand them even so. Plus better for changes later on.

It didn't work when I just wanted to link to the forums list (home)
like this
<a href="{xen:link }">ALL FORUMS</a>

But all the others did.

The link you gave was Floris explaining a whole lot to me (again) on that thread. I didn't quite understand the last bit over there at the time but with help here today now I do.
Glad to know!

If you want the forum list you could use this:

<a href="{xen:link forums}">Forum List</a>

What part you did not understood? Maybe I can help.
 

Morgain

Well-known member
#13
Glad to know!

If you want the forum list you could use this:

<a href="{xen:link forums}">Forum List</a>

What part you did not understood? Maybe I can help.
Thank you .... more. I have noted the new code item.

It's OK with your help I DO understand much better now.

You are one of the best helpers on XF.