The image block is used to place an image on the screen.

If you are adding a full screen background image, please use the eversion:eskins:block:background or eversion:eskins:block:fanart blocks instead of image. When possible or available, Eversion will bypass flash and use the hardware in players to display these images in the highest possible quality.

<image> <name></name> <condition></condition> <file></file> <altfile></altfile> <posx></posx> <posy></posy> <width></width> <height></height> <keepaspect></keepaspect> <haligned></haligned> <valigned></valigned> </image>

A unique name identifying this element of your screen. eversion:eskins:ref:elements

conditions are if statements to pick when to add this block to the screen. See eversion:eskins:block:if

The path and filename (including extension) to your image. Paths are relative to your skins media folder unless variables for shared or jukebox are used.

This field is variable friendly to include images from titles or data from the title. eversion:eskins:ref:variables.

Altfile is almost the same as file. If file fails to load for any reason, altfile is then loaded in it's place. A great way to do "default" style artwork when missing

The x,y coordinates of the upper left corner of the image.

The width and height of the image. It will be scaled by flashlite if it is not an exact fit. Be careful with scaling, flashlite and most hardware do not support good anti-aliasing and quality will degrade fast.

When set to true, the image will be scaled if needed maintaining the aspect ratio. Use aligned options for how to repositioned if needed

• Default: False

When an image has been resized keeping the aspect, the image may not end up where you want it to on the screen anymore. you can reposition it within the original box by aligning it.

• haligned=horizontal (left to right)

• valigned=vertical (top to bottom)

• Options: left (or top), right (or bottom), center

• Default: center

NOTE: these options only work when keepaspect is true.

Images added inside a segment or tile do not use the posx and posy features. These are automatically assigned based on where they are currently appearing on the screen. To move an image around in these cases, see the shiftx and shifty features of a tile.

You also have the following options for images inside a tile or used with a segment: <image> <segname></segname> <highlight></highlight> <hyper></hyper> <swap></swap> </image>

When you have an image on the screen that changes as a user moves around in a segment, you need to connect the image block to the segment it is for. This way the image will not be updated when the user is inside another segment where the screen needs to freeze. For this you need a segname AND a hyper setting.

If you have data that does not update but comes from a segment, you use segname without hyper and it will be drawn on the screen immediately after the segment is ready. This is very handy for things like nav buttons, the number of tiles the user can scroll around, etc etc.

This option is only used for images not inside a tile. Tiles have their own control internally.

Highlight is when you want a tile to have a different appearance when it becomes selected. When using a cursor will not pull off your look and feel, use highlight to change the tile.

• true: Shows when highlighted/selected
• false: shows when not highlighted/selected
• null/not used: default, it appears in both cases.

WARNING: If you can do it with the cursor, you should use that method as it offers the fastest speed on low end hardware. For those cases where you can't, you should only use this for parts of a tile you want to change. Using it to create 2 different views with the same images does mean it needs to load all the images to draw the tile, even if they are hidden. It will impact speed.

Hyper has 2 purposes:

• It tells Eversion to update the image every time the user moves in a segment
• It has the hyperscroll draw level for when to update the screen based on the users hyperscroll options.

Hyper is only used for images not inside a segment. Make sure you also use the segname option so eversion knows which text fields to update.

For more information on Hyperscroll, draw levels and recommendations see: eversion:eskins:dev

When set to true, swap will leave the image on the screen until it's time to redraw it for the hyperscroll system. Very handy for indexes when you have an element like a poster that might look weird if it keeps removing from the screen and leaving it to replace would work better.

Page artwork: <image> <name>ditheredoverlay</name> <file>infowall/overlay.png</file> <posx>10</posx> <posy>22</posy> <width>50</width> <height>120</height> </image>

Poster that changes: <image> <name>poster</name> <file>[:@jukebox:][:posterurl:]</file> <posx>10</posx> <posy>500</posy> <width>50</width> <height>240</height> <hyper>2</hyper> </image>