Connexion

Récupérer mon mot de passe

Derniers sujets
» [TOUTES VERSIONS]Ajouter un contenu visible que par les membres ayant répondu.
par dymo Aujourd'hui à 2:10

» *RESOLU*[PHPBB2] Mise en page dans le corps du message uniquement sur le 1er message
par Milouze14 Ven 14 Fév 2020 - 16:25

» [BESTOF] Les photos à partir de l'ID d'un membre
par Milouze14 Ven 14 Fév 2020 - 3:53

» [PHPBB2] Afficher un message en haut de sujet lorsqu'il est verrouillé
par christ77000 Jeu 13 Fév 2020 - 10:01

» [TOUTES VERSIONS]Visualiser le mot de passe
par christ77000 Jeu 13 Fév 2020 - 8:29

» [TOUTES VERSIONS] Recherche de texte dans les templates
par photoclic Mer 12 Fév 2020 - 19:42

» *CORBEILLE*[PHPBB2] Viewtopic_body : Séparer les champs du profil
par Milouze14 Sam 8 Fév 2020 - 6:15

» *CORBEILLE*[PHPBB2] Messenger sur forumactif
par Milouze14 Sam 8 Fév 2020 - 6:14

» *RESOLU*[PHPBB3] Mettre un cadre aux forums des catégories
par Milouze14 Jeu 6 Fév 2020 - 15:06

» *RESOLU*[MODERNBB] Couleur textarea
par Milouze14 Mer 5 Fév 2020 - 18:06

» [TOUTES VERSIONS]Message automatique au déplacemet d'un sujet
par Jackymi Mar 4 Fév 2020 - 8:50

» *RESOLU*[MODERNBB] Barre de navigation sur 2 lignes
par Milouze14 Mar 4 Fév 2020 - 3:47

» *CORBEILLE*[PHPBB2] Message automatique au déplacement d'un sujet
par Milouze14 Dim 2 Fév 2020 - 9:17

» *RESOLU*[MODERNBB] Largeur forum modernBB
par Milouze14 Dim 2 Fév 2020 - 8:13

» *CORBEILLE*[AWESOMEBB] Erreur "429 too many requests nginx"?
par Milouze14 Ven 31 Jan 2020 - 3:52

» *CORBEILLE*[PHPBB2] Profil
par Milouze14 Mer 29 Jan 2020 - 3:51

» *CORBEILLE*[PHPBB2] QUI REGARDE LES POSTS ,?
par Milouze14 Mar 28 Jan 2020 - 3:48

» *CORBEILLE*[PHPBB2] Profil et avatar
par Milouze14 Mar 28 Jan 2020 - 3:45

» *CORBEILLE*[PHPBB2] Chapeau du père noel.
par Milouze14 Mar 28 Jan 2020 - 3:43

» *RESOLU*[PHPBB3] Récupération avatar (automatiquement) d'un membre
par Milouze14 Lun 27 Jan 2020 - 18:44

*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody

Voir le sujet précédent Voir le sujet suivant Aller en bas

fascicularia
fascicularia
Milouzien

Messagefascicularia le Lun 29 Juil 2019 - 19:44

  • Version du forum :
    PhpBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Opera
Bonjour à tous, j'utilise cette astuce qui fonctionne très bien :
https://www.milouze14.com/t32134-toutes-versions-activer-la-previsualisation-directe

Ce script a été modifié par Arnaud pour répondre à une autre demande :
https://www.milouze14.com/t32219-resoluphpbb2-previsualisation-en-direct#613073


Afin d'avoir un rendu fidèle de ce qui est posté au niveau des images, je souhaite reproduire l' encadrement au niveau des photos.

Voici une simulation en apposant via les outils du navigateur la div intitulée video.

*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Opera_10

J'ai repris le script permettant d'y parvenir en modifiant les paramètres mais hélas en vain.

Code:
$(function(){
$('.preview .postbody').find('img[src*="servimg.com"] ').wrap('<div id="video"></div>');
});

