Détacher l'image de description de catégorie de sa description

[Kendall]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis toujours
Lien du forum :  

Description du problème

Bonjour,

Mon souci n'est pas très compliqué en soi, et je crois que c'est possible, mais ça fais si longtemps que je n'utilise plus cette option que je ne retrouve pas mes petits.

J'ai codé des catégories et, je voudrais inclure une image de description en passant par le cadre "url" dans les paramètres de la catégorie (https://prnt.sc/t83ngk). Actuellement j'utilise un code directement dans la description mais, dans mes souvenirs il était possible, dans le code, de séparer l'image de la description soit avec deux variables différentes, soit avec une solution miracle /Pan.
Parce que cette solution ne me conviens pas vraiment.

Merci d'avance.

[kheino]

Bonjour,

Qu'entends-tu par "détacher" l'image ?
Pouvoir la placer où tu veux ?

[mSyx]

Hello o/
Je vois trois moyens de "détacher" cette image de la description:

- En CSS, en jouant sur les positions (principalement);
- Dans le template, en dupliquant cette variable et en trichant un peu avec du CSS;
- En JS, où on détacherait simplement les deux avec un pitit script. :b

Il faudrait cependant plus d'infos sur l'effet voulu parce que comme kheino, j'ai un peu de mal à comprendre ce que tu souhaites réellement faire ~

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.

[Kendall]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : toujours
Lien du forum :  

Description du problème

Bonjour,

Mon souci n'est pas très compliqué en soi, et je crois que c'est possible, mais ça fais si longtemps que je n'utilise plus cette option que je ne retrouve pas mes petits.

J'ai codé des catégories et, je voudrais inclure une image de description en passant par le cadre "url" dans les paramètres de la catégorie (https://prnt.sc/t83ngk). Actuellement j'utilise un code directement dans la description mais, dans mes souvenirs il était possible, dans le code, de séparer l'image de la description soit avec deux variables différentes, soit avec une solution miracle /Pan.
Parce que cette solution ne me conviens pas vraiment.

Merci d'avance.

