Lier une image à un thème

**zooffy** · 28/12/2007, 12h15

Salut

Je découvre un peu les thèmes et je voudrais faire un truc, mais je trouve pas de doc sur le sujet, enfin, je pense que je ne dois pas utiliser les bons mots clé. Certainement parce que je n'ai pas d'expérience en la matière.

J'ai fait un composant de navigation qui donne une sorte de liste de lien. J'ai utilisé de <asp:HyperLink pour ça. C'est assez cool. Dedans je glisse une <asp:Image et un <asp:Label. Je fais tout ça dynamiquement, avec nourriture depuis la BDD et tout va bien.

J'ai aussi scotché des SkinId et des CssClass sur chauqe contrôle. Comme ça, quand je change le thème, tout va bien.

Maintenant j'ai un petit souci avec la <asp:Image. Il faut lui donner une ImageUrl. Je voudrais lui mettre une adresse qui se changer dynamiquement en fonction du thème. Je pourrais, par exemple, stocker cette image dans le répertoire du thème. Mais je ne trouve pas le moyen de dire que cette image qui portera toujorus le même nom se trouve dans le répertoire du thème choisi.

Voilà, je suis persuadé que c'est deux fois rien, mais je sèche. Pouvez vous m'aider ?

**calagan99** · 28/12/2007, 12h32

Si tu affectes le ImageUrl dans le code-behind, pourquoi n'utilises tu pas un string.format ?

Tu fais un truc style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

monImage.ImageUrl=string.format("{0}{1}",adresseDuTheme,NomDeLImage)

**zooffy** · 28/12/2007, 12h51

En fait non, je souhaite affecter l'image à partir du fichier Skin.

Mais ton idée est pas mal. Dans le CodeBehind je peux récupérer mon thème.
Par contre, comment connaitre l'adresse du thème dynamiquement. Pareil, j'ai cherché dans la MSDN, mais rien, enfin impossible de trouver la bonne méthode ou propriété.
J'ai farfouillé en utilisant des mots comme skinUrl ou PAthSkin, mais nada, pas de réponse.

Merci pour ton aide.

**Poulain** · 29/12/2007, 21h07

Code htm :

Sélectionner tout - Visualiser dans une fenêtre à part

<asp:Image runat="server" ImageUrl="ThemeSubfolder/filename.ext" />

à l'adresse: http://msdn2.microsoft.com/fr-fr/library/ykzx33wh.aspx

**zooffy** · 02/01/2008, 09h33

Merci pour ton aide.

J'ai lu cet article, que j'ai réussi à trouver aussi en français. Mais ça marche pas. Lorsque je place mes images dans un répertoire sous le thème, il me fait un truc bizarre dans l'URL de l'image et va chercher un genre de contaténation entre le dns et le chemin relatif de l'image commençant par le fameux ~

Ce que je n'ai pas compris dans l'article en question et tout ce que j'ai pu lire sur le sujet, c'est le principe de thème choisi. Si cette technique ne fonction que dans le cas d'un thème défini dans le Web.Config, c'est mort.

Je fais une application dynamique du thème.

