Apparence de l'image dans le bloc accueil

[Laférosse]

Bonjour, j'avais demandé récemment des modifications concernant le bloc accueil afin d'insérer une image sur toute la largeur. Le code fonctionne, par contre j'ai remarqué une latence dès que l'on change de page ou lors d'un rafraichissement. On voit clairement l'image en petit puis qui s'agrandit ensuite. Ce qui n'est pas très esthétique. Y'aurait-il un moyen d'y remédier ? En passant par les templates ? Peut-être que cela stabiliserait l'image ? Merci d'avance pour votre aide.

[Laférosse]

Je mets le lien du code si cela peut-être utile.

https://forum.forumactif.com/t407254-page-d-accueil-sur-toute-la-largeur?highlight=agrandir+l+image+de+accueil

[Laférosse]

Bonsoir. personne pour me dire comment faire et si c'est possible d'insérer mon image en accueil, pour qu'elle soit plus stable, via les templates ? Merci.

[chattigre]

Bonjour,

De mon côté actuellement je vois ça, l'image semble bien au bord à gauche, mais il y a un blanc à droite...

En revanche je ne constate aucun délai ou changement de taille perceptible ?...
Est-ce bien de cette image dont vous parlez ?

Bonne journée
Cordialement

[Laférosse]

C'est bien cette image.



Mais je parle de la latence lorsque par exemple je change ou quand je rafraichis cette page.

Pendant quelques secondes j'ai ce rendu :



Puis l'image se stabilise bien dans toute la largeur.



Testé sur chrome avec un écran large, un écran plus petit ainsi que sur mobile. Même effet.
Donc j'aimerai qu'il n'y ai plus cette latence entre chaque changement de pages ou de rafraichissement(f5).

Je pense que cela vient du code, le temps qu'il s'applique sur l'image, c'est pour cette raison que je demandais si on pouvait insérer cette image via les templates. A mon avis, cela supprimerait cette latence, sans pouvoir l'affirmer, je ne m'y connais pas plus que ca.

[Laférosse]

[R.P. Gryphus]

