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

ImagePath

Discussion in 'Styling and Customization Questions' started by Morgain, Nov 3, 2011.

  1. Morgain

    Morgain Well-Known Member

    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?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Your markup is not correct.

    Is that supposed to be CSS or HTML?

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

    Dodgeboard Well-Known Member

    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')
     
  4. Morgain

    Morgain Well-Known Member

    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.
     
  5. Floris

    Floris Guest

    <background> is not a valid html5 tag, doesn't exist.
    <background> is now valid css2.
     
  6. Fuhrmann

    Fuhrmann Well-Known Member

    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 likes this.
  7. Morgain

    Morgain Well-Known Member

    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.

    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>
     
  8. Fuhrmann

    Fuhrmann Well-Known Member



    You just want to display a image?

    You can use this:

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


    What version of XenForo do you are running?

    Admin Search was released in XenForo 1.1.0 Beta 1.
     
    Morgain likes this.
  9. Morgain

    Morgain Well-Known Member

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

    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/
     
  10. Fuhrmann

    Fuhrmann Well-Known Member

    Yes!

    Let's say you want to make a link to the members page, showing all the members to output something like this:

    Visit the members page!

    Use this:

    <a href="{xen:link members}>Visit the members page!</a>

    Where "members" is the place when users click they will go.

    This post have a better explanation.
     
  11. Morgain

    Morgain Well-Known Member

    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.
     
  12. Fuhrmann

    Fuhrmann Well-Known Member

    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 likes this.
  13. Morgain

    Morgain Well-Known Member

    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.
     
    Fuhrmann likes this.

Share This Page