Best practice for using images in default.master.tpl?

MasterOne

I want to include images with links in my template. I guess the image files are supposed to be put in /themes/_customtheme_/design/.

What's best practice to use such images in default.master.tpl?

hgtonight

The best practice is to not use any images in the default.master.tpl file save the {logo}. If you want to use images for styling I suggest you use CSS and use images as background: url('image.png');.

If you really need to add an image element, it would be fine to hardcode the path, since this is defined on a per theme basis; i.e. you would only have to update the links if you change your theme name.

MasterOne

@hgtonight

I guess I can't use the CSS property background as it's about three images with links one below the other at the lower end of the side panel.

Kasper

Like @hgtonight mentioned, using CSS is the best way to include static image assets in themes. You'll have to define the size of the elements manually for them to match the size of your images:

// Example with inline element and 100x50px image
a.Class {
   display: block; // Turn our inline link into a block element
   width: 100px;
   height: 50px;
   background-image: url("image.png");
   background-repeat: no-repeat;
}

If you use Compass, the above will be slightly easier to accomplish:

a.Class {
   $image: "image.png";
   display: block;
   width: image-width($image);
   height: image-height($image);
   background: {
      image: image-url($image);
      repeat: no-repeat;
   }
}

MasterOne

@kasperisager

Nice, but nevertheless I think I have to hardcode those image links into the template, as I need the img title addition (which is to be shown on mouse-over), or can that one be solved by CSS as well?

Oh, and what's Compass?

hgtonight

@MasterOne Best practice is to not use img tags. If you need to, go for it.

Compass is a framework for SASS. SASS is a meta language that compiles into CSS. Very useful for large style sets. You probably don't need it.

MasterOne

@hgtonight

I honestly don't know how to do it without img tags. I tried with the CSS snippet shown by @kasperisager but that didn't work, the image was not shown (surely my fault, but no idea what went wrong.

So how would you solve the issue to have an image link in the panel? I'm curious, and I don't want to hardcode it in default.master.tpl if there is a better solution at hand.

hgtonight

The reason we don't use image tags is for semantic reasons. If the image is just being used for styling it is best to apply it with a css rule.

If you insert an image tag (<img src />) it is implied that the image is part of the content or otherwise important (like a company logo). If your images are providing content or are otherwise important, use an image tag.

If you show a mockup of what you want to accomplish, we can help from there.

MasterOne

@hgtonight

Ok, the forum in question is to be found here, and the three image links (actually two, the middle one is just an image as there is no website to link to yet) are at the bottom of the right side column, which I now have hardcoded into the template file. It's working as supposed to, but if there is a better way of doing it I am open for suggestions.

hgtonight

Basically, you just remove the image tag and use descriptive link text (e.g Still Dragon North America).

Then you use css image replacement.

MasterOne

@hgtonight said:
Basically, you just remove the image tag and use descriptive link text (e.g Still Dragon North America). Then you use css image replacement.

That page list a lot of possibilities, no idea which to prefer. But what exactly is the benefit of this? Are semantic reasons important in any way? Are those image links not considered to be part of the content?

Kasper

You may want to read this: http://stackoverflow.com/a/1469139

In this case, I'd use CSS - no doubt about it. Here's what you'll need to add to your master view:

<a class="StillDragonLogo StillDragonAU" href="{link goes here}" title="{title goes here}"></a>
<a class="StillDragonLogo StillDragonEU" href="{link goes here}" title="{title goes here}"></a>
<a class="StillDragonLogo StillDragonUS" href="{link goes here}" title="{title goes here}"></a>

...and this goes in your stylesheet (remember to clear Vanilla's CSS cache when you're done):

.StillDragonLogo {
   display: block;
   width: 200px;
   height: 68px;
   background-repeat: no-repeat;
}

.StillDragonAU {
   background-image: url("stilldragon_au_nz_200x68.png");
}

.StillDragonEU {
   background-image: url("stilldragon_eu_200x68.png");
}

.StillDragonUS {
   background-image: url("stilldragon_us_200x68.png");
}

MasterOne

@kasperisager

Thanks a lot, it's working now! I am a little surprised, because I pretty much tried the same already and it didn't work, but most likely I just forgot to clear the cache.