media query in PHP

Dit staat los van PHP.
Je kan je img-element toch ook prima in CSS aanroepen? Desnoods hang je er een id of class aan.

Per media query zou je vaste breedtes (of zelfs percentages) kunnen gebruiken, de afbeelding wordt dan automatisch geschaald (in de hoogte) voor zover ik weet.

- Ariën - op 20/05/2018 14:04:20

Dit staat los van PHP.
Je kan je img-element toch ook prima in CSS aanroepen? Desnoods hang je er een id of class aan.

Kun je ook met een voorbeeld uitleggen wat je bedoeld?


[size=xsmall]Toevoeging op 20/05/2018 22:35:03:[/size]

Thomas van den Heuvel op 20/05/2018 16:50:27

Per media query zou je vaste breedtes (of zelfs percentages) kunnen gebruiken, de afbeelding wordt dan automatisch geschaald (in de hoogte) voor zover ik weet.

Maar dan zit je meteen aan een vaste waarde vast. Ik heb voor een bepaalde foto's twee folders (mobiel en desktop). Waar ik naar op zoek ben is dat als de min device width b.v. 960px is dat de foto niet langer uit de folder mobiel maar uit de folder desktop komt. Zoals je in mijn voorbeeld zag gebruik ik bij achtergrond foto's een combinatie van css en PHP om dat te bepalen. met percentages blijft het toch dezelfde foto

Ik vermoed/gok dat je zoiets wilt:

<img src="/images/photos/thumbnails/<?php 
print($big_screen ? $big_thumb : $normal_thumb);
?>" class="img-fluid">

In PHP weet je normaal niet hoe breed het scherm is. Wat je in een eerste/eerdere request wel zou kunnen doen is via javascript de screen.width in een hidden veld zetten, en die dan naar de server (mee) POST-en. Vervolgens weet je server-side wel hoe breed het scherm is, en kun je je afbeeldingen daar op aanpassen.

Maar dat werkt dus niet voor de 1e request. Uiteraard kun je in de 1e request wel een redirect inbouwen zodat wat voor de gebruiker nog steeds de 1e request is, in de praktijk al de 2e is.

Ah, nu snap ik wat er bedoeld wordt. De in PHP variabele formaat moet dus aan de hand van de breedtte van de browser dus bepaald worden.

Voor een nieuw design zat ik hier toevallig ook naar te kijken.
Maar zelf zou ik de formaten gewoon gelijk houden. Ik neem aan dat het niet om foto's van vele megabytes gaat, en iets rond de 100 kb. maximaal.

@Ariën: Ik heb bovenstaande toegepast op een website waar de foto's "zo groot mogelijk" in beeld komen. Voor een desktop is het dan prima om er een paar procentjes af te moeten schalen, maar op een mobiel werd het toch wel heel erg gortig (PageSpeed begon ook te klagen - en alles voor de ranking natuurlijk ;-) ).

Daarbij wel opmerken dat ik thubms on-the-fly schaal, dus dan is het bijna geen extra moeite.
- /picture/bla.jpg = origineel
- /picture/200/bla.jpg = thumb
- /picture/500/bla.jpg = medium
- enz (de gegenereerde thumb wordt gecached, en het aantal formaten is beperkt /473/ zal dus ook gewoon de /500/ retourneren).

Hm, kan je niet de images in alle formaten outputten, en met media-quotes de overbodige op display:none zetten? Dan worden ze ook niet geladen, lijkt me.

Rob Doemaarwat op 20/05/2018 23:10:20

@Ariën: Ik heb bovenstaande toegepast op een website waar de foto's "zo groot mogelijk" in beeld komen. Voor een desktop is het dan prima om er een paar procentjes af te moeten schalen, maar op een mobiel werd het toch wel heel erg gortig (PageSpeed begon ook te klagen - en alles voor de ranking natuurlijk ;-) ).

Daarbij wel opmerken dat ik thubms on-the-fly schaal, dus dan is het bijna geen extra moeite.
- /picture/bla.jpg = origineel
- /picture/200/bla.jpg = thumb
- /picture/500/bla.jpg = medium
- enz (de gegenereerde thumb wordt gecached, en het aantal formaten is beperkt /473/ zal dus ook gewoon de /500/ retourneren).

@Rob Doemaarwat. Dat is precies waar ik mee zit. Ik werk momenteel aan een website die een full screen masterhead heeft op alle pagina's (1920 x 1080px) dat kan ik onmogelijk gebruiken voor mobiele apparaten:

Ik snap alleen niet zo goed hoe ik dit moet zien:

<img src="/images/photos/thumbnails/<?php 
print($big_screen ? $big_thumb : $normal_thumb);
?>" class="img-fluid">

Zou je dat wat uitgebreider kunnen uitleggen

[size=xsmall]Toevoeging op 21/05/2018 01:03:17:[/size]

Dit is wel een aardig artikel waar ze het hebben over srcset. Dat is wellicht een oplossing:

https://css-tricks.com/responsive-images-css/

Volgens mij bedoelt Rob met dat stukje PHP-code een pseudocode, en puur bedoeld om het gedrag te tonen die er moet plaats vinden. Het spreekt voor sich dat dit PHP dit niet kan bepalen, maar het gaat hier om het idee.
Wat hij heeft uitgetypt is de 'ternary operator': Als 'big screen' (groot scherm) waar is, (vraagteken) toon dan de grote thumbs. (dubbelepunt) En anders toon de normale thumbs.

Hij had het net zo goed ook in Python, Java of wat dan ook kunnen uittypen, maar we zitten niet voor niets hier op PHPhulp ;-).....

Is dit niet precies waar media queries voor bedoeld zijn? Hiermee kun je voor bepaalde intervallen van schermresoluties CSS-klasses definiëren...