Rub an Images

Gestion des images dans le ruban Access

par Thierry GASPERMENT (arkham46.developpez.com/)Date de publication : 25/09/09 Dernire mise jour : 15/09/09

Dcouvrir les diffrentes possibilits de gestion des images du ruban Access. Intgrer les images votre application. Utiliser des images transparentes.

Gestion des images dans le ruban Access par Thierry GASPERMENT (arkham46.developpez.com/)

I - Introduction..............................................................................................................................................................3 II - Contrles de ruban utilisant des images............................................................................................................... 3 III - Utilisation d'une image standard : attribut ImageMso...........................................................................................3 IV - Chargement initial : callback loadImage...............................................................................................................5 V - Chargement la demande : callback getImage................................................................................................... 6 VI - Image dynamique sur un bouton bascule............................................................................................................ 8 VII - Intgrer les images l'application : utilisation d'un champ pice-jointe............................................................ 10 VIII - Utilisation de GdiPlus : transparence des images et format png..................................................................... 12 VIII-A - Chargement de fichiers image avec transparence..................................................................................12 VIII-B - Chargement d'image avec transparence depuis un champ pice-jointe................................................. 13 IX - Transparence des images et format ico.............................................................................................................14 IX-A - Chargement de fichiers icnes avec transparence................................................................................... 14 IX-B - Chargement d'icnes avec transparence depuis un champ pice-jointe.................................................. 15 X - Conclusion........................................................................................................................................................... 16 XI - Les tlchargements.......................................................................................................................................... 16

-2Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2009 - Thierry GASPERMENT. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.


I - IntroductionDans la version 2007 d'Office, les barres de menus ont t remplaces par le ruban. La programmation de ce ruban se fait en XML. Les images affiches sur les contrles du ruban peuvent tre soit : - des images standards intgres Office. - des images personnalises. Nous allons voir les diffrentes techniques pour grer ces images. Pour crer plus facilement le XML de vos rubans, utilisez l'assistant ruban. Pour mieux comprendre la programmation des rubans, consultez ces tutoriels : - Programmez et personnalisez le ruban de vos applications Access 2007. - La personnalisation du ruban sous Excel 2007. - Personnalisation du ruban: Les fonctions d'appel CallBacks. - Comment personnaliser le Ruban de Word 2007.

II - Contrles de ruban utilisant des imagesLes types de contrles du ruban qui affichent une image sont : Type de contrle Description

button comboBox dropDown

dynamicMenu editBox gallery group toggleButton

Bouton. Liste droulante avec une zone de texte d'dition. Liste droulante sans zone de texte d'dition. Menu dynamique Zone de texte d'dition. Galerie de contrles. Groupe contenant les contrles. Bouton bascule.

III - Utilisation d'une image standard : attribut ImageMsoDe nombreuses images standards sont disponibles : elles sont installes avec Office. Pour utiliser une de ces images, dfinissez tout simplement l'attribut XML imageMso du contrle.



La liste des valeurs possibles pour imageMso est disponible dans un fichier Excel sur le site de microsoft : Liste des imageMso. Notez qu'il est galement possible d'utiliser une des valeurs de l'attribut idMso proposes dans la Liste des idMso. Voici un exemple de code XML utilisant l'attribut imageMso : Utilisation de imageMso

Ce code XML suffit afficher les images. Aucun code VBA n'est ncessaire. Voici le ruban obtenu :



Utilisez l'assistant ruban pour trouver plus facilement l'imageMso dont vous avez besoin.

IV - Chargement initial : callback loadImageUn callback est un appel une procdure VBA. Si vous ne savez pas comment fonctionnent les callback, je vous invite consulter les tutoriels cits en introduction. loadImage est un callback associ l'lment CustomUI. La procdure ainsi dfinie sera excute une seule fois pour chaque contrle dont l'attribut image est renseign. Elle sera ignore en cours d'utilisation de l'application, mme aprs un appel Invalidate ou InvalidateControl.

Cette attribut loadImage ne peut donc pas tre utilis pour des images dynamiques qui doivent changer en fonction d'vnements dans la base de donnes. Voici le dbut du code XML d'un ruban utilisant l'attribut loadImage : Attribut loadImage