J'ai un poil contourné le problème en travaillant sur les CSS. De plus, l'avantage que j'ai trouvé au CSS c'est l'on peut placer une image en BackGround d'une cellule. En ASP.NET (sauf si on m'explique que je me trompe) la balise <asp:TableCelle n'accepte pas d'image en BackGround.

Merci pour votre aide.

**Poulain** · 02/01/2008, 16h57

Certe mais de toute façon tu peuxallier .skin et .css pour un thème...

De plus, celà m'etonne que ça ne fonctionne pas, quand tu met le nom du theme dans le webconfig.

Et que celà ne fonctionne pas quand tu mets l'adresse de l'image avec un sous-repertoire...

Mais si tu l'dis..

**zooffy** · 03/01/2008, 09h24

Merci pour ton aide. Quelques questions subsidiaire me viennent.
Mais d'abords je voudrais préciser un point que j'ai peut être mal exprimé : mon thème est dynamique. Il n'est pas exprimé dans le Web.config car j'ai une Sub dans le PréInit de la page qui va chercher sa référence dans la BDD.

Ensuite, je ne vois pas pourquoi on ne pourrait pas allier CSS et SKIN. J'ai du mal à comprendre l'incompatitiblité entre les deux. D'autant qu'il y des choses qu'on peut faire dans et pas dans l'autre et inversement.

Je vais mettre un peu de code et de citation pour illustrer ce qu'il m'arrive.
Pour appeller mon image je fais comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
Dim img As New Image
With img
	.SkinID = "imgFleche"
	.CssClass = "imgFleche"
	.ImageUrl = "ImgMenu/fleche.gif"
End With

Et lorsque je prend les propriétés de l'image sur la page en cliquant droit sur la croix rouge j'ai ça :

http://monsite/site/ImgMenu/fleche.gif

Ce qui fait que là il cherche dans le même répertoire que le composant utilisateur qui appelle l'image.

Donc, voilà mon incompréhension.

**Poulain** · 04/01/2008, 08h51

L'utilisation d'un .css et d'un .skin, en meme temps est possible, c'est ce que je disais.

Sinon en ce qui soncerne ton image, là tu est entrain de remplir les propriétés de ton control à partir de ta feuille de code de la page ou se trouve cecontrol.

Donc, si tu met l'url de l'image, il va chercher par rapport au repertoir ou se trouve cette page.

Mais tu fais des trucs bizard.
Même si c'est un thème dynamique, normalement, tu peux faire un truc dure genre

Page_preinit
mapgage.thème = "nomdemonthème"

et tout se configurer automatiquement selon le thème que tu as choisi...

Alors que là, tu ne tederd pas vraiment de tes fichiers .css et .skin

**zooffy** · 04/01/2008, 09h23

OK, je commence à mieux comprendre.
Donc j'ai fais un test en mettant ça dans mon .SKIN

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<asp:Image SkinID="imgFleche" runat="server" ImageUrl="/App_Themes/jemprunte/fleche.gif" />

Le résultat est un peu bizarre.
Lorsque l'image en question est utilisée dans un composant appellé directement dans la page, c'est bon. Mais si le composant est appellé dans un coposant qui lui est appelé dans la page, ça fait une croix rouge et ça donne ce genre de chemin dans les propriétés de l'image

http://monsite/~/App_Themes/site/ImgMenu/fleche.gif

Donc là, je me reperd un peu.

Bon, maintenant on pourrait aussi se dire que, vu que c'est appelle dans le fichier .SKIN, mettre le chemin entier, c'est pas trés grave. Sauf que le fichier en question sera dupliqué pour fabriquer d'autres thèmes et ça va obligé le développeur à vérifier tous les chemins. C'est pas de la fainéantise, mais y quand même 250-300 contrôle définis dans le fichier, donc si on peut s'épargner une poil de boulot, c'est toujours bon à prendre.

Merci pour ton aide.

**calagan99** · 04/01/2008, 10h09

En ajoutant "~/" devant ton "App_Themes" tu résoudras ton problème.
L'utilisation du "~" est ultra-importante puisqu'il permet de spécifier un chemin relatif.

L'exemple suivant montre l'opérateur ~ servant à spécifier un chemin d'accès relatif à la racine pour une image lors de l'utilisation du contrôle serveur Image. Dans l'exemple, le fichier image est lu dans le dossier Images situé directement sous la racine de l'application Web, indépendamment de l'endroit où se trouve la page sur le site Web.

<asp:image runat="server" id="Image1"
ImageUrl="~/Images/SampleImage.jpg" />

Source

Il en va de même pour ton répertoire App_Themes

**zooffy** · 04/01/2008, 11h02

Entièrement d'accord avec toi calagan99, sauf que mon but est justement l'inverse de ça. Je voudrais qu'il aille chercher à partir du thème dans lequel il est surtout pas à partir de la racine.

Le principe c'est que, à partir du moment où un thème est appliqué, il aille chercher les images dans un répertoire sous le thème en question, et ça dynamiquement sachant que le thème est différent selon les cas et peut même être modifier dans une visite.

Merci pour ton aide.

**calagan99** · 04/01/2008, 11h20

Je ne comprend absolument plus ton soucis.
Je pense que tu est en train de réinventer la roue puisque asp.net te permet justement d'utiliser des themes pour ne pas avoir à galerer avec des chemins différents.

Tu définis un theme "defaut" dans App_Themes, tu y inseres ton css et les images qui vont avec.
Tu en crées un second "Special", aussi dans App_Themes, tu y inseres la aussi images et css.
Et au clic sur un bouton ou sur l'evenement de ton choix, tu affectes le theme désiré a l'aide de PAGE.THEME="defaut" ou "Special" et le tour est joué.

**Poulain** · 04/01/2008, 12h19

Ah, je ne sais plus comment soivent etre les url pour les images de themes,
si c'est: ~/app_thème/lenomduteheme/limage.ext
ou ~/lenomduteheme/limage.ext
ou ~/limage.ext

Fait des essais comme ça pour voir.

Ensuite, si tu veux reustiliser ton fihcier skin pour un autre thème, pas de probleme il faudra juste que les images qui vont à un certain endroit aient le meme nom.

d'après ce que je t'avais mis de la MSDN, c'est plutot : ~/lenomduteheme/limage.ext

PS: le "~" en fait, correspond à une url dynamique, c'est le chemin qu'il y a avant le repertoire dans lequel se trouve le fichier. si tu comprend ce que je dis

**zooffy** · 04/01/2008, 12h37

Alors j'ai fait les essais en question

Envoyé par Poulain

Ah, je ne sais plus comment soivent etre les url pour les images de themes,
si c'est: ~/app_thème/lenomduteheme/limage.ext
ou ~/lenomduteheme/limage.ext
ou ~/limage.ext

Le premier ne donne pas satisfaction : les images dans le composant inclus dans l'autre ne s'affiche pas et je serais obligé de mondifier le chemin à cause de la présence du nom du thème.
Le second ne donne aucune satisfaction. Il va chercher les images dans un répertoire qui n'existe pas avec une différence entre le coposant direct et l'inclu en insérant le ~ dans le chemin aprés le / qui se trouve aprés le DNS
Le troisième un peu pareil sur le seconde, le nom du thème en moins.

Ce que je ne comprends pas c'est surtout qu'il n'ait pas le même comportement lrosque le composant est direct ou inclu dans un autre.

@Calagan : mon souci n'est pas sur le moyen d'appeller un thème dynamiquement, amis de faire exactemetn ce pourquoi .NET est prévu : ne pas me prendre la tronche sur les images et utiliser la relativité des chemins au maximum.
Visiblement selon l'endroit d'où est appellé le composant avec un SkinID l'interprétation n'est pas la même.

Voilà le chemin interprété par le composant direct dans la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
http://monsite/App_Themes/site/ImgMenu/fleche.gif

Et voilà le chemin interprété par le coposant lorsqu'il est inclu dans un autre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
http://monsite/~/App_Themes/site/ImgMenu/fleche.gif

Sachant que c'est le même controle image qui est utilisé dans les deux cas. La seule différence entre les deux est le fait que le Composant est posé directement dans la page une première fois, puis appeller par un autre Composant ensuite.

Voyez vous mieux ?

**mafyoso** · 04/01/2008, 13h38

Bonjour,

Et bonne année à tous !!!!

Vraisemblablement l'inclusion d'un composant dans un autre annule l'interprétation du ~ . La ~ correspondant à l'attribut "base" de la page est seulement interprétée par le serveur (exclusivité aspx)...

Donc as-tu essayé par curiosité en travailler en relatif html avec "../blabla/"?

A suivre

**zooffy** · 04/01/2008, 14h34

Je viens d'essayer en mettant ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<asp:Image SkinID="imgFleche" runat="server" ImageUrl="../ImgMenu/fleche.gif" />

Et il me fait toujours ce même genre de comportement en ajoutant un ~ dans les chemins d'image du composant quand il est inclu.

Mais quoi qu'il arrive il ne mets pas le nom du répertoire du thème, donc il ne trouve pas l'image.

Bonne idée Mafyoso, mais pas le bon résultat.
une autre idée, peut être.

J'y pense comme ça : il n'y aurait pas un mot clé qui remplce le nom du thème dans le fichier SKIN ? J'ai pas trouvé de chose dans ce gout dans la MSDN, mais bon, je ne suis pas infallible.

Lier une image à un thème

ASP.NET

Discussions similaires

Partager

Partager