css-aanpassing voor max image size

[exel]

Ik zie het nogal eens misgaan dat mensen een plaatje van 2560x1440 in een forum-draad posten, en daarmee de layout van die hele draad naar de 5 meter breed getrokken wordt. Een moderator moet dan ingrijpen en het plaatje verkleinen.

Na wat inline testen is mijn conclusie dat het volgende toevoegen aan de stylesheet van het forum dit probleem in zijn geheel zou kunnen voorkomen:

img{
    width:100%;
    max-width:1000px;
}

Misschien een idee om dat te doen?

 

[dreamer]

Of deze image-resizer er in? -> http://www.ncode.nl/vbulletinplugins/

 

[Dr van Lansberg]

Bericht door een moderator:

Dank heren. Ik gooi het in de groep.

 

[Dr van Lansberg]

Bericht door een moderator:

We hebben inmiddels een mogelijke oplossing gevonden voor een auto resize. Met dank aan Exel en Dreamer voor hun input en aan matt second voor de uitvoering ervan! . Let wel, we hebben zelf nog niet uitgebreid getest. De kans bestaat dus dat er wat bijwerkingen zijn. Mocht je zelf willen testen, dan kan dat uiteraard, heel graag zelfs. De mogelijke oplossing is namelijk geïmplementeerd. We zijn erg benieuwd naar de resultaten en je feedback. Vermeld dan even welke browser, browserversie en welk besturingssysteem je gebruikt.

 

[Acidfever]

Eerste potentiele bug gevonden.

Als ik "Post reply" klik bij sommige topics dan verplaatst het gehele invoerveld naar de rechterkant van de pagina. Nog even geen idee hoe dit precies te reproduceren is maar het is gedrag wat ik voorheen nog nooit heb gezien.
Browser: Firefox
Platform: OSX

EDIT: Heel vreemd, ik kan nog geen gemene deler vinden waarom dit zich soms voordoet.

 

[Dr van Lansberg]

Ik zie dit fenomeen ook bij het quoten van de betreffende post. In de quote staat een overzicht van alle losse replies in het draadje. In deze reply wordt het image niet re-scaled lijkt het. Dus misschien een kwestie van de code ook op die plekken inkopiëren?

Browser: IE 11
Platform: Win7

 

[torp]

Wat is er gebruikt, de plugin of de aanpassing van exel?

 

[Dr van Lansberg]

Zie het maar als een mengvorm van beide suggesties. In elk geval wordt de resize aan de client kant uitgevoerd.

 

[torp]

Hmm, je maakt me nieuwsgierig.

Even een testje met een min of meer willekeurige afbeelding...

Feedback
1. Kun je hem niet ietsje moderner instellen? Dit formaat is zooo 2007...
2. De plugin werkt idd niet in de preview mode.

 

[Dr van Lansberg]

Browser en platform?

 

[torp]

Oh sorry!
Chrome 38.0.2125.101 (helaas de maximale versie op mijn Mac Mini).

 

[Dr van Lansberg]

Thanks

 

[torp]

Overigens doet de browser er niet toe. Het komt gewoon omdat de plugin niet werkt niet in de preview.
Als daar geen optie voor is moet je de plugin gaan hacken en dat kost tijd en energie...

 

[Acidfever]

Wat is er gebruikt, de plugin of de aanpassing van exel?

Het idee van exel maar met andere code in de vorm van een plug-in.

 

[torp]

Het verschil: de css van exel geldt voor elke <img> tag binnen de html. De plugin wijzigt de html door code toe te voegen binnen de <img> tag van een post. Dit had met de css van exel ook wel bereikt kunnen worden door hem iets specifieker te schrijven.

Daarnaast maakt de plugin de afbeelding "klikbaar" voor de originele (grotere) afbeelding. Dat is netjes.

style="max-width: 600px; cursor: pointer;" onclick="window.open(this.src)"

In de preview wordt deze code niet toegevoegd. Wellicht omdat de pagina net anders is opgebouwd, zo te zien staat de post bijvoorbeeld niet binnen een <div> wat op de gewone pagina wel het geval is. Of omdat de plugin niet werkt in preview mode.

 

[torp]

Wat er ook fout gaat: bij bijlages (zie bijv. deze advertentie) wordt de code ook toegevoegd... Klik maar eens op zo'n afbeelding...

 

[Dr van Lansberg]

Hhmmm, wat ik zie in die advertentie is dat er een nieuwe pagina wordt geopend met dezelfde thumbnail. Op de bestaande pagina wordt echter op hetzelfde moment de afbeelding vergroot. Dus wanneer die tweede pagina wordt gesloten, zie je de oude pagina met de vergrote afbeelding.

Dat laatste gedrag is gewenst. Het openen van een nieuwe pagina lijkt me niet gewenst, of in elk geval onbedoeld.

Dank voor het melden hiervan!

 

[exel]

For what it's worth, dat lijkt nu ook goed te gaan.

 

[torp]

Hier niet.

 

[exel]

Da's vaag. Als ik in de source kijk, bijvoorbeeld op deze advertentiepagina dan zie ik nu netjes een <img class="thumbnail"> gewrapt in een <a href="attachment.php...."> met blank target. En geen overblijfselen van de size limiting.

De "voorbeeld van bericht"-pagina is wel hopeloos breed geworden ineens voor me.

Edit: dat laatste is omdat op deze pagina de afbeeldingen -niet- kleiner worden gemaakt, dus het voorbeeldplaatje van torp in deze thread trekt op die plek de layout weer breed.