Avec pour css
Code:
.preview .postbody img[src*="servimg.com"] {
    width:560px;
    background-color: #fff;
    padding: 7px!important;
    box-shadow: 2px 2px 15px 0 #000;
    display: block;
    margin: auto;
}

div#video:before {
    content: "";
    background-color: #fafafa;
    height: 30px;
    border: 8px solid #fff;
    display: block;
    Width: 550px;
    box-shadow: 2px 2px 15px 0 #000;
    margin: auto;
    padding-left: 4px;
    padding-right: 4px;
}

le premier css appose bien l'encadrement .
La div par contre n'est pas apposée sur les image de servimg; le div#video:before n'est donc naturellement fonctionnel.

J'ai tenté d'insérer le script sur sujets, toutes les pages et en l'insérant dans le posting preview mais sans succès.

Voyez vous ce qui coche au niveau de mon bidouillage ?

Merci par avance pour votre aide.


Dernière édition par fascicularia le Mer 31 Juil 2019 - 19:14, édité 1 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Lun 29 Juil 2019 - 19:49

Coucou Stéphane,
je suis sur ton fofo et je ne reproduis pas ce genre de soucis en prévisualisation,
l'image est bien centrée!!
fascicularia
fascicularia
Milouzien

Messagefascicularia le Lun 29 Juil 2019 - 19:56

Bonjour Philippe  coucou ,
le soucis n'est effectif que lorsque l'on prévisualise.

Le script initial qui appose l'encadrement fonctionne bien par contre lorsque le message est envoyé.

Je souhaite juste que le rendu soit identique entre la prévisualisation et le résultat lors de l'envoi.

Voici une image
Code:
[url=https://servimg.com/view/11938524/11778][img]https://i.servimg.com/u/f74/11/93/85/24/hpim1612.jpg[/img][/url]

Le script donné dans le premier message est actuellement sur toutes les pages (à la fin)
https://altitudetropicale.forums-actifs.com/51891.js

Le centrage est effectif. Le premier css agit.

C'est la partie before qui ne fonctionne pas. Le js devrait apposer une div intitulée vidéo qui permet d'apposer le haut de l'encadremenT cad :

*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Sans_t60


Dernière édition par fascicularia le Lun 29 Juil 2019 - 20:02, édité 1 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Lun 29 Juil 2019 - 20:01

le soucis n'est effectif que lorsque l'on prévisualise.

Justement, je n'ai que prévisualisé et l'image se positionne bien au centre.

Ce script:
Code:
$(function(){
$('.preview .postbody').find('img[src*="servimg.com"] ').wrap('<div id="video"></div>');
});

Est fonctionnel seulement si le message est publié, il faut donc rechercher la cause ailleurs.
fascicularia
fascicularia
Milouzien

Messagefascicularia le Lun 29 Juil 2019 - 20:09

re Philippe,

j'ai réédité mon dernier message.

Lors de la prévisualisation, c'est ce css qui ne fonctionne pas vu que le js n'appose pas la div video à l'image contenue dans le .preview .postbody.

Code:
div#video:before {
    content: "";
    background-color: #fafafa;
    height: 30px;
    border: 8px solid #fff;
    display: block;
    Width: 550px;
    box-shadow: 2px 2px 15px 0 #000;
    margin: auto;
    padding-left: 4px;
    padding-right: 4px;
}

Ce ccs permet de rajouter cette partie d'encadrement
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Sans_t60


En l'état, on obtient ceci
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Sans_t61

Le js fourni est le js modifié pour la prévisualisation.

Si tu analyses la prévisualisation, tu verras que la div video n'est pas apposée à l'image dans la prévisualisation.


