Dotclear

Vous n'êtes pas identifié(e).

Annonce

#1 2017-02-27 02:28:42

Franck49
Membre
Inscription : 2017-02-14
Site Web

///html <iframe> image externe

J'utilise plutôt le formatage wiki, mais parfois c'est bien utile de pouvoir insérer du code html, sans avoir à tout convertir, et la balise wiki (je ne sais pas si c'est le bon terme) ///html est bien pratique dans ce cas.

Un exemple d'implémentation est l'insertion d'une image externe avec la possibilité de définir son dimensionnement, afin qu'elle ne déborde pas sur le blog, ce qui est tout moche. Mais le problème que j'ai rencontré ce soir, c'est que du coup ça ajoutait sur la photo des scrollbars horizontales et verticales, et ça aussi c'était tout moche. Alors voilà le code que j'ai utilisé, inspiré du plugin d'insertion de média externe noembed

///html
<div class="external-media" style="margin: 1em auto; text-align: center;">
<iframe width=" 480" height="270" frameborder="0" scrolling="no" src="url_image"></iframe>
</div>
///

L'astuce étant ici de définir la propriété "scrolling" à no. Voilà, quand on veut partager une image sur le net sans l'héberger soi même, et que ça rentre dans la mise en page de son blog ! :)

EDIT : je viens de regarder l'affichage sur mon smartphone Android, avec Chrome, le redimensionnement est respecté, mais cet imbécile affiche l'image dans sa résolution originale au lieu de la recadrer, du coup c'est moche aussi :-/

Dernière modification par Franck49 (2017-02-27 03:50:40)

Hors ligne

#2 2017-02-27 06:28:11

Mirovinben
M comme Mathusalem
Lieu : Dole (Jura)
Inscription : 2007-02-06
Site Web

Re : ///html <iframe> image externe

Une autre solution : styler l'image via CSS pour réduire son affichage à la taille souhaitée.

<img style="width:480px;" src="url_image" (...) />

Automatiquement le navigateur calculera la hauteur pour conserver les proportions.

Hors ligne

#3 2017-02-27 07:47:52

i_love_dc
Membre
Inscription : 2007-07-13

Re : ///html <iframe> image externe

Ou d'utiliser des media queries (principe du responsive/adaptatif) que l'on inscrit dans le style.css du theme , qui se chargera de redimensionner les images selon le type de résolution.

Smartphones (portrait and landscape)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.post-excerpt img,
.post-content img {
width:480px;
height:270px;
margin:1em auto;
} 
}

iPads (portrait and landscape)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.post-excerpt img,
.post-content img {
width:480px;
height:270px;
margin:1em auto;
} 
}

Desktops and laptops

@media only screen and (min-width : 1224px){
.post-excerpt img,
.post-content img {
width:480px;
height:270px;
margin:1em auto;
} 
}

évidement les valeurs, les classes sont à modifier selon les besoins et le type de résolution.


.

Dernière modification par i_love_dc (2017-02-27 07:51:33)

Hors ligne

#4 2017-02-27 10:48:08

Franck49
Membre
Inscription : 2017-02-14
Site Web

Re : ///html <iframe> image externe

Heu, ah oui, ça marche aussi, merci. Du coup je remballe mon iframe (c'est vexant un peu là ^^). Je préfère la première solution, qui permet d'adapter au moment de l'édition du billet. Ça vaudrait bien un petit plugin :)

Hors ligne

#5 2017-02-27 14:08:37

Arfy
Membre
Lieu : Obernai
Inscription : 2009-01-05
Site Web

Re : ///html <iframe> image externe

Tu peux aussi te baser sur des thèmes "responsive" comme par exemple
dcBootstrap
(que j'utilise et qui utilise les @media)

La liste est là: http://themes.dotaddict.org/galerie-dc2/tag/responsive


"On peut user de tout mais faut pas en abuser!"

Hors ligne

#6 2017-02-27 15:00:36

Franck
Footer de merde
Lieu : Paris
Inscription : 2004-11-09
Site Web

Re : ///html <iframe> image externe

Un simple :

.post-excerpt img, .post-content img {
  max-width: 100%;
  margin:1em auto;
}

devrait suffire dans tous les cas pour que ça ne déborde pas (et l'avantage est qu'on peut changer de thème sans avoir à reprendre tous les billets où se trouvent des images).


Dotclear addicted since 2004

Hors ligne

Vous n'êtes pas identifié(e).

Pied de page des forums

Sites map