[#15487][phpBB2] Bilder werden nicht automatisch verkleinert

URL-Adresse des Forums:https://lottes-bastelstube.forumieren.com
Rang/Funktion im Forum:Hauptadmin
Forenversion:phpBB2
Browser:Chrome
Persönliches CSS(Ja/Nein):Ja
Templateänderungen(Ja/Nein):teilweise Ja,

Bei meinen alten Forenbeiträgen klappt das auch alles super, wie hier z.B.



Aber seit Neusten werden (vor allem in neuen, teilweise aber auch in älteren Posts), die Bilder dennoch in Originalgröße angezeigt... hier z.B.



Ich kann mir einfach nicht erklären, warum das Forum einige Bilder automatisch verkleinert, andere aber wiederum nicht... Habt ihr vielleicht eine Lösung für mich?

Natürlich könnte ich die Bilder kleiner hochladen oder über diesen Code hier verkleinert anzeigen lassen

Code:

[img(580px,580px)]Bildlink[/img]

Allerdings geht dadurch ja die Option mit der Originalgröße verloren, weshalb ich auf diese Möglichkeiten gerne verzichten täte.

LG FlotteLotte

Hallo @FlotteLotte,

die allgemeine Option für diese Bildgrößenveränderung findest du unter Administrations-Bereich > Allgemeines > Nachrichten und E-Mails > Einstellungen > Beiträge > Änderung der Bildgröße.

Wenn du einmal einen Wert veränderst und ihn absendest, wird das nicht skalierte Bild immer noch ignoriert?

Beste Grüße
Bigtuber

Hallo Bigtuber,

vielen Dank für Deine schnelle Antwort.

Den Weg bin ich bereits gegangen und habe es versucht, aber da ändert sich leider nichts. Es wird weiterhin ignoriert!
Woran kann das liegen und was kann ich sonst noch tun?

Liebe Grüße FlotteLotte

Ich kann von diesem Problem nicht berichten und lege nie eine Größe bei Bildern fest. Weder via Servimg-Upload noch durch externe Bild-Einfügung.
Kann es sein, dass gerade diese Bilder, die eine benutzerdefinierte Größe, diese Probleme machen?

Ist es möglich, dass du mir das Thema, welches diese Probleme aufweist, einmal verlinkst und mir dort Zugang gewährst?

Beste Grüße
Bigtuber

Guten Morgen Bigtuber,

ich danke Dir für Deine Antwort .
Das Thema findest Du hier:
https://lottes-bastelstube.forumieren.com/t494-grafikwettbewerbe-im-wondertalk, da es sich um einen nicht öffentlichen Bereich handelt, schicke ich Dir die Zugangsdaten per PN.

Liebe Grüße FlotteLotte

Ich konnte erkennen, dass sich beim Runterscrollen des Themas die Breite des Forums erhöht, da man den Bildern, die ignoriert werden, näher kommt und somit geladen werden (loading="lazy"). Die Bilder haben tatsächlich unterschiedliche Klassen. Was ich jetzt noch bräuchte, wäre die Möglichkeit, den Beitrag zu bearbeiten / einzusehen oder aber die Zitat-Funktion.

Ansonsten würde ich dir hier schon mal einen Lösungsvorschlag bereitstellen, der aber auch "nur" eine externe Lösung ist, jedoch aber die native Option der Bildgrößenveränderung von Forumieren verbessern soll. In der Option im Admin-Bereich löscht du bitte beide Werte und bestätigst.

Anschließend fügst du ein Javascript hinzu: Administrations-Bereich > Module > HTML und JAVASCRIPT > Javascript Codes Verwaltung > Javascript Codes.
Platzierung: Auf allen Seiten

Code:

(function() {
  window.fa_img_resizer = {
    max_width : 580, // maximum image width (400px)
    max_height : 330, // maximum image height (250px)
 
    selector : '.postbody > div:not(.user):not(.postprofile) img, .mod_news img, .message-text img, .postbody img', // where images should be resized
 
    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : true, // Download image link
      lightbox : true // lightbox effect
    },
 
    // texts
    lang : {
      full_size : '<i class="fa fa-external-link"></i> Volle Größe anzeigen',
        enlarge : '<i class="fa fa-search-plus"></i> Bild vergrößern',
        reduce : '<i class="fa fa-search-minus"></i> Bild verkleinern',
      download : '<i class="fa fa-download"></i> Bild herunterladen',
      tooltip : 'Klicken für volles Bild'
    },
 
    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';
 
          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;
 
            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }
 
          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width - 8) + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },
 
    // toggle between enlarged and reduced image sizes
    toggle : function(that) {
      var img = that.parentNode.nextSibling;
 
      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }
 
      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }
 
      that.parentNode.style.width = img.width - 8 + 'px';
    },
 
    // lightbox effect
    lightbox : function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];
 
      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;
 
      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';
 
      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },
 
    // kill the lightbox
    kill_lightbox : function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');
 
      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };
 
  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#8f94bb; border:1px solid #797ea7; }'+
    '.fa_img_resizer a { color:#45487b; margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );
 
  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);
 
  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());

Code von Ange Tuteur.

Beste Grüße
Bigtuber

Hallo Bigtuber,

vielen lieben Dank für Deine Hilfe.
Das Javascript habe ich ausprobiert und es funktioniert auf jeden Fall mal.
Allerdings wundere ich mich, dass die Option des "Bild in Originalgröße anzeigen" nur bei den Bildern angezeigt wird, die zuvor auch durch das Forum verkleinert worden waren.
Die Bilder, die vorher die Probleme gemacht haben, haben diese Option jetzt nicht.
Ich habe Dir auf die Zugangsdaten, die ich Dir per PN zukommen ließ, nun mal die notwendigen Modrechte für den Bereich gegeben.

Liebe Grüße FlotteLotte

Nun weiß ich auch nicht mehr weiter und möchte die Technik drauf schauen lassen.
Kannst du das Javascript nochmal rausnehmen?

Beste Grüße
Bigtuber

Guten Morgen,

oje, dass klingt nun aber schwieriger, da bin ich gespannt.
Ich habe das Script dann erstmal wieder gelöscht.

Ganz liebe Grüße
FlotteLotte

Bigtuber schrieb:Nun weiß ich auch nicht mehr weiter und möchte die Technik drauf schauen lassen.
Kannst du das Javascript nochmal rausnehmen?

Beste Grüße
Bigtuber

Ist bei mir im Forum übrigens auch das die Bilder deutlich größer dargestellt werden als früher.
Ich habe definitiv selbst keine Veränderungen in den Einstellungen durchgeführt.

Ich habe die Technik benachrichtigt, wir werden aber erst am Montag eine Nachricht erhalten.

Beste Grüße
Bigtuber

Da bin ich dann mal gespannt, was da kommt. Momentan ist das echt schrecklich so wie es ist.
Vielen lieben Dank für Deine Mühe!

Ganz liebe Grüße und ein schönes Wochenende
FlotteLotte

Die Technik schaut es sich gerade an. Kannst du bitte nochmal einen Wert für die automatische Bildgrößenveränderung eingeben?

Beste Grüße
Bigtuber

Hallo Bigtuber,

Ich habe es leider nicht eher wieder hierher geschafft aber nun gleich dort einen Wert eingegeben .

Liebe Grüße FlotteLotte

Scheint wieder normal zu sein, oder?

Beste Grüße
Bigtuber

Hallo Bigtuber,

es scheint wieder zu klappen. Im Moment schaut es mal so aus.
Ich danke Dir nochmals für Deine Hilfe.

Ganz viele liebe Grüße
FlotteLotte