(1) 2 3 4 ... 9 »
Présentations des images dans les news
Pascal C.
Pascal C.

Présentations des images dans les news

Pascal C. 431
25/10/2021 15:25
#1
Pascal C. 431
25/10/2021 15:25
Suite au post d'Alain sur un autre topic...
Donc , à te lire je suis un vieux c..., c'est ça ???

Citation :
Une fois fini,
tu pourras ouvrir un sujet à propos de la façon de présenter tes images dans ta news.

Tu vas me dire "pourquoi" ?
Tu utilises un thème 100% responsive,
MAIS dans ta news tu utilises une très vilaine table.
Ce n'est plus comme cela maintenant même si ça fonctionne.

Alain
Re : Présentations des images dans les news
Alain T
Alain T

Re : Présentations des images dans les news

Alain T 610
25/10/2021 16:39
#2
Alain T 610
25/10/2021 16:39
Merci d'avoir ouvert ce sujet.
Oui, ton thème est 100% responsive si tu utilises les templates surchargées de xswatch4.
Par contre, si tu ajoutes du code non optimisé Bootstrap 4 (4.6), il y a de grande chance que les pages concernées ne soient plus tout à fait responsives et réagissent pas tout a fait comme tu l'attendrais.

Dans ton exemple, tu utilises une vilaine table pour présenter des éléments.
Les tables sont à proscrire, hormis en cas de VRAIS tableaux, sinon, il faut faire autrement.

Bon, évidemment, cela prends du temps, donc ce n'est pas forcément ta priorité car il y a un temps d'apprentissage à ne pas négliger.
Mais une fois cette technique maitrisée, tu pourras l'adapter à d'autres situation et dans des délais beaucoup plus courts.

Ta bible sera dorénavant Bootstrap 4.6 (4.6 pour s'accorder avec ton thème qui est sur une base de BT 4.6).

Pour ton besoin particulier, ta lecture peux commencer ici : Card layout
Maintenant, il y a plusieurs façon de présenter un ensemble de photos,
moi je te conseillerai card-decks, mais tu peux essayer d'autres choses.

Evidemment,
Je t'invite a faire des essais pour comprendre comment cela fonctionne.

Tu peux aussi t'inspirer des templates de xmnews, bloc xmnews_block.tpl par exemple.

Il y a d'autres méthodes également telles que flex
Tu peux en trouver un très bon exemple sur la page "XOOPS - Les Groupes", par exemple.
Vise un peu la barre du bas avec les 10 boutons. Je t'invite à éditer la source pour voir le code.
Je ne te cache pas que j'ai mis un certain temps a proposer cette barre, mais tu peux t'en servir exemple pour comprendre et avancer plus vite.

Encore une fois, ce n'est pas primordial, mais il ne faut pas négliger le design et la fonctionnalité responsive !

Bon courage.
Re : Présentations des images dans les news
Alain T
Alain T

Re : Présentations des images dans les news

Alain T 610
25/10/2021 16:51
#3
Alain T 610
25/10/2021 16:51
Au fait,
Voici un tableau (un vrai tableau ) avec toutes les fonctionnalités responsives.

Et pour t'en convaincre,
regarde la page des sujets récents du forum.
Amuses-toi à réduire la largeur de la page et observe les changements en fonction de cette largeur.
Moins c'est large, plus je retire les éléments les moins utiles (masquage de certaines colonnes en fonction de la largeur, réorganisation du contenu...)
Re : Présentations des images dans les news
Pascal C.
Pascal C.

Re : Présentations des images dans les news

Pascal C. 431
25/10/2021 17:39
#4
Pascal C. 431
25/10/2021 17:39
Merci à toi Alain, c'est hyper intéressant et ça semble aussi assez complexe.

je note et regarderais de plus près en faisant des essais pour comprendre le fonctionnement dès que j'aurais un poil de temps.
ça risque par contre de m'être vraiment très, très utile
Re : Présentations des images dans les news
Alain T
Alain T

Re : Présentations des images dans les news

Alain T 610
26/10/2021 16:19
#5
Alain T 610
26/10/2021 16:19
Par exemple, la page http://lumieresdefrance.com/phpv2/mod ... ws/article.php?news_id=13
ne devait pas utiliser une table pour afficher les "Luminaire équipées du module LEDFlex de type C"

Regarde ce qu'il se passe en mode smartphone.
- Tes icones sont tout petits, ils devraient se trouver sur 2 lignes par exemples, ça serait mieux.
- la tableau plus bas n'est pas responsive et on ne voit plus les valeurs à droites
- Ton image http://lumieresdefrance.com/phpv2/aco ... s/ledflex_type_c/shot.jpg devrait être sur toute la largeur en mode md ou moins large (md, sm, xs)
- ton image bandeau haut devrait prendre toute la largeur du cadre
- Tes 6 courbes ne devraient pas rester en 3 colonnes en mode smartphone
- ...
Re : Présentations des images dans les news
Alain T
Alain T

Re : Présentations des images dans les news

Alain T 610
29/10/2021 11:25
#6
Alain T 610
29/10/2021 11:25
Re : Présentations des images dans les news
Alain T
Alain T

Re : Présentations des images dans les news

Alain T 610
29/10/2021 16:14
#7
Alain T 610
29/10/2021 16:14
Tu auras remarqué que j'ai placé le bouton de lien à différentes positions dans les 4 cadres afin que tu aies une idée du rendu,
mais évidemment, il faudra le placer systématiquement au même endroit sur chaque cadre.
Re : Présentations des images dans les news
Pascal C.
Pascal C.

Re : Présentations des images dans les news

Pascal C. 431
02/11/2021 11:32
#8
Pascal C. 431
02/11/2021 11:32
Ok je comprends le principe. Faudra que je prenne aussi le temps de regarder tout ça du coup.

Par contre en mode smartphone, tes cadres sortent de mon écran.
Re : Présentations des images dans les news
Alain T
Alain T

Re : Présentations des images dans les news

Alain T 610
02/11/2021 12:52
#9
Alain T 610
02/11/2021 12:52
Citation :
Par contre en mode smartphone, tes cadres sortent de mon écran.
Oui, car le container utilisé n'est pas le vrai mais pour ton thème, tu verras, ça sera impeccable.

See the Pen Test-lumiere-de-france-btn by alain01 (@alain01) on CodePen.

Re : Présentations des images dans les news
Pascal C.
Pascal C.

Re : Présentations des images dans les news

Pascal C. 431
02/11/2021 16:14
#10
Pascal C. 431
02/11/2021 16:14
Ok Alain, merci