Bonjour Crocnana (j'aime ton pseudo )

D'abord ton image a une résolution de 1600x900... Ce n'est pas une résolution très moderne. Si l'objectif c'est une image qui couvre toute l'écran, elle devrait avoir les dimensions de 1920x1080.

Ensuite ton image est en format .PNG, ce qui est un format beaucoup plus lourd que le format plus standard et commun .JPG. Et non seulement tu utilises une image en format .PNG, mais en plus elle a une résolution de 1600x900. C'est énorme pour une image en format .PNG!

Ces deux points suffisent à eux seuls pour expliquer les problèmes que tu rencontres. Mon conseil serait donc de changer le format et les dimensions de l'image, voir si cela règle ton problème. Si ce n'est pas le cas, on pourra tenter autre chose.

EDIT : Je réalise après relecture que tu ne sembles pas être au courant du problème de l'espace blanc à droite de ton image. La dimension de ton image est de 1600x900, ce qui peut correspondre à la résolution de ton écran, mais ce n'est pas une résolution standard et la plupart des gens qui visiteront ton forum verront aussi ce gros espace blanc à droite. De là l'importance d'avoir une image dans une résolution standard et l'adapter via CSS à la résolution d'écran de l'utilisateur s'il a une résolution plus petite. Le contraire est aussi possible, soit avoir une image de 1600x900 et adapter sa résolution aux écrans qui ont une résolution supérieur, mais dans ce scénario ton image va perdre beaucoup de sa qualité puisque le CSS la forcera à s'agrandir.

[Laférosse]

J'ai testé sur plusieurs écrans, la dimension et la grandeur, la qualité de l'image est correcte (même dimension que mon header). Testée sur plusieurs écrans comme je l'ai déjà précisé. Le code qui m'a été fourni à la base à de toute façon un width à 100%. Ce que Chattigre me montre en screen, je ne reproduis pas ce problème de marge droite. Alors si il pouvait m'indiquer pourquoi ???? En fait, tu ne donnes aucunes solutions car cela n'explique pas la latence.

Le code donné à la base est celui-ci :

Code:

#header-banner {margin-bottom: 0px;}
.block .block-content {box-shadow:none; padding: 0px;}
.block .block-content img {width: 100%;}

Ma question est donc toujours d'actualité. Est-il possible d'insérer l'image que j'ai mis dans le bloc accueil via les templates afin de stabiliser l'image.
Pour rappel : l'image met quelques secondes à apparaitre correctement sur toute la largeur. Ceci à chaque rafraichissement ou quand je reviens sur la page. (voir les screens précédents) merci.

Un indice supplémentaire : le bot de l'annuaire voit bien le problème, également, sur mon ancien design idem pour le problème)



https://www.forumactif.com/annuaire/air-du-temps-et-societe/sujets-de-societe

[R.P. Gryphus]

Moi et Chattigre rencontrons le même souci concernant l'espace blanc. Et nous ne serons pas les seuls.



La raison, je l'ai déjà expliqué.

Additionnellement, tu n'utilises pas la déclaration width: 100%; mais bel et bien max-width: 100%; ce qui a pour effet de simplement garder ton image dans sa largeur d'origine, soit 1600px. Si ton image avait 1920px, tu n'aurais pas ce souci malgré l'erreur commise d'utiliser max-width plutôt que simplement width. En utilisant ce dernier, ça va régler le problème d'espace blanc, mais ça va avoir l'effet, comme je l'ai déjà mentionné, d'élargir ton image et elle va perdre de sa qualité.

Pour la latence, je l'ai aussi expliqué dans mon message précédent et t'ai donné les conseils pour résoudre ce problème.

[Laférosse]

Bonjour testé avec une image plus grande hier soir. ( 1900 px c'est le maximum que j'arrive à obtenir, plus c'est de toute facon pixellisé) donc, la suggestion n'est pas idéale et Même problème de latence. Je ne parle pas de la marge a droite que je ne reproduis pas sur différents écrans.   Dans le code précédent j'ai bien

Code:

.block .block-content img {width: 100%;}

et non max width enfin c'est ce que je vois de noter.
Ma question est : comment mettre l'image en page d'accueil via le template. Merci par avance de m'apporter la solution.


Edit : tu n'as pas semblé l'avoir lu. Mon header fait 1600px de largeur et je n'ai aucun problème. Une idée ?

re-edit
testé ce matin sur mon forum test avec une image à 1920px, le même problème de latence (voir le screen) avant que l'image ne se stabilise sur la largeur.
Image test 1920px :
https://zupimages.net/up/23/10/qpmg.png

screen :

[MlleAlys]

Bonjour,
La latence vient bien du temps d'application du javascript, je suppose que la qualité de la connexion ou les capacités de l'ordinateur de la personne peuvent jouer également ?

Je ne sais pas si c'est le plus propre ou le plus efficace, mais vous pouvez peut être tester comme ça, le déplacement semble être alors imperceptible chez moi (à défaut de l'être chez tout le monde, il devrait au moins être plus rapide je suppose !) :

- Supprimez le javascript des modules (on va le placer dans le template).

- Dans votre page d'accueil, ajoutez un identifiant à l'image :

Code:

<img id="imgaccueil" src="https://zupimages.net/up/23/10/tzsd.png" />

- Dans le template index_body, ajoutez le code suivant juste avant <!-- END message_admin_txt --> (ligne 11 du template par défaut) :

Code:

<script type="text/javascript">$("#imgaccueil").insertBefore("#wrap");</script>

- Enregistrez, puis publiez le template.

- Pour ce qui est du css, je vois également un max-width au lieu d'un width lorsque j'inspecte votre forum, donc également le même problème d'image trop petite sur un grand écran.
Avec le nouvel identifiant, il semble en tout cas plus intéressant de remplacer votre code précédent par :

Code:

#imgaccueil {
  width: 100%;
}

(le cas de la bannière est différent, l'image choisie dans le panneau est placée en image de fond, et déjà redimensionnée à la largeur de l'écran avec un code css dans le css par défaut du forum.)
Sur un grand écran (plus large que la taille des images), vos deux images seront élargies jusqu'aux bords, mais si la différence de taille est trop importante, elles risqueront d'apparaitre floues.



EDIT : avec ce que je vous propose, seule l'image est déplacée au dessus du corps du forum. Le message d'accueil et le reste de son contenu sont toujours à leur place "normale" dans le corps du forum.

[R.P. Gryphus]

... la suggestion n'est pas idéale et Même problème de latence.

Il ne s'agit pas d'une opinion mais d'un fait bien reconnu depuis plusieurs années : la résolution standard d'un écran est de 1920x1080 pixels. La résolution de ton image n'est pas pas idéale ni conforme aux standards d'aujourd'hui, si l'objectif est bien d'avoir une image qui couvre la largeur entière d'un écran. Ceci n'est pas une invitation à un débat, je ne fais que te donner l'information. Après tu en fais ce que tu veux.  

Dans le code précédent j'ai bien

Code:

.block .block-content img {width: 100%;}

et non max width enfin c'est ce que je vois de noter.

Ce n'est pas le code qui était procédé sur ton forum, mais maintenant que tu utilises une image avec les dimensions standards de 1920x1080 pixels, le problème de l'espace blanc semble être réglé comme je ne le vois plus aujourd'hui.

Edit : tu n'as pas semblé l'avoir lu. Mon header fait 1600px de largeur et je n'ai aucun problème. Une idée ?

re-edit
testé ce matin sur mon forum test avec une image à 1920px, le même problème de latence (voir le screen) avant que l'image ne se stabilise sur la largeur.

