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

Images in Pages, and sidebar not displaying

Discussion in 'XenForo Questions and Support' started by Morgain, Nov 2, 2011.

  1. Morgain

    Morgain Well-Known Member

    I have 5 little graphics to profile the 5 sections of my community.
    They show up fine on the Category bars on the forums list, using the same Http://www. kind of link as I've tried to use elsewhere.
    But I can't get them to display anywhere else.

    <tr><td bgcolor=#C8E3FA>
    <a href="http://www.housemorgain.co.uk/forumxf/styles/default/xenforo/widgets/cat-web2mini.png"></a>
    <a href="http://www.housemorgain.co.uk/forumxf/index.php?categories/gossip-sphere.16/"><font color=#3333ff  size=4><b>GOSSIP SPHERE</b></font></a></td></tr>
    This is one example. It doesn't display the image at the start of the line, yet that is the filepath of the image.

    See this example of a Page which also has the Sidebar
    Images not displaying both in Page content NOR the Sidebar.

    I am using the code snippet
    I have it on these templates
    - sidebar_online_users
    - category_view
    - pagenode_container

    I put the links for my menu in a Table and used the same code as above to link to the graphics. No display.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Have you tried using img src instead of a href?

    Or more accurately, wrap the img src in the a href if you want it clickable.
    Morgain likes this.
  3. Fuhrmann

    Fuhrmann Well-Known Member

    You can use this:
    <img src="http://www.housemorgain.co.uk/forumxf/styles/default/xenforo/widgets/cat-web2mini.png" />
    Or as Brogan said:

    <a href="LINK TO SOMEWHERE"><img src="http://www.housemorgain.co.uk/forumxf/styles/default/xenforo/widgets/cat-web2mini.png" /></a>
    Morgain likes this.
  4. Floris

    Floris Guest

    display sidebar on a page node.

    xenforo has an option for this

    admin.php > applications > display node tree > find the page node you want to edit, and edit it > 1.0 : the same page has the options for displaying child/sibling nodes, and 1.1 has it on the second tab (see screenshot).

    Check one, or the other, or both. And press the button save page.

    Then go to the page in the browser again, and refresh it.

    There should now be a sidebar on the left displaying a sidebar.

    There's also another sidebar, where on the right - you'd have to edit the pagenode_container template to add it to the pages. I don't think the xen:sidebar is available per individual node (easily).
    node page sidebar.png
    Morgain and Fuhrmann like this.
  5. Floris

    Floris Guest

    Quick explanation:

    <a> is a tag to link to something remotely. Be it an internal or external link. It requires to have a title or image between the opening and close tag, and requires a closing tag </a>

    <a></a> is empty, there's no title or image in between the tags. So it can't display anything.

    <a>image</a> is not empty, so it can link the image, images are done with the <img /> tag
    <a>title</a> is not empty, so it can link the title, which is text, just plain text.

    <a> is to link things, done with element href=""
    you get: <a href="linkgoeshere">title or image</a>

    Putting an image in href means that when someone clicks on the link, it loads that image. It doesn't mean it will display the image as a link.

    <a href="go_here">when_clicked_here</a> will show: when_clicked_here and when clicked, it loads go_here

    An image is displayed with <img /> tag, which does not require a title, nor a closing tag. It's a single tag.

    How <a> uses href, the <img /> uses a src (source).

    <a href="go_here">some_text</a> (a link pointing somewhere)
    <img src="file.jpg" /> (an image called file.jpg displayed visually - doesn't link anywhere).

    You can combine the two:

    <a href="somelink.html"> <img src="mybutton.jpg" /> </a>

    In the above example you will get in the browser: A visualization of the image mybutton.jpg, that is within the <a> tags, linking to somelink.html. So when someone loads the page, they see the button, and when clicked it goes to that html page.

    Let's talk xenforo.

    XenForo links can be done as normal, using <a> etc.
    All internal links do NOT start with http
    All external links have to start with http

    If your site is example.com, and ..

    Example: href="google.com" >> what will it do? >> the user will go to http://example.com/google.com (didn't start with http, so it's an internal link)

    Example 2: href="http://google.com" >> what will it do? >> the user will go to http://google.com (it did start with http, so it's an external link)

    The xenforo part now:

    You could use href="{xen:link google.com}" and you will get the link: http://example.com/google.com/ in xenforo

    I say this, because your example had this:

    <a href="http://www.housemorgain.co.uk/forumxf/styles/default/xenforo/widgets/cat-web2mini.png">

    If I would make this in a template, I would do it like this:

    <a href="{xen:link styles/default/xenforo/widgets/cat-web2mini.png}">

    Now, if you change directory, domain, etc .. The link will keep working, as it's an internal link and xenforo will help you generate the full proper link, friendly urls enabled or not - doesn't matter. Saves you from editing your page over and over again every time you change directory, or domain, or switch between friendly urls, or not, etc.

    Note that xen:link is for internal links only, as external links have to start with http anyway.

    So, if you want to display a button linking to something:

    <a href="{xen:link somewhere/internally}">
    <img src="mybutton.png" />

    Assuming you change the link and point to the right button, you get an image on the page, linking to that internal link.

    Ok, next xenforo step. Style properties.

    Just how {xen:link ..} is available for <a> tag, there's also a dynamic path for each style.

    So per style, you could have a different button. Very handy. And yes, it inherits (kinda) to the parent's default.

    You can use the reference of @imagePath that represents /styles/somedir/someproduct/somesubdir/
    The default for the default theme is styles/default/xenforo/
    If you want a different button for the black theme (example) you might have styles/black/ and have this set in the style properties for image path. Your template can then use: @imagePath/mybutton.png and you end up with styles/black/mybutton.png (vs styles/default/xenforo/mybutton.png)
    So changing styles results in different themes, perhaps different styled buttons as well. So optionally you could use @imagePath/mybutton.png as src for the <img /> tag.

    <img src="@imagePath/mybutton.png" />

    The benefit is the same as xen:link for href.

    If you change directories, or domain name, you don't have to change all your templates.

    Back to your example. Image your site is example.com, and you want to link to your members list.
    In no-friendly-urls option that would be index.php?members, but with friendly urls turned on, just members/
    You might upload the button called mybutton.png to the styles/default/xenforo/ directory. So normally you'd link to http://example.com/styles/default/xenforo/mybutton.png - but of course, if you change directories, say inside forums/ or community/ or perhaps make a custom style, or perhaps change domain name to anotherexample.com - all these things are no longer working.

    You could consider displaying your button, linking to members/ like this:

    <a href="{xen:link members}"><img src="@imagePath/mybutton.png" /></a>

    (you open a link, tell xenforo you want an internal link to members. And after opening the link, you call an image to display, and then you close the link ---- resulting in a visual image on the page that links to members, regardless of the domain, directory, or the settings)
    Fuhrmann likes this.
  6. Morgain

    Morgain Well-Known Member

    You guys are just superb. You've helped me so much.
    Now you just let me know when you want to come over for a good homecooked meal. House Morgain is very easy to find. Just arrange it by private convo and a three course home cooked dinner awaits you.
    Fuhrmann likes this.
  7. Morgain

    Morgain Well-Known Member

    Floris that was NOT a "quick explanation" it was a mini encyclopaedia and quite marvellous. I'm sure lots of other code challenged bunnies will find it extremely helpful.
    I did know some of it - the <a> SOMETHING </a> was how I always used to do it but a site I worked on insisted on the </a> tag after images and ever since that month i've been muddled.

    I WAS wondering about paths in XF though - was going to do another question later so 'nother thank you.
    Fuhrmann likes this.
  8. Brogan

    Brogan XenForo Moderator Staff Member

  9. Morgain

    Morgain Well-Known Member

    yes I like that one too.
    I just find css headbanging because I did 10 years weddesign without it from around 1996 with all the stuff I wanted on the same page.
    Having bits all over the place in different files and not knowing where the bits are is just weird to me. It needs an index document to say what they all are and how they interact.
    Plus all this is not my main occupation so limited time to learn new tricks.
  10. Morgain

    Morgain Well-Known Member

    I think this sidebar project could go a step further and make it more grown up. Or rather more up to date code using the dreaded css.

    I now have it on
    - sidebar_online_users
    - category_view
    - pagenode_container
    – EWRcarta_Sidebar

    I imagine I could put the sidebar table itself in EXTRA.css and then put just a small bit of code on those pages between the sidebar bracket code.
    CONTENT Code to get the table
    Then I can update the table once instead of 4 times.

    I can see I'd have to translate the html table I have into css style. I can work at that.
    I think it would go like this.

    In EXTRA.css I makee a section like

    CONTENT css stuff that defines the table
    Then I'm not quite sure but where I want the table to appear I put something like this:

    OTHER stuff if already there on sidebar re positioning - careful of other brackets and IFs, ELSEs
    <div class="sidebar_table">
    OTHER stuff if already there on sidebar re positioning - careful of other brackets, and IFs, ELSEs
    How am I doing please? I HAVE looked things up not just wimping on you, but I can't find instructions on how to write the call to go on the page.
    I think the class with a dot is OK to go in EXTRA.css
    I do something like this with a php call on the main website but the php call snippet allows me to just use html which is familiar. But it's time I got this css business under my belt.

Share This Page