In mijn website heb ik via de CKeditor jarenlang foto's in duizenden records vol met HTML-inhoud geplaatst.
Hierdoor is het probleem ontstaan dat er een vaste hoogte en breedtte gebruikt werd. Inmiddels heb ik mij dit aangeleerd om de hoogte eruit weg te backspacen, maar het verleden blijft mij nog achtervolgen :-P


<img alt="Yaddah Foo Bar!" src="/uploads/image/bladieblah.jpg" style="width: 550px; height: 365px;">


Nu gebruik ik momenteel de Bootstrap V3, en die lijkt afbeeldingen met een vaste breedte kleiner te maken bij het resizen van de view-port tot op smartphone formaat. Echter bij gebruik van een height property in de style wordt de foto op dit moment elkaar gedrukt, wat er niet uitziet.

Zo hoort het uiteindelijk te zijn:
<img alt="Yaddah Bar Foo!" src="/uploads/image/tralalala.jpg" style="width: 550px;">


Nu zit ik dus met het feit hoe ik dit kan rechttrekken in een tabel met een hele hoop records in mijn database-table. Nu kwam ik op een idee met jQuery uit, wat in de foto's de height kan verwijderen uit de DOM-opbouw, maar is dit nou een goede oplossing? Je past immers enkel de client-view laag aan.


<script type="text/javascript">
$(document).ready(function($){
    $('img').each(function(){ 
        $(this).removeAttr('height');
    });
 
});
</script>


Of is er een andere praktische oplossing om uit een hele database bij de images de height uit de style te slopen? De DOMdocument in PHP lijkt geen ondersteuning te bieden om properties in style-attributen aan te passen.
Wat zouden jullie doen?

[sub]Thomas had het in een eerder topic al over het idee om de media op een andere manier te koppelen, en dat gaat vanaf heden ook gebeuren bij nieuwe artikelen via een interface die de foto's op de juiste plek toont. Echter met terugwerkende kracht wordt even lastig, en is een ander punt waar ik nog naar moet kijken.[/sub]
Waar komt die height vandaan dan? Staat style="width: 550px; height: 365px;" letterlijk zo in de database?
Ja, dat klopt. In duizenden records vol met HTML gegenereerde content ;-).
En uiteraard wil de px-waarde overal ook anders zijn.
Aiiiii ... en die px-waarde is echt volledig random? Of heb je bijv. 3 formaten?
De hoogte verschilt echt vaak, omdat elke foto wel andere maten heeft.
Oké, dan wordt het lastig om het er even snel uit te filteren. Dan zou je eigenlijk ieder veld moeten doorlopen in een foreach loop, met een regex dat stukje replacen met een lege string, en vervolgens het veld weer opslaan. Zoiets denk ik.
Kun je het niet met een stukje CSS fixen:

img[style]{
   height: auto !important;
}

Dit overschrijft de height van elke image met een inline style tag (in de hoop dat je geen dingen stuk maakt die wel zo bedoeld zijn - of anders de selector specifieker maken).
Dat ik daar niet op kwam...
Eigenlijk lijkt me dit simpeler dan een jQuery hack ;-)

Ik ga het vanavond eens proberen.
In MariaDB10 kan je de 'height:nnnpx;' zo verwijderen :

UPDATE films SET omschrijving = REGEXP_REPLACE(omschrijving,'(height: *[[:digit:]]*px;* *)', '') ;
Ik ga dit eens testen. Maar dit is toch niet specifiek iets voor MariaDB alleen, neem ik aan? ;-)

Reageren