AccueilMembres connectés récemment
[PhpBB2] Encadrement des photos dans le .preview .postbody
2 participants
Page 1 sur 1 • Partagez
- fascicularia
-
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.
![[PhpBB2] Encadrement des photos dans le .preview .postbody Opera_10](https://i.servimg.com/u/f74/11/93/85/24/opera_10.png)
J'ai repris le script permettant d'y parvenir en modifiant les paramètres mais hélas en vain.
Avec pour css
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.
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.
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.
- fascicularia
-
Lun 29 Juil 2019 - 19:56
Bonjour Philippe 
,
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
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 :
![[PhpBB2] Encadrement des photos dans le .preview .postbody Sans_t60](https://i.servimg.com/u/f74/11/93/85/24/sans_t60.png)
, 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 :
- Milouze14
Fondateur -
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
-
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.
Ce ccs permet de rajouter cette partie d'encadrement
En l'état, on obtient ceci
![[PhpBB2] Encadrement des photos dans le .preview .postbody Sans_t61](https://i.servimg.com/u/f74/11/93/85/24/sans_t61.png)
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)
Hélas, pas plus de succès.
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
En l'état, on obtient ceci
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.
- Milouze14Fondateur
-
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?:
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
-
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 .
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
J'ai retenté l'insertion des js en début et en fin du posting_preview mais sans effet. Les js semblent pourtant corrects.
au pire, je peux toujours modifier le premier css en
En modifiant le padding, ça s'en rapproche sans le box shadow contenu dans le before.
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
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>
- 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.
- Milouze14Fondateur
-
Mer 31 Juil 2019 - 4:22
Hello Stéphane,
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
.
Tu peux garder le style et imposer une marge en déposant un padding :
Un autre truc me chagrine dans ton style ici:
Tu charges 4 images et tu ne t'en sers que de deux:
Ceci suffit mon ami:
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
.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
-
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
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
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
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum