Bilder automatisch verkleinern

[brMouse]

Moin,

ich habe, wie gesagt, nur das Willkommens-Modul genommen, img-Datei rein und Text drunter.
Mit CSS hab ich nichts gemacht, wüßte auch ehrlich gesagt nicht wie.

Wenn ich dich nun richtig versteh wäre es besser statt dieses Willkommens-Modul eher einen Eigenen Block zu wählen?
Und wie meinst du das mit CSS?

Liebe Grüße
brMouse

[Talk19zehn]

Hi, und ja, der Auffassung bin ich, da du im eigenen Block HTML basierend auf CSS nutzen kannst. Diese EXT = *)REIMG sollte dann nicht greifen, denke ich, da du keinen BBCode im Sinne eines Dateinhangs nutzt. Was dann wiederum bedeutet, dass du die EXT für dein Vorhaben nutzen kannst (theoretisch). Nur mal ins Blaue gedacht ....

Beispiel: portal.css (deiner Styles(!)) ergänzen

Code: Alles auswählen

#myportalimage img {
	max-width: 100%;
	height: auto;
}

#myportalimage {
	width: 100%;
	text-align: center;
}

Eigener Block: Eingabe HTML(!) BBCode --> nicht nutzen!!
BBCode für den eigenen Block aktivieren = NEIN --> BBCode kann dann in diesem Block benutzt werden. Ansonsten wird HTML direkt geparst.

Beispiel: Inhalt (HTML-Ausgabe)

Code: Alles auswählen

<p style="font-size:12px">
<span style="font-weight: bold">Willkommen in der Welt der Maltechniken</span>
</p>

<p style="font-size:12px">
<b>Hinweis:</b> Lorem Ipsum BlaBlubb.

<span style="font-weight: bold">Titel des Bildes:</span> Dein Titel<br />
<span style="font-weight: bold">Künstler:</span> Ein Name<br />
</p>

<div id="myportalimage"><img src="./../styles/prosilver/theme/images/deinbild.jpg" alt="" /> &nbsp; </div>

<p style="text-align:center; font-size:12px">
<span style="font-weight: bold">Text Text Text</span>
</p>

Grüße

Edit_1:
Achtung: Beachte bitte, dass die Grafik im o.g. Verzeichnis liegt. Probiere es bitte einfach aus und hübsche die CSS-Anweisungen ggf. noch auf oder verbessere sie. Es sollte funktionieren. In meinem Falle geht das so, gerade gestestet. Die o.g. *)Extension verkleinert die Grafik in meinem Falle im Portal nicht.

Edit_2:
Du kannst bspw. auch direkt die portal_body.html nutzen, um die Seite ggf. eine wenig anders zu gestalten. Nur, du musst daran denken, dass du u.U. die Portal-CSS und die responsive Portal-CSS anpassen musst, wenn du keine Standardklassen nutzt. CSS-, und HTML-Kenntnisse sind von großem Vorteil. Zumal im Portal vieles mit JS gesteuert wird, macht´s die Anpasungen nicht leichter.

Gruß

[brMouse]

Oh dankeschön, da hast du dir wirklich sehr viel Mühe gemacht.

Werde es natürlich auch bei mir ausprobieren und dir dann Bescheid geben.

Danke nochmal.

[brMouse]

Hallo,

habe es nun getestet und es geht super. Das Bild im Portal bleibt in Originalgröße.

Vielen Dank nochmal. Das einzige was ein wenig stört ist, das jetzt eben dort Eigener Block steht.

Viele Grüße
brMouse

[Kirk]

Im Willkommens-Modul funktioniert nur BBCode, du kannst z.b. den Namen deines eigenen Modules im ACP auch ändern, damit fällt es nicht auf was für ein Modul das ist.

[brMouse]

Danke Kirk, habs gefunden.

[Talk19zehn]

Hi, du kannst m.E. ggf. auch einen Link zur Grafik nutzen, beispielsweise:

Code: Alles auswählen

<div id="myportalimage"><img src="http://www.example.com/phpBB3/styles/prosilver/theme/images/deintollesbild.jpg" alt="" /> &nbsp; </div>

Code: Alles auswählen

<div id="myportalimage"><img src="http://www.example.com/phpBB3/styles/prosilver/theme/images/deintollesbild.jpg" alt="" /> &nbsp; Ein wenig Text &nbsp; </div>

