• 0
creatifmen

Bannière responsive futur...il y a t'il un espoir?

Question

creatifmen    21

hello tout le monde une bannière responsive qui ressemble a ça, c est possible avec zwii?

 

exemple avec une bannière 1170x200

5b0c527c8a8ee_00_1170x200zwbartest.thumb.png.a2be15b69b65ba780c9041f8d73192b5.png

 

avec zwii 8.2.9

01_normal.thumb.jpg.0667594a1a36dc4406449c8c039aa703.jpg

quand ont réduit avec le navigateur zwii 8.2.9 (pas responsive) image tronquée

5b0c52df213b7_02_reductionsansresponsive.jpg.7dbcea72d75591341de757f062c3f9f3.jpg

 

Voici ce que ça devrait donner avec une bannière responsive (c est le truc qui manque d'urgence) autrement Zwii  vas tomber dans l'oublie..

Zwii et ultime faut pas baisser les bras courage à toute l’équipe.
 

 

5b0c5332ab937_03_reductionavecbanresponsive.jpg.1eec3cdd936be831fe86fa5b03f3f5ec.jpg

Modifié par creatifmen

Partager ce message


Lien à poster
Partager sur d’autres sites

34 réponses à cette question

Messages recommandés

  • 1
cybertaf    119
Le 26/08/2018 à 15:45, CroqueWeb a dit :

Auxquels, pour un meilleur compromis, il faut ajouter (Personnalisation du thème -> Mode avancé) ceci :


header { 
  margin:0;
  padding:0;
  background-size: cover;
}

En effet c'est la meilleure solution... intégration dans la prochaine version de test

Modifié par cybertaf

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
creatifmen    21

salut a toi Thispy

  j'avais déjà tester tout ça.

/* Bannière */
header {
 margin: 10px !important;
 background-size: contain;
}

ou ça

/* Bannière */
header {
 margin: 0px !important;
 background-size: contain;
}

avec ce code quand l'on réduit la fenêtre du navigateur ça donne genre ça.. il y a des espaces moches supplémentaire..

 

03avec-le-patch.png.4a5a9ab11540089f078c0127a323a49a.png

 

 

 

 

il faudrait que ça donne plutôt ça...

5b0eb6598869d_04_reductionavecbanresponsive.jpg.73be9e7d7627b8a52eabd2ab8ec879d9.jpg

 

a++ merci quand même..

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Iron    10

Bonjour à tous.

 

Effectivement cette histoire de bannière responsive, c'est quelque chose qu’il manque cruellement à Zwii.

 

Pour une future version de Zwii, c'est possible ?

Sinon, quelqu'un a une idée pour corriger le tir en attendant ?

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101

Il s'agit des styles définis pour "background" pour la balise header, ces propriétés css ont une limite et le redimensionnement de la page entraîne obligatoirement un rognage de l'image si la taille de la partie visible de l'écran est inférieure à celle de l'image.

Les styles modifiables et définis par défaut par Zwii sont :

header{background-color:rgba(255,255,255,1);height:100px;line-height:100px;text-align:center}
header{background-image:url("../file/source/banniere.jpg");background-position:center center;background-repeat:no-repeat}

Auxquels, pour un meilleur compromis, il faut ajouter (Personnalisation du thème -> Mode avancé) ceci :

header { 
  margin:0;
  padding:0;
  background-size: cover;
}

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Iron    10

Merci CroqueWeb.

Voilà une solution qui dépanne en attendant.

Je note pour le rognage à prendre en compte.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101

@Iron

Il y a 15 heures, Iron a dit :

Je note pour le rognage à prendre en compte

C'est exactement ça, il faut tâtonner lors de la réalisation de la bannière, afin que le contenu que l'on souhaite afficher soit toujours visible sur des écrans de faible résolution, tels que les smartphones. Ce contenu devra obligatoirement être centré sur la bannière.

Actuellement il n'y a quasiment plus d'écran inférieur à 720 x 1280 px, mais il y a encore des résolutions de 360 x 640 px sur de vieux appareils, en dessous il est laborieux de naviguer sur le web.

  • Like 1

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101

Il semble que je viens de résoudre le problème de la responsivisation de la bannière, en partant du constat que la hauteur de la bannière est déterminée une fois pour toutes dans la configuration, celle-ci ne peut donc être responsivable, car elle uniquement adaptée à la taille des écrans d'ordinateurs.

Pour que la responsivisature de la bannière soit effective, il faut qu'elle change de hauteur pour les plus petite tailles d'écrans des smartphones, j'ai donc modifié le code de Zwii en ce sens, je le transmet à @cybertaf pour le valider et éventuellement l'ajouter à une prochaine version.

 

Résultats :

 

 

01.jpg

02.jpg

03.jpg

04.jpg

05.jpg

06.jpg

07.jpg

08.jpg

09.jpg

10.jpg

 

Les captures d'écran ci-dessus, faites avec l'outil "vue adaptative" de Firefox, ne sont pas toutes fidèles à la taille des écrans de tests.

Ci dessous une capture en taille réelle :

 

rwd-ok.png.aca2db246f7b58a5427eb23bb978505e.png

 

 

 

 

Modifié par CroqueWeb
précision captures d'écran

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101
il y a 11 minutes, McGregor a dit :

Mais ta banner n'est pas vraiment responsive, est-elle ?

Un background-image adaptatif

Constat :

Le redimensionnement de la page entraîne obligatoirement un rognage de l'image si la taille de la partie visible de l'écran est inférieure à celle de l'image.

Création :

Créer une image d’une taille supérieure à celle que vous avez choisi pour la bannière, sa longueur devra s’adapter aux plus grands écrans (desktop ou laptop), 1280 px est suffisant dans la plupart des cas, mais choisissez 1920 px si l’affichage de votre site est fluide (100 %).

Ajoutez au moins 50 px à la hauteur choisie pour la bannière pour déterminer celle de votre image.

Il est préférable de centrer le contenu devant être visible en permanence.

 

Les propriétés éditables depuis l’interface de Zwii :

header{background-color:rgba(0,0,0,1);height:100px;line-height:100px;text-align:left}
header{background-image:url("../file/source/banniere.jpg");background-position:bottom center;background-repeat:no-repeat}
header span{color:rgba(255,255,255,1);font-family:"Lato",sans-serif;font-weight:normal;font-size:1.6em;text-transform:none}

Celles à ajouter :

Avant la version 8.3.13b, pour un meilleur compromis, il faut ajouter (Personnalisation du thème -> Mode avancé) ceci :

header { 
  margin:0;
  padding:0;
  background-size: cover;
}

 

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101
il y a 4 minutes, PeterRabbit a dit :

@creatifmen a raison 

Sans doutes, mais on peut avoir envie d'une bannière responsivitive sans que celle-ci soit un slider, non ?

Pour ceux qui souhaitent afficher une image dans leur bannière, il est important que celle-ci soit adaptative (in french), et l'image de fond s'adaptera aux mieux avec la modif que je viens de soumettre à @cybertaf

 

il y a 7 minutes, PeterRabbit a dit :

Le début d'une vérité doit se trouver dans le css de Swiper. Je m'étonne que @Rémi n'ait jamais rien proposé.

Si tu détiens la vérité, la vrai, merci de bien vouloir nous la dévoiler -_-

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101
il y a 25 minutes, McGregor a dit :

Gosh ! Les aiguilles d'Ansabère !

Mais ta banner n'est pas vraiment responsive, est-elle ?

Celle des aiguilles d'Ansabère ?

Si oui, ce n'est pas une image préparée pour le fond de la bannière, mais une image avec ses propres dimensions :

 

AiguillesdAnsabere.thumb.jpg.a76a38675eacac4491f4f2e59ec86baa.jpg

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
PeterRabbit    371
il y a 14 minutes, CroqueWeb a dit :

Un background-image adaptatif

Constat :

Le redimensionnement de la page entraîne obligatoirement un rognage de l'image si la taille de la partie visible de l'écran est inférieure à celle de l'image.

 

Je ne pense pas : 

 

5b913539a72a6_Capturedu2018-09-0616-03-28.thumb.jpg.825349fde9bbc3abed3441be4ca65695.jpg

 

 

5b913554cec74_Capturedu2018-09-0616-05-40.jpg.d4456f6179d42ff5bd1885ea5200dd41.jpg

 

Mais j'avoue que je ne me suis jamais passionné pour ce sujet sur lequel je ne sais pas grand chose.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
creatifmen    21

hello

@CroqueWeb cool si tu as trouver qqchose fait plaisir..

 

pour Zwiiper le retour :love: on peut juste avoir une bannière simple, ont rajout simplement

dans swiperslides.inc.php,

 

<!-- Diaporama Swiper : http://idangero.us/swiper/ -->
            <div class="swiper-slide swiper-slide-active"><a href="/dossiersitex/"><img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere responsive-test.jpg"></a>
 </div>

 

a++

 

 

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101
il y a 5 minutes, PeterRabbit a dit :

Je ne pense pas

Il ne s'agit pas du tout de la même chose, le redimensionnement de ton Zwiiper se fait sur des calques et des images :

<div id="swiper" class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269338-torres-del-paine" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/torres_del_paine.jpg" /></a>
<div class="swiper-text">Patagonie<br />Torres del Paine</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269314-laguna-de-los-tres" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/fitz_roy.jpg" /></a>
<div class="swiper-text">Laguna de los Tres<br />et mont Fitz Roy</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269326-laguna-torre" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/laguna_torre.jpg" /></a>
<div class="swiper-text">Laguna Torre</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269311-canal-beagle" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/canal_beagle.jpg" /></a>
<div class="swiper-text">Canal Beagle</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269315-ile-de-chiloe" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/chiloe.jpg" /></a>
<div class="swiper-text">Ile de Chilo&eacute;</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269321-aysen" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/puerto_aysen.jpg" /></a>
<div class="swiper-text">Puerto Ays&eacute;n</div>
</div>
</div>
<div id="swiper-button-prev" class="swiper-button-prev swiper-button-white">&nbsp;</div>
<div id="swiper-button-next" class="swiper-button-next swiper-button-white">&nbsp;</div>
</div>

Celui de la bannière se fait sur le fond (background) de la balise <header>, pas sur l'image elle même.

Il est très simple de dimensionner des images et des calques, sur lesquels on agit directement sur leur tailles (width & height), pour dimensionner une image de fond on ne dispose que des propriétés CSS background, tq cover, contain, etc

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101
il y a 2 minutes, creatifmen a dit :

pour Zwiiper le retour :love: on peut juste avoir une bannière simple, ont rajout simplement

dans swiperslides.inc.php,

Oui, mais ça ne solutionne pas pour autant la non adaptabilité de la bannière, et oblige à installer Zwiiper qui remplace alors la bannière par un slider, et si il ne contient qu'une seule image ça ne fera évidemment pas un diaporama mais une image fixe.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
creatifmen    21

@CroqueWeb oui tu as raison il faudrait intégrée le responsive bannière futur que tu as trouver dans la nouvelle version de zwii.

mais le Zwiiper le retour  c'est de la bombe car il fait la total et pour l'instant c'est la seule chose qui fonctionne pour la bannière responsive & faire un carrousel easy..

:kiss_wink:

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101
il y a 22 minutes, PeterRabbit a dit :

Un background-image adaptatif

C'est ce dont il est question.

il y a 24 minutes, PeterRabbit a dit :

Je ne pense pas : 

Ce que tu montres est différent, ce sont des images dans des calques :

<div><img src="image.jpg"></div>

La propriété CSS background s'applique à :

<header></header>

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
PeterRabbit    371

Bravo @creatifmen ! Le temps que je fasse mes essais, j'en étais arrivé à la même conclusion :

<!-- Diaporama Swiper : http://idangero.us/swiper/ -->

    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-active"><img src="<?php echo helper::baseUrl(false); ?>site/file/source/ny/5th_avenue.jpg"></div>
    </div>  

 

5b914136b97d8_Capturedu2018-09-0616-56-41.jpg.3028f14983f7b32e534cc0f5e7293b97.jpg

 

Au minimum, Zwiiper est un trois en un, ce qui n'est déjà pas mal. o.O

Mais j'ai une petite idée que je vais creuser pour essayer de faire la même chose sans.

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant