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

Podczas gdy używam Umbraco 7.2.1, chcę, aby obraz, który wstawiam, był responsywny (img-responsive) z bootstrapu.

Jak mogę to zrobić?

Odpowiedzi:

3 dla odpowiedzi № 1

Nie jestem pewien, w jaki sposób dodajesz obrazy do swoich stron, ale miałem ten problem, gdy zacząłem używać nowego układu siatki w Umbraco 7.2.

Jeśli więc korzystasz również z układu siatki, musisz otworzyć widok "Partial ViewsGridEditorsMedia.cshtml" i dodać tam klasę.

...

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

...

To doda klasę do WSZYSTKO obrazy dodane do układu siatki za pomocą standardowego edytora siatki "Obraz".

---

0 dla odpowiedzi nr 2

Możesz dodać własną niestandardową klasę do zdjęć w

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

Poszukaj, gdzie jest napisane tinymce.extend (). Powinno to wyglądać mniej więcej tak:

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"
});

Zrobiłem to tylko w Umbraco 6, więc mam nadzieję, że odpowiedź pozostaje taka sama w Umbraco 7.

---

0 dla odpowiedzi № 3

Nie zalecam modyfikowania czegokolwiek w / umbraco / lub / umbraco_client / folderach, ponieważ wszelkie przyszłe aktualizacje spowodują cofnięcie zmian, zmuszając ich do ponownego zastosowania.

Zakładając, że chcesz dodać klasę responsywną do obrazów wprowadzonych w edytorze tekstu formatowanego, polecam utworzyć nową regułę css dla img elementy, które dodają odpowiednie właściwości .img-responsive.

Na przykład: Dodajesz nazwany typ danych tekstowych bodyText do typu dokumentu w Umbraco. W szablonie tego dokumentu zawiń wywołanie renderujące w elemencie z klasą .bodyText.

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

W swoim arkuszu stylów utwórz nową regułę .bodyText img dziedziczy właściwości z .img-responsive klasa.

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

Uwaga !important na height własność. Zostało dodane w celu zapewnienia dodania stylu inline height są nadpisywane. Gdy edytor zmieni wymiary obrazu w edytorze tekstu formatowanego, tinyMCE doda nowe wymiary do obrazu w wierszu style atrybut, zabijając w ten sposób responsywną wysokość.

---

0 dla odpowiedzi nr 4

Zrobiłem to bardzo łatwo w Umbraco 7.5.5, zmień /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);

---