Probiere es einfach aus. Prüfe bitte in jeweiligen Browsern, denn die Grafik sollte sich mit dem Konstrukt (laut dem Vorschlag) auch responsive anpassen.

habe es nun getestet und es geht super.

freut mich. Es wäre ja fatal, wenn wir es nicht hinbekommen hätten. Das B3Portal bietet Lösungen ..., da steckt "die Tücke" (positiv gemeint) manchmal im Detail. Viel Freude damit.

MA ist ein Könner seines Zeichens.

LG

[Joyce&Luna]

Hallo

Ich habe das obige ausprobiert, die Bilder werden mir einfach zu groß im Portal angezeigt.
Zum anderen hätte ich es gerne auch anders gestaltet.

In der phpBB 3.0 Version habe ich dieses benutzt und es klappte ganz gut.

Code: Alles auswählen

<div align="center"><table style="border: 8px solid #333333; width: 100%;">
<th style="text-align: center; color: #8b0000; font-size: 18px;"> Unsere Gewinner </th>
<tr><td style="text-align: center; background-color: #egegeg;"><br>
<a href="Bild einfügen egal wie groß" target="_blank">
<img src="das gleiche Bild noch mal" width="300px"></a>
<a href="Bild einfügen egal wie groß" target="_blank">
<img src="das gleiche Bild noch mal" width="240px"><br></a>
<br>Die Sieger im Wettbewerb <br><br> 1. Sieger xxxxxxx<br> 2. Sieger xxxxxxx<br><br></td></tr>
<th style="text-align: center; color: #b80000;font-size: 16px;">Herzlichen Glückwunsch</th> </table> </div><br>

Das schöne daran, man konnte die Bilder optisch von der Größe anpassen und beim drauf klicken, das Bild in voller Größe anschauen.
Der Code funktioniert auch jetzt noch, durch die Prozent Angabe oben, ist es auch responsiv. Vorher hatte ich den Rahmen auf 800px gehabt und dadurch wurde das ganze auch nicht responsiv angezeigt.
Für meinen Geschmack habe ich 60% eingestellt.

Vielleicht hat dafür noch ein anderer Verwendung.

Anke

Edit: es ist nicht responsiv, sondern die Bilder rutschen untereinander.
Erst wenn <img src="das gleiche Bild noch mal" width="40%"></a>auf % anstatt px gesetzt wird, wird es responsiv

[Talk19zehn]

Die Extension, s. viewtopic.php?p=1338709#p1338709
tut m.E. genau das, was du möchtest. Hier ging es jedoch darum, eine Grafik von ca. 640px x 480px bzw. 480px x 320px von der Funktionalität der Extension "zu befreien". Dem Benutzer ein einfaches Mittel aufzuzeigen, wie es gehen könnte, so dass er die genannte EXT dennoch verwenden kann.
Wenn du große Bilder verwendest und 100% ansetzt, kann das in deinem Falle dann in der Logik den Rahmen sprengen.
Dateianhänge: phpBB-seitig sind Vorschaubilder auch konfigurierbar. Wie sich das Board3Portal dann verhält, entzieht sich meiner Kenntnis.
Mit CSS3 gibt es inzwischen ansprechende moderne Möglichkeiten: Slider und Co (mit und ohne JS).

Grüße

Edit: Wie ich nun sehe nutzt du keine phpBB-seitigen Dateianhänge, - insofern kann ich dir in dem Falle nicht weiterhelfen. Die Tabelle, die ich z.Z. auf deiner Seite finde, ist nicht responsive und m.E. leider auch nicht valide. Es wird ferner ein Bilderdienst (Hoster) genutzt. Evtl. findest du dort im Support noch mehr Hinweise auf CSS3, HTML5 und ein mobiles Layout, sofern die Tabelle ebenso daher stammt (?). Ich nutze derartige Dienste nicht (mehr).

LG

[Joyce&Luna]

Hallo Takl19Zehn

Ja das hatte ich erst so drin, aber dieses habe ich geändert.
Ich habe meinen Beitrag auch oben editiert und es was abgeändert. Nun ist es responisiv, die Bilder verkleinern sich im Handy.
Hatte da noch einen Fehler drin gehabt.
Es ist gar nicht so einfach das mit dem responsiven Anpassungen

Aber die Version von dir werde ich nochmals ausprobieren, musste nur schnellst möglichst bei mir handeln. Da konnte ich es nicht so testen.

Anke