media query in PHP
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.call-to-action
{
background-image: url(/images/widget_photos/mobile/<?= $call_to_action['photo']; ?>)
}
@media only screen and (min-width: 992px)
{
.call-to-action
{
background-image: url(/images/widget_photos/desktop/<?= $call_to_action['photo']; ?>)
}
}
{
background-image: url(/images/widget_photos/mobile/<?= $call_to_action['photo']; ?>)
}
@media only screen and (min-width: 992px)
{
.call-to-action
{
background-image: url(/images/widget_photos/desktop/<?= $call_to_action['photo']; ?>)
}
}
Hoe doe iets gelijks voor een image die daadwerkelijk in de pagina staat:
Code (php)
1
<img src="/images/photos/thumbnails/<?= $gallery_thumbnail['photo']; ?>" class="img-fluid">
Je kan je img-element toch ook prima in CSS aanroepen? Desnoods hang je er een id of class aan.
- 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.
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?
Toevoeging op 20/05/2018 22:35:03:
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
Code (php)
1
2
3
2
3
<img src="/images/photos/thumbnails/<?php
print($big_screen ? $big_thumb : $normal_thumb);
?>" class="img-fluid">
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.
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.
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 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).
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:
Code (php)
1
2
3
2
3
<img src="/images/photos/thumbnails/<?php
print($big_screen ? $big_thumb : $normal_thumb);
?>" class="img-fluid">
print($big_screen ? $big_thumb : $normal_thumb);
?>" class="img-fluid">
Zou je dat wat uitgebreider kunnen uitleggen
Toevoeging op 21/05/2018 01:03:17:
Dit is wel een aardig artikel waar ze het hebben over srcset. Dat is wellicht een oplossing:
https://css-tricks.com/responsive-images-css/
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 ;-).....
In mijn geval ging het om productfoto's. Die ga je sowieso al niet allemaal in je CSS zetten, en ik had ook geen zin om alle mogelijke formaten uit te gaan schrijven.
De artikelen+foto's worden nu via ajax geladen. De screen.width geef ik dan mee in die request, en daarmee genereer dus in PHP een foto URL met de breedte van het scherm er al in. De "auto-thumb-resizer" pakt dan uiteindelijk wel de grootte die daar het best bij past.