Responsive Image, Bootstrap 3 et Umbraco 7.2.1 - umbraco, umbraco7

Bien que j'utilise Umbraco 7.2.1, je souhaite que l’image que j’insère soit sensible au démarrage (img-responsive).

Comment puis je faire ça?

Réponses:

3 pour la réponse № 1

Je ne sais pas trop comment vous ajoutez les images à vos pages, mais j’avais ce problème lorsque j’ai commencé à utiliser la nouvelle présentation de grille dans Umbraco 7.2.

Donc, si vous utilisez également la disposition de la grille, vous devez ouvrir la vue "Vues partiellesGridEditorsMedia.cshtml" et ajouter la classe à cet endroit.

...

<img src="/images/@url" class="img-responsive" alt="@Model.value.caption">

...

Cela va ajouter la classe à TOUT les images ajoutées à la présentation de la grille avec l'éditeur de grille "Image" standard.

---

0 pour la réponse № 2

Vous pouvez ajouter votre propre classe personnalisée aux images dans

~/umbraco_client/tinymce3/plugins/umbracoimg/img/image.js

Cherchez où il est dit tinymce.extend (). Cela devrait ressembler à quelque chose comme ça:

tinymce.extend(args, {
src: nl.src.value,
width: nl.width.value,
height: nl.height.value,
alt: nl.alt.value,
title: nl.alt.value,
rel: nl.orgWidth.value + "," + nl.orgHeight.value,
class: "img-responsive"
});

Je n’ai fait cela que dans Umbraco 6, alors la réponse est toujours la même dans Umbraco 7.

---

0 pour la réponse № 3

Je ne conseille pas de modifier quoi que ce soit dans les dossiers / umbraco / ou / umbraco_client / car toute mise à jour future annulera vos modifications, vous obligeant à les réappliquer.

En supposant que vous vouliez ajouter une classe sensible aux images entrées dans l'éditeur de texte enrichi, je vous recommande de créer une nouvelle règle CSS pour img éléments qui ajoute les propriétés pertinentes de .img-responsive.

Par exemple: Vous ajoutez un type de données RTF appelé bodyText à un type de document dans Umbraco. Dans votre modèle pour ce document, envelopper l'appel de rendu dans un élément avec la classe .bodyText.

<div class="bodyText">
@Umbraco.Field("bodyText")
</div>

Dans votre feuille de style, créez une nouvelle règle pour .bodyText img qui hérite des propriétés du .img-responsive classe.

.bodyText img {
max-width: 100%;
height: auto !important;
}

Remarque !important sur le height propriété. Ceci est ajouté pour assurer que le style en ligne ajouté pour height sont remplacés. Lorsqu'un éditeur modifie les dimensions d’une image dans l’éditeur de texte enrichi, tinyMCE ajoute les nouvelles dimensions à l’image "en ligne". style attribut, tuant ainsi la hauteur sensible.

---

0 pour la réponse № 4

Je l'ai fait très facilement dans Umbraco 7.5.5, modifiez / Umbraco/Js/umbraco.services.js:

$timeout(function () {

var imgElm = editor.dom.get("__mcenew");
var size = editor.dom.getSize(imgElm);

if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) {
var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);

// images must be responsive: commented 3 lines of code, added addClass with img-responsive,
// var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
// editor.dom.setAttrib(imgElm, "style", s);
editor.dom.addClass(imgElm, "img-responsive");
editor.dom.setAttrib(imgElm, "id", null);

if (img.url) {
//var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height;
var src = img.url;
editor.dom.setAttrib(imgElm, "data-mce-src", src);
}
}

}, 500);

---