La procdure VBA Ribbon_loadImage sera excute au premier affichage de chaque contrle de ruban dont l'attribut image est renseign. Voici comment l'crire : Procdure Ribbon_loadImageSub Ribbon_loadImage(imageId As String, ByRef image) End Sub

La procdure nous envoie un paramtre imageId : c'est en fait la valeur de l'attribut image de l'lment dont l'image doit tre charge. En retour, on doit modifier le paramtre image qui attend un objet de type IPictureDisp. Un objet de type IPictureDisp peut tre simplement cr avec la fonction VBA LoadPicture. Voici un exemple de code XML utilisant l'attribut loadImage :-5Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2009 - Thierry GASPERMENT. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.


Utilisation de loadImage

Avec, dans un module VBA, le code de la fonction de chargement des images : Procdure de chargement des imagesSub Ribbon_loadImage(imageId As String, ByRef image) Set image = LoadPicture(CurrentProject.Path & "\images\" & imageId) End Sub

Notez que dans cet exemple, les images sont des fichiers stocks dans un sous-rpertoire nomm images. Voici le ruban obtenu :

La transparence des images n'a pas t conserve (les images gif utilises sont des images avec transparence). Nous verrons plus loin dans cet article comment conserver la transparence des images charges.

V - Chargement la demande : callback getImagegetImage est un callback associ aux lments qui affichent une image. Pour des listes ou galeries, on trouve galement le callback getItemImage. La procdure ainsi dfinie sera excute pour chaque contrle : - Au premier affichage du contrle. - Aprs un appel Invalidate ou InvalidateControl.



Voici le code XML d'un bouton de ruban utilisant l'attribut getImage : Attribut getImage

La procdure VBA Ribbon_getImage sera excute au premier affichage du bouton, puis chaque fois que le contrle est invalid par un appel Invalidate ou InvalidateControl. Voici comment crire cette procdure : Procdure Ribbon_loadImageSub Ribbon_getImage(control As IRibbonControl, ByRef image) End Sub

Activez la rfrence Microsoft Office 12.0 Object Library pour dfinir le type de donnes IRibbonControl La procdure nous envoie un paramtre control : c'est l'lment dont l'image doit tre charge. En retour on doit modifier le paramtre image qui attend un objet de type IPictureDisp. Un objet de type IPictureDisp peut tre simplement cr avec la fonction VBA LoadPicture. Voici un exemple de code XML utilisant l'attribut getImage : Utilisation de getImage -7Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2009 - Thierry GASPERMENT. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.


Utilisation de getImage

Avec,dans un module VBA, le code de la fonction de chargement des images : Procdure de chargement des imagesSub Ribbon_getImage(control As IRibbonControl, ByRef image) Set image = LoadPicture(CurrentProject.Path & "\images\" & control.Tag) End Sub

Notez que dans cet exemple, les images sont des fichiers stocks dans un sous-rpertoire nomm images. Le nom du fichier charger est stock dans l'attribut Tag du contrle du ruban. Voici le ruban obtenu :

L'affichage des images est identique avec loadImage ou getImage. La seule diffrence dans cet exemple est que dans un cas on utilise l'attribut image pour stocker le nom du fichier et dans l'autre cas on utilise l'attribut tag. Dans le chapitre suivant, nous allons dtailler une utilisation de getImage qui ne pourrait tre ralise avec loadImage. La transparence des images n'a pas t conserve (les images gif utilises sont des images avec transparence). Nous verrons plus loin dans cet article comment conserver la transparence des images charges.

VI - Image dynamique sur un bouton basculeAu cours de ce chapitre, nous allons raliser une case cocher de grande taille. Pour la raliser, nous utilisons un bouton bascule dont l'image est modifie en fonction de l'tat appuy ou non du bouton. Pour modifier l'image dynamiquement, il faut : - utiliser la procdure de rappel onLoad du ruban (lment customUI) afin d'obtenir un objet IRibbonUI reprsentant le ruban. - utiliser la procdure de rappel onAction du bouton pour agir en VBA lors du click sur le bouton. - utiliser l'objet ruban (IRibbonUI) pour invalider le bouton et ainsi dclencher la mise jour de ce bouton. - utiliser la procdure de rappel getImage du bouton bascule pour mettre jour l'image. Nous allons galement utiliser la procdure de rappel getPressed du bouton pour synchroniser l'tat du bouton avec une variable VBA.



Voici le code XML du ruban : XML pour bouton bascule

Dans le code VBA nous ajoutons, en en-tte d'un module, la dclaration de l'objet ruban et du flag qui reprsente l'tat du bouton bascule : DclarationsPrivate gFlag As Boolean Private oRibbon As IRibbonUI

Ensuite, nous utilisons la procdure de rappel pour conserver l'objet ruban : Dfinition de l'objet ruban au chargementSub Ribbon_onLoad(ribbon As IRibbonUI) Set oRibbon = ribbon End Sub

oRibbon est alors dfini au chargement du ruban. Cet objet nous permet d'invalider tout ou une partie du ruban. Lorsqu'on clique sur le bouton, la procdure Ribbon_onAction est excute. On rcupre dans le paramtre pressed l'tat du bouton (enfonc ou relch) et on le stocke dans la variable gFlag.-9Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2009 - Thierry GASPERMENT. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.


On appelle ensuite la mthode InvalidateControl du ruban pour dclencher la mise jour du bouton. Sur action sur le bouton basculeSub Ribbon_onAction(control As IRibbonControl, pressed As Boolean) Select Case control.Id Case "togglebutton1" gFlag = pressed oRibbon.InvalidateControl control.Id End Select End Sub

Lorsqu'on invalide le bouton avec la mthode InvalidateControl, toutes ses procdures de rappel get* sont excutes. La procdure getImage nous permet de dfinir l'image en fonction de l'tat du bouton : Mise jour de l'imageSub Ribbon_getImage(control As IRibbonControl, ByRef image) Select Case control.Id Case "togglebutton1" If gFlag Then ' Image de case coche Set image = LoadPicture(CurrentProject.Path & "\images\cocher.jpg") Else ' Image de case dcoche Set image = LoadPicture(CurrentProject.Path & "\images\decocher.jpg") End If End Select End Sub

Et la procdure getPressed dtermine l'tat du bouton, que l'on synchronise avec notre flag gFlag. Mise jour de l'tatSub Ribbon_getPressed(control As IRibbonControl, ByRef returnValue) Select Case control.Id Case "togglebutton1" returnValue = gFlag End Select End Sub

Il n'est pas utile d'employer cette procdure de rappel getPressed si l'tat du bouton est uniquement modifi par clic de l'utilisateur. Mais en dfinissant cette procdure, on peut galement modifier l'tat du bouton de ruban par code VBA : Mise jour de l'tat par code VBA' Dfinit l'tat "cocher" gFlag = True ' Met jour le bouton bascule oRibbon.InvalidateControl "togglebutton1"

Voil donc un exemple d'utilisation de getImage. Cet exemple n'aurait pas pu tre ralis avec la fonction loadImage qui n'est appele qu'une seule fois.

VII - Intgrer les images l'application : utilisation d'un champ pice-jointePeut-tre souhaitez-vous intgrer les images du ruban dans votre fichier Access ? Si le code XML est lui aussi contenu dans une table de la base de donnes, tout le ruban sera alors inclus dans le fichier Access.- 10 Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2009 - Thierry GASPERMENT. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.


Il n'y aura plus de fichiers externes. Les fichiers images peuvent tre intgrs dans un champ de type pice-jointe (nouveaut apparue avec Access 2007). Crez d'abord une table nomme TRibbonImg avec pour champs : - id : champ texte. - img : pice-jointe.

Crez ensuite un formulaire simple FrmRibbonImg contenant les deux champs de la table TRibbonImg et ayant cette table comme source (utilisez si ncessaire l'assistant de cration de formulaire). Nommez le contrle pice-jointe img.

Ajoutez chaque image dans la table. Utilisez un enregistrement par image, ne stockez pas plusieurs images dans le mme champ pice-jointe. Le champ id est utilis pour identifier l'image dans la table : vous pouvez dcider d'y mettre un id de contrle ou n'importe quel identifiant pourvu qu'il soit unique. Si vous utilisez l'identifiant du contrle, vous devrez dfinir une image par contrle mme si plusieurs contrles utilisent la mme image. Une solution simple et efficace consiste utiliser un identifiant qui sera dfini dans l'attribut tag du contrle de ruban (ou l'attribut image si on utilise loadImage). Dans cet exemple, nous ajoutons des images avec comme id le nom du fichier :

XML pour images charges depuis une table

Il faut enfin, pour charger les images et les injecter dans le ruban : - ouvrir le formulaire positionn sur l'enregistrement dsir - et utiliser la mthode cache PictureDisp du contrle pice-jointe- 11 Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2009 - Thierry GASPERMENT. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.


Procdure de chargement d'imagesSub Ribbon_loadImage(imageId As String, ByRef image) On Error GoTo Gestion_Erreurs DoCmd.OpenForm "FrmRibbonImg", , , "id=""" & imageId & """", , acHidden Set image = Forms("FrmRibbonImg").img.PictureDisp Exit Sub Gestion_Erreurs: MsgBox "Image invalide : " & imageId End Sub

Notez qu'on ouvre le formulaire en mode invisible (acHidden) car on ne souhaite pas le voir l'cran. Voici le ruban obtenu :

La transparence des images n'a, cette fois-ci encore, pas t conserve (les images gif utilises sont des images avec transparence). Nous verrons plus loin dans cet article comment conserver la transparence des images charges.

VIII - Utilisation de GdiPlus : transparence des images et format pngCela ne vous a sans doute pas chapp, les mthodes dcrites jusqu'ici ont deux limitations majeures : - la transparence des images gif n'est pas conserve. - le format png n'est pas accept. Le format png est un format d'image trs intressant : bonne qualit d'image, taille de fichier rduite, et prend en charge la transparence. Il est possible d'aller au del de ces limitations en utilisant GdiPlus pour charger les images. GdiPlus est une librairie graphique introduite avec Windows XP. Elle est utilise par Office partir de la version 2007 sous le nom OGL (Office Graphic Library). (Merci au site mossTOOLs.de grce auquel j'ai appris l'existence de cette librairie) Mais utiliser les fonctions de GdiPlus n'est pas trs facile. Voici donc un module de classe utiliser dans vos applications : Module de classe clRibbonImage. Insrez le contenu de ce fichier texte dans un module de classe (Insertion => Module de classe) et nommez ce module clRibbonImage

VIII-A - Chargement de fichiers image avec transparenceLe XML reste inchang, faisons le test avec loadImage : XML avec loadImage

- 12 Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2009 - Thierry GASPERMENT. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.


XML avec loadImage

Avec, dans un module VBA, le code de la fonction de chargement des images : Procdure de chargement des images avec GdiPlusSub Dim Set End Ribbon_loadImage(imageId As String, ByRef image) loGdi as New clRibbonImage Image = loGdi.LoadFromFile(CurrentProject.Path & "\images\" & imageId) Sub

Il suffit de dclarer un objet de type clRibbonImage et de remplacer l'appel LoadPicture par un appel la fonction LoadFromFile de cet objet. Voici le ruban obtenu, compar au rsultat obtenu prcdemment avec LoadPicture :

La transparence est au rendez-vous! Il est galement possible de charger des fichiers png avec cette nouvelle fonction.

VIII-B - Chargement d'image avec transparence depuis un champ pice-jointeNous utilisons dans ce chapitre la mme table TRibbonImg que celle cre prcdemment. Le XML reste inchang, faisons le test cette fois-ci avec getImage : XML avec getImage



Avec, dans un module VBA, le code de la fonction de chargement des images : Procdure de chargement des images avec GdiPlusPublic Sub Ribbon_getImage(ByVal control As IRibbonControl, ByRef image) Dim loGdi as New clRibbonImage Set image = loGdi.LoadFromAttachment("TRibbonImg", "img", "id='" & control.Tag & "'") End Sub

Il suffit de dclarer un objet de type clRibbonImage et de remplacer l'appel LoadPicture par un appel la fonction LoadFromAttachment de cet objet. Cette fonction LoadFromAttachment demande 3 paramtres : - pTable : Nom de la table qui contient les images. - pField : Nom du champ pice-jointe. - pWhere : Clause Where pour rechercher une image en particulier. Voici le ruban obtenu, compar au rsultat obtenu prcdemment avec un formulaire masqu :

La transparence est au rendez-vous! Remarque : il est galement possible de charger des fichiers png avec cette nouvelle fonction.

IX - Transparence des images et format icoUne autre solution pour obtenir de la transparence pour les images du ruban est d'utiliser le format .ico des icnes. L encore, il faut utiliser quelques API pour charger les icnes mais gdiplus n'est pas utile ici. Le code utilis pour charger les fichier ico est allg par rapport au prcdent code utilisant gdiplus, mais seul le format ICO est support. Il existe de nombreux outils gratuits pour crer des fichiers ico et galement des convertisseurs en ligne, par exemple Converticon. Vous pouvez aussi trouver des icnes prts l'emploi sur internet; vrifier toutefois leur licence d'utilisation au pralable. Voici donc un module utiliser dans vos applications pour charger les fichiers ico: Module standard ModRibbonIcon. Insrez le contenu de ce fichier texte dans un module standard (Insertion => Module) et nommez ce module ModRibbonIcon par exemple.

IX-A - Chargement de fichiers icnes avec transparenceNous avons ici 3 icnes dans un sous-rpertoire images. Faisons le test avec loadImage : XML avec loadImage



XML avec loadImage

Avec, dans un module VBA, le code de la fonction de chargement des images : Procdure de chargement des images avec GdiPlusSub Ribbon_loadImage(imageId As String, ByRef image) Set image = IconLoadFromFile(CurrentProject.Path & "\images\" & imageId) End Sub

Il suffit de remplacer l'appel LoadPicture par un appel la fonction IconLoadFromFile. Voici le ruban obtenu :

Notez que la fonction accepte un deuxime paramtre pIconNumber pour ventuellement prciser le numro de l'icne dans le fichier. En effet un fichier ico peut contenir plusieurs images de tailles diffrentes. Dans la base de donnes en tlchargement, vous trouverez un exemple d'utilisation de ce paramtre.

IX-B - Chargement d'icnes avec transparence depuis un champ pice-jointeNous utilisons dans ce chapitre la mme table TRibbonImg que celle cre prcdemment. Nous y ajoutons les 3 icnes, avec en identifiant le nom du fichier. Faisons le test cette fois-ci avec getImage : XML avec getImage

Avec, dans un module VBA, le code de la fonction de chargement des images : Procdure de chargement des images avec GdiPlusPublic Sub Ribbon_getImage(ByVal control As IRibbonControl, ByRef image) Set image = IconLoadFromAttachment("TRibbonImg", "img", "id='" & control.Tag & "'") End Sub

Il suffit de remplacer l'appel LoadPicture par un appel la fonction IconLoadFromAttachment. Cette fonction IconLoadFromAttachment demande au minimum 3 paramtres : - pTable : Nom de la table qui contient les images. - pField : Nom du champ pice-jointe. - pWhere : Clause Where pour rechercher une image en particulier.- 15 Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2009 - Thierry GASPERMENT. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.


Voici le ruban obtenu; le rsultat est identique ce qu'on obtient avec des fichiers externes :

Notez que la fonction accepte un dernier paramtre pIconNumber pour ventuellement prciser le numro de l'icne dans le fichier. En effet un fichier ico peut contenir plusieurs images de tailles diffrentes. Dans la base de donnes en tlchargement, vous trouverez un exemple d'utilisation de ce paramtre. On peut par exemple utiliser un numro d'icne pour un bouton de taille normal et un autre pour un bouton de taille large.

X - ConclusionOn a donc notre disposition plusieurs mthodes pour grer les images du ruban. Il faut faire un choix en fonction de notre besoin : - images standards ou besoin d'images personnalises ? - images intgres ou fichiers externes ? - besoin de transparence ou non ? J'invite les plus courageux dcouvrir (ou re-dcouvrir) les modules de classe clGdiplus et clGdi32. (Le module clRibbonImage est en fait une version remanie de clGdiplus.) Ces modules de classe permettent de gnrer des images et de les utiliser ensuite dans le ruban grce leur mthode GetIPictureDisp. Toutes les fantaisies deviennent possibles, mme d'afficher un gif anim dans le ruban grce GdiPlus.

XI - Les tlchargementsTlcharger le module de classe pour GdiPlus au format texte (secours HTTP) Tlcharger le module pour grer les icnes au format texte (secours HTTP) Tlcharger la base d'exemples au format ACCESS 2007 (secours HTTP)


Documents

Rub an Images