Hoogtes uit afbeeldingen verwijderen of enkel met jQuery verbergen?
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
Code (php)
1
<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:
Code (php)
1
<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.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script type="text/javascript">
$(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('height');
});
});
</script>
$(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?
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.
Gewijzigd op 16/02/2019 00:44:15 door - Ariën -
En uiteraard wil de px-waarde overal ook anders zijn.
Gewijzigd op 16/02/2019 00:44:43 door - Ariën -
Gewijzigd op 16/02/2019 01:22:02 door Ozzie PHP
Code (php)
1
2
3
2
3
img[style]{
height: auto !important;
}
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).
Eigenlijk lijkt me dit simpeler dan een jQuery hack ;-)
Ik ga het vanavond eens proberen.
Code (php)
1
UPDATE films SET omschrijving = REGEXP_REPLACE(omschrijving,'(height: *[[:digit:]]*px;* *)', '') ;
Gewijzigd op 16/02/2019 11:52:49 door - Ariën -