Hoogtes uit afbeeldingen verwijderen of enkel met jQuery verbergen?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

- Ariën -
Beheerder

- Ariën -

15/02/2019 23:50:57
Quote Anchor link
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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<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?

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 -
 
PHP hulp

PHP hulp

19/05/2019 09:30:09
Honeypot
 
Ozzie PHP

Ozzie PHP

16/02/2019 00:35:40
Quote Anchor link
Waar komt die height vandaan dan? Staat style="width: 550px; height: 365px;" letterlijk zo in de database?
 
- Ariën -
Beheerder

- Ariën -

16/02/2019 00:41:54
Quote Anchor link
Ja, dat klopt. In duizenden records vol met HTML gegenereerde content ;-).
En uiteraard wil de px-waarde overal ook anders zijn.
Gewijzigd op 16/02/2019 00:44:43 door - Ariën -
 
Ozzie PHP

Ozzie PHP

16/02/2019 00:47:05
Quote Anchor link
Aiiiii ... en die px-waarde is echt volledig random? Of heb je bijv. 3 formaten?
 
- Ariën -
Beheerder

- Ariën -

16/02/2019 01:10:53
Quote Anchor link
De hoogte verschilt echt vaak, omdat elke foto wel andere maten heeft.
 
Ozzie PHP

Ozzie PHP

16/02/2019 01:21:48
Quote Anchor link
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.
Gewijzigd op 16/02/2019 01:22:02 door Ozzie PHP
 
Rob Doemaarwat

Rob Doemaarwat

16/02/2019 08:35:26
Quote Anchor link
Kun je het niet met een stukje CSS fixen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
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).
 
- Ariën -
Beheerder

- Ariën -

16/02/2019 09:04:11
Quote Anchor link
Dat ik daar niet op kwam...
Eigenlijk lijkt me dit simpeler dan een jQuery hack ;-)

Ik ga het vanavond eens proberen.
 
Adoptive Solution

Adoptive Solution

16/02/2019 11:33:25
Quote Anchor link
In MariaDB10 kan je de 'height:nnnpx;' zo verwijderen :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
UPDATE films SET omschrijving = REGEXP_REPLACE(omschrijving,'(height: *[[:digit:]]*px;* *)', '') ;
 
- Ariën -
Beheerder

- Ariën -

16/02/2019 11:51:35
Quote Anchor link
Ik ga dit eens testen. Maar dit is toch niet specifiek iets voor MariaDB alleen, neem ik aan? ;-)
Gewijzigd op 16/02/2019 11:52:49 door - Ariën -
 
Adoptive Solution

Adoptive Solution

16/02/2019 12:16:17
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.