Afficher sur le deskop du plugin les images à la bonne dimension en mode liste et panel

Plugins
1

Bonjour,

Pour afficher les images à la bonne dimension et résolution.
J’utilise l’affichage suivant :

<div class="eqLogicThumbnailContainer">
	<?php
	foreach ($eqLogicList as $eqLogic) {
		$opacity = ($eqLogic->getIsEnable()) ? '' : 'disableCard'; ?>
		<div class="eqLogicDisplayCard cursor <?= $opacity ?>" data-eqLogic_id="<?= $eqLogic->getId() ?>">
			<div style="height: 100px">
				<img src="<?= $eqLogic->getImage() ?>" style="max-width: 100px !important;width: auto !important;max-height: 100px !important;min-height: auto !important;"/>
			</div>
			<span class="name"><?= $eqLogic->getHumanName(true, true) ?></span>
		</div>
	<?php } ?>
</div>

J’ai donc un affichage de ce type :
image

Maintenant pour prendre en compte l’affiche en liste il faut que j’enlève la balise <div style="height: 100px">

Car sinon cela donne ceci :
image

Par contre quand j’enlève la balise <div> cela me donne :
image

Est-il possible de prendre en compte la balise <div> dans le mode liste pour que l’affichage soit bon ? Dans l’absolue il faudrait enlever le style="height: 100px" de la balise.

J’espère être clair dans ma problématique.

Bonne journée.

2

Bonjour,

Non, ce n’est pas clair.

Êtes-vous en train de développer un plugin ou tentez-vous une personnalisation css?
Si vous voulez développez un plugin il faudrait vous inscrire comme dev et postez dans le salon dev, ca éviterait les doutes.

Qu’appelez-vous « affichage liste »?
Si vous parlez de l’affichage mode tableau de jeedom 4.2, tout est documenté ici: https://doc.jeedom.com/fr_FR/dev/core4.2

Sinon, vous n’êtes pas sensé modifier la présentation standard.

edit:
votre balise div suivante est de trop, il faut la supprimer

<div style="height: 100px">
...
</div>

et pas besoin de tous les style sur la balise img:

echo '<img src="' . $eqLogic->getImage() . '">';
3

Je développe des plugins. Concernant le salon Dev j’ai envoyé un message à @kiboost à ce sujet là il y a une heure.

Je parle de l’affiche deskop du plugin ([deskop] étant indiqué initialement dans l’objet de mon message).
Depuis la version 4.2.x il y a un mode panel et liste :
image

Ben si tu veux que la résolution de tes images soit justes. si tu est obligé de mettre ce code. dans mon cas sinon ça donne :
image
au lieu de
image

La balise <div> permet d’aligner l’affichage du <?= $eqLogic->getHumanName(true, true) ?>.
Parce que l’affichage ci-dessous n’est pas top.
image

Merci.

4

Ce n’est pas la procédure et on ne contacte pas quelqu’un en privé pour avoir de l’aide non plus.
De toute façon kiboost ne s’occupe pas des comptes dev.

Vous devez aller sur le site remplir le formulaire.

Ce n’est pas la façon de faire sur community non plus. Un texte entre crochet ne veut rien dire :wink:

Donc c’est que je disais, cela s’appelle le mode tableau dans la doc donc gardons ce nom là, si tout le monde utilise les mêmes noms on se comprendra mieux.

BTW, le « panel » ça existe aussi dans un plug-in et ce n’est pas ce que vous pensez.

Pour le reste je ne suis pas assez calé en CSS donc si vous ne voulez pas suivre le standard, je n’ai pas de solution.
P-e modifier l’image de base pour que les dimensions soient plus adaptées ?

5

J’y est bien pensé mais dans certain plugin les images sont dynamiques ou pas géré en interne : donc pas possible.

Le but du jeu et d’amélioré le standard pour prendre en compte plus de cas de manière générique.

Par exemple, l’affiche des images de caméra n’est pas forcement un exemple à voir malgré le fait que ce soit un plugin officiel et même payant. Ce dernier pourrait se trouvé améliorer si une amélioration est effectué dans le core suite à ma demande.

