<a> and <img> with xenforo (in templates) explained

[Floris]

Quick explanation for this question: http://xenforo.com/community/threads/images-in-pages-and-sidebar-not-displaying.22524/

<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/xenforwidgets/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" />
</a>

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/xenfor
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/xenformybutton.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/xenfor 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)