Non, j'ai bien lu et je mentionne que ton image faisait bel et bien 1600px de largeur et était en format PNG. Et je vois que ton image, maintenant dans une résolution approprié de 1920x1080, est toujours en format PNG plutôt que JPG. Ce qui peut, je le répète, très certainement expliquer la latence.

EDIT : Et la suggestion de MileAlys est tout aussi valide. L'utilisation de Javascript peut occasionner ce genre de latence. Du coup, ce qui peut être réalisé via CSS devrait l'être via CSS et non Javascript. Celui-ci devrait, en général, toujours être le dernier recours puisque c'est bien plus complexe que le HTML et le CSS. Ce que propose MileAlys pourrait tout aussi bien régler ton problème de latence. Si ce n'est pas le cas, on tentera une approche strictement via le CSS et les templates.

[MlleAlys]

Du coup, ce qui peut être réalisé via CSS devrait l'être via CSS et non Javascript. Celui-ci devrait, en général, toujours être le dernier recours puisque c'est bien plus complexe que le HTML et le CSS. Ce que propose MileAlys pourrait tout aussi bien régler ton problème de latence. Si ce n'est pas le cas, on tentera une approche strictement via le CSS et les templates.

J'ai réfléchi à une solution uniquement avec le css, ou templates + css, mais rien ne me paraissait très propre (faire dépasser l'image du cadre du forum dans lequel elle se trouve ne me parait pas idéal du tout, et en mettant l'image avant le cadre du forum dans le template, j'avais à nouveau besoin d'un javascript pour n'afficher l'image que sur l'index du forum)... Alors j'ai peut être raté une astuce plus intéressante (et je suis tout ouïe), mais je suis effectivement restée sur un javascript du même principe que le précédent. ^^" ET ça semble bien fonctionner sur mon forum test, je ne vois plus de latence pour ma part (mais je n'ai pas une mauvaise connexion ni un mauvais ordi, qui peuvent jouer aussi).

[Laférosse]

Bonjour MelleAlys. Ah ! Merci pour votre aide concise, concrète et vos explications. Vous avez bien cerné mon problème. Votre solution fonctionne, la latence a disparu. Je précise que je ne crois pas que c'était du à ma connexion ou mes appareils, je suis en réseau fibre et j'avais testé sur un ordi portable neuf, ainsi que sur mon mobile.
Il reste cette vilaine marge à supprimer svp. ( Le bloc accueil qui est visible? ) Ne peut-on pas simplement le supprimer dans les templates ? Il ne me sert à rien. L'image doit être collée au header. Merci beaucoup.

[MlleAlys]

Avez-vous bien supprimé le code javascript précédent (placé normalement dans les modules > javascripts) ?
(normalement le bloc d'accueil n'est pas sensé se trouver au dessus de l'image, mais rester à sa place plus bas dans le corps du forum... Et un javascript même inutile peut ralentir le chargement du forum, donc mieux vaut le retirer)

Dans le template, remplacez ce passage correspondant au message d'accueil (dont le script qui a été ajouté) :

Code:

       <!-- BEGIN message_admin_index -->
        <div class="block introduction">
            <!-- BEGIN message_admin_titre -->
            <div class="block-header">{message_admin_index.message_admin_titre.MES_TITRE}</div>
            <!-- END message_admin_titre -->

            <!-- BEGIN message_admin_txt -->
            <div class="block-content">{message_admin_index.message_admin_txt.MES_TXT}</div>
            <script type="text/javascript">$("#imgaccueil").insertBefore("#wrap");</script>
            <!-- END message_admin_txt -->
        </div>
        <!-- END message_admin_index -->


Par :

Code:

       <!-- BEGIN message_admin_index -->
      
            <!-- BEGIN message_admin_titre -->
            {message_admin_index.message_admin_titre.MES_TITRE}
            <!-- END message_admin_titre -->
      
            <!-- BEGIN message_admin_txt -->
            {message_admin_index.message_admin_txt.MES_TXT}
            <script type="text/javascript">
              $("#imgaccueil").insertBefore("#wrap");
              $("#header-banner").css("margin-bottom","0");
            </script>
            <!-- END message_admin_txt -->
      
        <!-- END message_admin_index -->


J'ai retiré la structure du bloc, pour le rendre "invisible", et complété le javascript pour supprimer la marge.

[Laférosse]

MelleAlys, je ne sais pas si j'ai bien fait. J'ai supprimé le js. La marge en haut est toujours là. Et le bloc (accueil, je pense) apparait maintenant en dessous. J'aimerai supprimer la marge et ce bloc qui ne me sert à rien. Merci.

[MlleAlys]

Nos messages se sont croisés, la solution (j'espère) est dans mon message précédent.

[Laférosse]

Génial mzelle Alys. C'est impeccable. Vraiment, un grand merci à vous pour votre aide précieuse et rapide.

Merci également à R.P. Gryphus pour ses recommandations pour l'image.