Je veux bien faire la modification dans le core si il le faut. mais avant tout j’en parle avant ici.

6

Je suis bien d’accord avec ça :slight_smile:

C’est le cas dans plusieurs plugins gérant un grand nombre d’équipement: openzwave, rfxcom pour ne citer qu’eux, l’image est parfois légèrement aplatie.

Attention, les images doivent toujours être dans le dossier du plugin même si rapatriées dynamiquements par le code php, le js ne pourra pas les afficher si elles ne se trouvent pas sur jeedom
Et même rapatrier des images dynamiquement ce n’est pas idéal, jeedom doit pouvoir fonctionner sans connexion internet (évidement si le plugin connecte des équipements cloud, la question se pose moins)

7

Mets tes images au bon format comme tout le monde et y’aura pas de soucis … :thinking:

8

à la bonne résolution plutôt. Ce n’est pas forcement possible comme expliqué ci-dessus.

Mais pour parler de format, dans le plugin camera toujours, l’image d’affichage est
un *.jpg qui pointent vers des images au format jpg et d’autres au format png (pour gérer la transparence). Le top serait de mettre du *.png et de mettre des vrais png. bref.

Comme je disais il y a un vrai problème avec ces images. Est-ce qu’on peut améliorer cela ? Ou Jeedom restera avec des images aplaties ?

9

Salut,

Je réponds pour le fun (et parce que je hais les fake news).

Pour passer sur beaucoup de plugins, les images sont toujours très bien affichées en utilisant les fonctionnalités du core :
image

image

10

Pour le fun également : Tu vas pouvoir appliquer ton savoir faire sur les plugins camera, openzwave, rfxcom et autres qui sont tous officiel :wink:

11

Avec grand plaisir mon cher ami, je n’y manquerais pas !

12

Pour la petite histoire ces images devraient être au format carré. Et il est déjà prévu de corriger le css du core pour virer les 9pixels en trop sur le height qui sont là car avant le nom du plugin était dans l’image. Mais on va toujours trop vite donc lay on a pris notre temps en effet. Donc les images doivent être au format carré (la résolution on s’en fout ça doit autour de 300px je sais plus). Et on se retrouvera ensuite avec le phénomène inverse, les images des plugins pas à jour (avec la bande transparent en bas) seront alors écrasées.

1 « J'aime »
13

Je comprend tout à fait que les images des icônes des plugins doivent être carré et sans titre.

Par contre je pense les images des eqlogics, peuvent être de toutes dimensions. En faite le core du Jeedom ne prendre bien les différentes tailles sauf celle en format paysage.

Est-ce que le core peut évoluer en ce sens ou non ?
Si je fait une pull requests, est-ce que vous la prendrait en compte ?

Bonne journée.
Luc

14

Si c’est mieux et que ça ne casse rien je ne vois pas pourquoi ne pas le prendre en compte, c’est un peu le but du truc … :grin:

15

Bonsoir à tous,

Voici, ma proposition https://github.com/jeedom/core/pull/1964.
Je reste disponible pour tout commentaire.

Bon week-end.

16

J’ai regardé vite fait, çà a l’air pas mal même sans aucune modif sur les plugins (script, virtual, zwave, etc)

Par contre j’ai toujours évité d’utiliser cette propriété display:contents; qui a tendance a déc…er complet sur safari macos. Chrome / Firefox devraient pas poser de soucis mais il faut quand même ratisser large (sauf ie, on s’en fout)

J’essayerai de tester plus sérieusement dès que j’ai un peu de temps.

17

Hello @kiboost,

Oui, j’aime beaucoup le rendu final.
C’est vrai, je ne teste pas forcement avec safari. étant sous linux.
Par contre j’ai fait des tests avec Epiphany qui utilise également WebKit. Et je n’ai pas trouvé de problème avec display:contents;.

J’espère que tu vas pouvoir prendre un peu de temps pour tester sérieusement. :wink:

1 « J'aime »