Mon sujet a été archivé parce que je n'ai pas été assez rapide. Je suis navrée du désagrément mais mon souci n'est pas résolu
(ancien sujet ici : https://forum.forumactif.com/t403499-detacher-l-image-de-description-de-categorie-de-sa-description#3366244)

Pour répondre aux personnes qui m'avaient répondu :
Merci et désolée du délai @kheino & @mSyx La variable {catrow.forumrow.FORUM_DESC} comprend la description textuelle + l'image. Je voulais savoir s'il y avait un moyen d'isoler la partie image avec une autre variable / duo de variable, ou quels étaient les solutions pour ne pas avoir à éditer le CSS dans toutes les catégories à chaque fois que je veux changer de design. Actuellement j'ai un code dans chaque description de chaque catégorie (cf screen) qui comprend le HTML de l'image avec une class css dédiée ainsi que le CSS de la description. Mon but est de n'avoir aucune balise HTML dans les descriptions de forum (que tout passe par les templates ou le CSS) pour ne rien avoir à modifier à l'avenir.
Je crois que c'est possible mais ça fait tellement longtemps que je n'ai pas utilisé cette option...

Merci et encore désolée
Kendall

[Chacha]

Mon sujet a été archivé parce que je n'ai pas été assez rapide. Je suis navrée du désagrément mais mon souci n'est pas résolu

Bonjour @Kendall,

Il suffisait d'envoyer un message privé à un membre du staff du forum pour demander son replacement.

Votre sujet a été fusionné avec celui qui avait été archivé.

Cordialement.

[Kendall]

Ah désolée je voulais pas déranger bêtement ;;

Je up du coup

[kheino]

Bonjour Kendall,
Il me semble que c'est possible, il faut juste que je retrouve un de mes anciens tutos...

Déjà, mettons-nous d'accord :
- 'catégorie' c'est bien ce qui contient les 'forums' (qui eux contiennent les sujets) ?

Si ce sont les forums, ce ne devrait pas être très compliqué, en revanche, un peu de HTML dans leur description sera nécessaire.
Si j'ai bien compris,ce serait du style :

Spoiler:

Alors, la dernière image :
- Chapitre Premier est une catégorie
- Alinea I et Alinea II sont des forums
- Le Pacte et Presentations sont des sujets (topics, incorporés dans la description-forum avec l'mage)

Cela dit, c'est peut-être possible sans HTML, il est vrai que je code d'emblée et n'utilise pas, ou très peu l'autre éditeur.

Enfin, pas encore sûre d'avoir bien compris, on s'en approche...

[Kendall]

Salut @"kheino" et merci pour ta réponse !

Ce que j'appelle "Catégorie" ici seraient "Zone Staff" et "Univers et Annexes" : http://prntscr.com/tiggcr

Par contre, ma demande est vraiment dans l'idée de ne pas mettre du tout de HTML dans le paramétrage via PA mais uniquement dans les templates.

Là, ce que tu me montres, c'est ce que j'ai déjà mis en place sur mon forum test.
Sur mon premier screen ci-dessus, il y a un gros rectangle rose fushia. Il s'agit de l'image de description en question.
Voici le screen du paramétrage de catégorie : http://prntscr.com/tigh2q

Du coup, je pense que j'ai déjà appliqué la méthode que tu me proposes.
Mon interrogation subsiste et j'aimerais vraiment pouvoir ne pas passer par les descriptions. La seule chose que j'aimerais mettre dedans, c'est le texte pur.

[Kendall]

J'me permet un petit Up

[Kendall]

Hello !
Je me permets un petit UP
Merci

[kheino]

Bonne nouvelle, j'ai trouvé comment interagir sur l'image de la description d'un forum.
Attention, c'est laborieux parce qu'il faut jouer soit avec 'margin', soit avec 'float', probablement avec les deux, en même temps, très simple et on peut TOUT faire.
Il faut ensuite vérifier que le rendu  soit le plus possible similaire sur les autres navigateurs.

Alors, pourrais-tu faire un petit schéma en indiquant où tu voudrais cette image ?

En gros, vite fait, voici ce que ça donne :

Spoiler:

En bleu le titre, les 3 lignes le texte et l'image est celle mise dans le champ de la description du forum.

[kheino]

@Kendall
En fait pas besoin de ton schéma, tu codes aussi alors je pense que tu arriveras à t'en sortir, sinon, tu reviens et on voit plus loin.

Alors c'est en fait tout simple (qu'il fallait cherché simple et non compliqué!).
Dans le template index_box nous allons simplement ajouter un attribut 'class' à la div qui entourera la description, ensuite ce n'est que du CSS.
index_box, cherche :

Code:

<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>

Remplace par :

Code:

<div class="fodescimg">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<div style="clear: both;"> </div>
</div>

Dans le CSS et là tu arranges à ta convenance :

Spoiler:

Rotation, transition, autre emplacement, cadre, etc, à partir de là c'est open & free à ta créativité.

EDIT : Je te remets en spoiler la capture de ce que ça donne avec mon image dans la description du forum et juste du texte, avec le CSS indiqué plus haut

Spoiler:

C'est tout aussi 'probant' sur chromium (je pense que pour les autres navigateurs aussi).


Edit modération : message fusionné avec le suivant (erreurs corrigées).

[Kendall]

Bonsoiiiir.
Désolée de mon absence récente, j'ai eu des soucis familiaux. Je pourrais me pencher sur tout ça demain soir / nuit !
En tout cas merci à vous deux pour vos messages et je reviens si je m'y retrouve pas

[Lixyr]

*Edit modération : Message édité --> apport de précision concernant les deux solutions possibles par rapport aux propositions de mSyx*


La classe genmed :

Code de kheino :

<div class="fodescimg">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<div style="clear: both;"> </div>
</div>

Je propose de le remplacer par

Code:

<div class="fodescimg">
{catrow.forumrow.FORUM_DESC}
<div style="clear: both;"> </div>
</div>

La classe genmed est utilisée de base dans les templates mais à partir du moment où on modifie un forum, elle ne sert plus car tout devient personnalisé. De plus, cette balise est souvent modifiée en CSS à outrance, ce qui assure de nombreux bugs par la suite car cette balise est présente partout dans tous les templates... Donc je conseille de ne pas l'utiliser quand c'est possible. En l’occurrence, le fait d'entourer cette variable d'une classe unique permet de ne pas utiliser la classe genmed. Il est également possible de ne pas la conserver !


------

Pour ce qui est de détacher l'image de la description, il existe deux solutions :

1er solution :

On englobe toute la variable {catrow.forumrow.FORUM_DESC} par une classe quelconque. Ensuite en CSS, on touche à l'image avec du float (code proposé par kheino)

Code:

.classe-quelconque img {
float: right/left;}

Les avantages : C'est simple et rapide.
Les désavantages : On ne peut pas personnaliser la place que prend le texte, attribuer des hauteurs fixes afin que l'images et le texte soient parfaitement centrés les uns aux autres. L'image est bel et bien détachées mais la personnalisation reste minime.


2ème solution

- On duplique la variable {catrow.forumrow.FORUM_DESC} qu'on entoure de deux classes différentes : une pour l'image et une pour le texte.
En soit dupliquer la variable n'a rien de grave, c'est juste plus difficile à coder car ça demande plus de précision, et dans le cas de la 2ème solution, il faut être sûr qu'une image sera présente à chaque fois.

Il faut ensuite jouer sur les positions pour que les deux variables se retrouvent côte à côte. Là ça va dépendre des balises utilisées mais en général on joue avec le display: table-cell. Ensuite avec la CSS on affiche soit le texte (image --> display : none), soit l'image : (font-size: 0px).

Code:


.classe-quelconque-texte, .classe-quelconque-img  { display: table-cell;}
.classe-quelconque-texte img {
display: none;}

.classe-quelconque-img {
font-size: 0px;}

Les avantages : On peut dissocier complètement l'image du texte et jouer sur la taille afin que tout soit parfaitement aligné, imposer des hauteurs - bref personnaliser au maximum.
Les désavantages : cela demande du codage un peu plus poussé (mais ça reste du CSS, il n'y a pas de script). Avec de la patience ça fonctionne.



Dans l'immédiat, la 1ère solution est plus simple et plus rapide, mais encore une fois, cela dépend de ce que vous voulez avoir comme rendu.

[Lixyr]

Bonjour,

Le sujet a été nettoyé : les messages et réponses n'apportant pas de précision ou étant hors sujets ont été supprimés. Rappel : Toute intervention ne présentant pas de nouvelles informations directes avec le problème est interdite.

Kendall, pour plus de lisibilité, en dehors de vos relances et de la modération initiale, seuls les messages et contenus apportant des réponses à votre problème ont été sauvegardés.
N'oubliez pas de passer régulièrement dans votre sujet, de tester les codes, et de upper toutes les 24h.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.