edit :
je viens de tenter une autre approche avec le js qui aurait eu le mérite de fonctionner sur toutes les images (hormis les smileys)
Code:
 $(function(){
  $('.preview .postbody').find('img').each(function(){

if(img>=150)
{
$(this).addClass('video'); 

});
});

Hélas, pas plus de succès.
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mar 30 Juil 2019 - 4:26

Hello Stéphane,
effectivement,c'est assez étrange,juste une précision,je comprend bien que le before ajoute une la partie d'encadrement, mais comment sont interprétés les 2 points de couleur verte?

Cette css ne serait pas efficace?:
Code:
.postbody img[src*="servimg.com"]:before {
        content: "";
        background-color: #fafafa;
        height: 30px;
        border: 8px solid #fff;
        display: block;
        Width: 550px;
        box-shadow: 2px 2px 15px 0 #000;
        margin: auto;
        padding-left: 4px;padding-right: 4px;}
fascicularia
fascicularia
Milouzien

Messagefascicularia le Mar 30 Juil 2019 - 20:00

Bonjour Philippe ,


les deux points proviennent d'une partie du css dans le before que j'ai supprimé dans le css communiqué. C'était juste histoire de ne pas surcharger les infos .

Code:
background-image: url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif) !important;
    background-position: left top,right top !important;
    background-repeat: no-repeat !important;

Je teste ta solution de suite.

Edit : aucun effet sur le posting preview bien que le before s'affiche bien au niveau des outils du navigateur. Bizarrement le  css agit mais le contenu ne s'affiche pas  marreordi

J'ai retenté l'insertion des js en début et en fin du posting_preview mais sans effet. Les js semblent pourtant corrects.

Code:
   <script language=JavaScript>
$(function(){
$('.preview .postbody').find('img[src*="servimg.com"] ').wrap('<div id="video"></div>');
});
</script>
et par la suite
Code:
 <script language="JavaScript">
 $(function(){
  $('.preview .postbody').find('img').each(function(){

if(img>=150)
{
$(this).addClass('video');  
}  
});
});</script>

au pire, je peux toujours modifier le premier css en

Code:
.preview .postbody img[src*="servimg.com"] {
    width: 560px;
    background-color: #fff;
    padding: 37px 7px 7px 7px!important;
    box-shadow: 2px 2px 5px 0 #000;
    display: block;
    margin: auto;
    background-image: url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif) !important;
    background-position: left top,right top !important;
    background-repeat: no-repeat !important;
}

En modifiant le padding, ça s'en rapproche sans le box shadow contenu dans le before.
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 31 Juil 2019 - 4:22

Hello Stéphane,


J'ai retenté l'insertion des js en début et en fin du posting_preview mais sans effet. Les js semblent pourtant corrects.

Ne te fatigues pas avec les script car comme mentionné plus ça ne sert à rien.

le before n'a pas le temps de charger à mon avis, voilà pourquoi clin oeil .

Tu peux garder le style et imposer une marge en déposant un padding :

Code:
.preview .postbody {padding:30px 0px;}


Un autre truc me chagrine dans ton style ici:
Code:
   
background-image: url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),
url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),
url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),
url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif) !important;

Tu charges 4 images et tu ne t'en sers que de deux:
Code:
background-position: left top,right top !important;


Ceci suffit mon ami:
Code:

background-image: url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),
url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif) !important;
fascicularia
fascicularia
Milouzien

Messagefascicularia le Mer 31 Juil 2019 - 19:09

Bonjour Philippe,

Le dernier css ne fonctionne pas lui non plus ; c'est à n'y rien comprendre.

On va lâcher l'affaire ; je vais tout bonnement installer ce css

Code:
.preview .postbody img[src*="servimg.com"] {
    width: 560px;
    background-color: #fff;
    padding: 37px 7px 7px 7px!important;
    box-shadow: 2px 2px 5px 0 #000;
    display: block;
    margin: auto;
background-image: url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),
url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif) !important;
    background-position: left top,right top !important;
    background-repeat: no-repeat !important;
}


Il n'y aura pas le box shadow sur la partie haute mais tant pis.

Merci pour ton aide et, pour le temps que tu as sacrifié pour cette demande tape la
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 31 Juil 2019 - 19:19

Re coucou Stéphane,
désolé de ne pas avoir trouvé d'autre solution, mais c'est une prévisualisation et forcément
on ne peut pas faire ce que l'on souhaite....
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 31 Juil 2019 - 19:19


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum