Résolution des images Grid

[orpheus]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://sailormoon-france.forumactif.com

Description du problème

Bonjour à tous !

Voilà, je fais actuellement quelques essais avec le nouveau mode Grid mais je constate que même si j'utilise les résolutions indiquées sur les outils SEO (à savoir 1200x630), je constate que celles-ci ne s'affichent pas totalement avec le mode grid et sont « victimes » d'un recadrage plus où moins important, notamment sur ordinateur.

Exemple.

Affichage sur smartphone :


Affichage sur ordinateur :


À noter que j'ai uniquement à des fins de test optimisé l'image de ce topic :
https://sailormoon-france.forumactif.com/t3-01-la-metamorphose

Mais lorsque vous comparez avec l'image d'origine, on voit bien le recadrage :
https://i.servimg.com/u/f96/18/56/12/14/grid110.jpg

Je m'explique pas non plus le recadrage encore plus important sur ce topic, toujours sur ordinateur :
https://sailormoon-france.forumactif.com/t2-saison-1-sailor-moon-classic

Alors que l'image utilisée est à la même résolution que les autres, hormis celui cité ci-dessus et que sur smartphone, l'image s'affiche avec un recadrage beaucoup moins important.

J'aurais donc aimé connaître les résolutions préconisées par Forumactif, notamment sur un forum comme le mien pour un affichage optimal, aussi bien sur ordinateur que sur smartphone.

Merci.

[Pinguino]

Bonjour @orpheus

Alors précision qui a son importance : par facilité pour tous et pour ne pas alourdir le formulaire de création / édition d'un topic, nous avons décidé de ne pas mettre un énième champ "image".

Nous laissons donc les utilisateurs avoir la main sur l'image affichée dans le nouveau template GRID via le champ "URL de l'image Facebook". Mais la résolution que vous citez est celle donnée à titre informative par Facebook et ne se rapporte pas à l'affichage GRID. D'ailleurs, Facebook accepte n'importe quelle image même si le réseau social préconise des images 1200x630.

--

Ensuite le template étant responsive, il y a forcément un travail d'adaptation sur l'image afin que la page s'adapte aux différentes résolutions.

[orpheus]

Bonjour Pinguino,

Je vous remercie pour votre réponse. Si je comprends bien, il est possible de modifier la résolution native des images grid et en le faisant, ça améliorera l'affichage ?

Si oui, pourriez-vous (où quelqu'un d'autres) me communiquer la procédure à suivre ?

Ensuite le template étant responsive, il y a forcément un travail d'adaptation sur l'image afin que la page s'adapte aux différentes résolutions.

Oui bien sûr, c'est justement pour ça que j'ai ouvert ce topic, mon but étant de créer des images qui s'adapteront le mieux possible partout.

[C_driko]

Bonjour,

Si je comprends bien, il est possible de modifier la résolution native des images grid et en le faisant, ça améliorera l'affichage ?

Si oui, pourriez-vous (où quelqu'un d'autres) me communiquer la procédure à suivre ?

Alors non, personne n'a dit ça

[orpheus]

Bonjour C_driko,

Ah ? J'ai peut-être mal compris mais :

Nous laissons donc les utilisateurs avoir la main sur l'image affichée dans le nouveau template GRID via le champ "URL de l'image Facebook"

Il me semble bien qu'ici, Pinguino a parlé du nouveau template Grid ? À moins que pour lui, les outils SEO équivaut aux templates pour le Grid ?

Dans tous les cas, je recherche quand même une solution, notamment pour la première image en haut qui est zoomé de manière disproportionné sur ordinateur par rapport aux autres où le recadrage est encore acceptable.

J'ai remarqué le même phénomène avec la dernière image de la rubrique


Alors que l'original est ainsi :
https://i.servimg.com/u/f96/18/56/12/14/90-110.jpg

Encore une fois, sur smartphone, l'affichage est correct (il y a un léger recadrage mais c'est acceptable, tandis que pour celui qui utilise un ordinateur, un tel affichage n'est clairement pas agréable.

À la limite, au lieu d'une image qui occupe toute la largeur pour la première et dernière, ne serait-il pas possible de forcer l'affichage en mode "petite tuile" comme c'est le cas pour les autres images ?

[MattiaDes]

Bonjour, comme vous n'avez qu'un seul sujet en surbrillance, il occupe toute la largeur de la page. L'idéal dans ce cas est d'avoir une image très large, d'au moins 150px de haut.

Si vous n'aimez pas l'effet de couverture que le recadrage de l'image peut provoquer, il existe quelques solutions que vous pouvez appliquer en CSS :

1) Passez de la couverture au contenu, même si ce n'est pas vraiment la meilleure solution, car vous vous retrouverez avec des lacunes sur les côtés (même sur mobile, à moins que vous n'appliquiez le CSS que sur ordinateur) :

Code:

.topic-card .cover-image::before {
  background-size: contain !important;
}

2) Ou peut-être avec la répétition de l'arrière-plan:

Code:

.topic-card .cover-image::before {
  background-size: contain !important;
  background-repeat: repeat !important;
}

3) Utilisez un double fond, alors que celui qui se trouve en dessous est ombré :

Code:

.topic-card .cover-image::before {
  background-size: contain !important;
backdrop-filter: blur(10px) !important;
}
.topic-card .cover-image {
   background-image: var(--cover-image);
   background-position: center center;
   background-repeat: no-repeat;
background-size: cover;
}
.topic-card:hover .cover-image::before {
  -webkit-transform: none !important;
  transform: none !important;
}

J'ai remarqué le même phénomène avec la dernière image de la rubrique

Pour ce point, je vous recommande de modifier le nombre de sujets par page de manière à ce qu'il soit un multiple du nombre de boîtes que vous avez depuis le bureau, afin de ne pas avoir une boîte pleine largeur à la fin. (Si vous avez 3 cases par ligne sur le bureau, vous devez définir le nombre de sujets par page comme un multiple de 3 : 30, 36, 42, 48, 54. Vous devez choisir un nombre qui est également un multiple de deux).

Désolé, mon français n'est pas parfait, j'espère que ces codes CSS vous aideront. Même le dernier, qui est esthétiquement le plus beau, ne peut être considéré que pour un ordinateur de bureau et non pour un mobile.

Bonne journée, j'espère que vous apprécierez cette nouvelle mise en page !

[orpheus]

Bonjour MattiaDes,

Je vous remercie pour cette réponse très complète et pour toutes les solutions que vous avez tenté de m'apporter.

Cependant, j'aurais aimé savoir s'il n'est pas possible de cibler uniquement les sujets épinglés (en "surbrillance" comme vous dites) en CSS ? Vous parlez également de cibler uniquement l'affichage sur ordinateur, dans l'idéal, c'est ce que je souhaiterai mettre en place, afin de ne pas impacter les personnes naviguant sur le forum via un smartphone.
Car après test, il s'avère que les solutions que vous m'avez apporté impactent l'ensemble des images, ce qui est dommage.

comme vous n'avez qu'un seul sujet en surbrillance, il occupe toute la largeur de la page. L'idéal dans ce cas est d'avoir une image très large, d'au moins 150px de haut.

Idéalement, vous me conseillerez quoi comme résolution d'images (hauteur et largeur) ? Car celle en épinglé fait 568x320, ce qui respecte donc les 150px que vous préconisez.

Excusez-moi pour toutes mes questions, j'essaie simplement de comprendre comment je pourrais optimiser le plus possible mes images sur mon forum.

[MattiaDes]

Malheureusement, il n'est pas facile d'appliquer ce style uniquement aux sujets en vedette. Vous pouvez probablement y parvenir, mais vous devrez attendre que le modèle soit modifiable.

Au lieu de cela, pour que la modification CSS ne s'applique qu'au bureau, il suffit d'ajouter le code CSS dans cette requête média.

Code:

@media (min-width: 768px) {
    /* Insérez vos règles CSS ici */
}

Idéalement, vous me conseillerez quoi comme résolution d'images (hauteur et largeur) ? Car celle en épinglé fait 568x320, ce qui respecte donc les 150px que vous préconisez.

Il n'y a pas de réponse exacte, la hauteur est toujours fixée à 150px, le problème est la largeur, qui varie en fonction de la résolution de l'écran. S'il s'agit d'un sujet en vedette, vous devriez utiliser 1200x150px, mais ce n'est pas une solution car, sur mobile, l'image serait coupée et deviendrait 350x150px (je parle des valeurs de largeur réelles, alors en CSS l'image est étendue si vous utilisez « cover » ou contenue si vous utilisez « contain »).

Une dernière solution qui me vient à l'esprit est cette feuille de style CSS, qui garantit que chaque boîte ne dépasse jamais 500 px de largeur. De cette manière, vous pouvez utiliser une image de 500x150px en toute tranquillité ou n'importe quelle image qui ne sera jamais trop coupée parce qu'elle conserve presque toujours un rapport d'aspect rectangulaire standard.

Code:

.grid-section .topic-card {
   max-width: 500px;
}

Toutefois, cela crée des espaces vides sur le bureau :

Bonne soirée

[orpheus]

Je pense que la dernière solution que vous m'avez apporté est le meilleur compromis pour un affichage sur ordinateur.
Cela crée certes des espaces vides mais au moins, les images s'affichent à peu près correctement et c'est pour moi l'essentiel.

Encore merci pour votre aide et tout le temps que vous avez passé sur mon problème !
Bonne soirée à vous également.

Je passe le sujet en résolu.