Afbeeldingen en tekst -> overlay

[Satom]

Hallo Tweakers,

Ten eerste weet ik niet zeker of ik in het goede sub-forum zit te posten, maar dat hoor ik snel genoeg

Vooraf:
Voor mijn website maak ik live verslagen en d.m.v. een handige afbeelding, twee emblemen en een stukje tekst met jQuery heb ik dit weten om te toveren in een live-widget! (afbeelding)

Probleem:
Het is op het moment een perfect stukje werkende code waar eigenlijk niet te veel mis mee kan zijn. Totdat iemand zijn/haar browser resized, de gehele website resized dan mee en dat is ook goed, maar voor het betreffende stukje code, gaat het dan finaal mis. Aangezien ik het geheel m.b.v. coördinaten en <div>-tags heb in elkaar gemaakt en de afbeelding zelf dus wel mee resized maar de stukken tekst en emblemen behouden hun positie en ik denk dat je al snel door hoe het eruit gaat zien.

Mogelijke oplossingen:
-Gebruik maken van jQuery met een onresize-event, zodat elke browser-grote-wijziging gezien word en daar iets mee gedaan kan worden. Maar alles moet dan ook mee-ge-resized worden, embleem en tekst ed.

-Met behulp van PHP 1 afbeelding maken (en opslaan). Dit is mij al gelukt, alleen zit ik met de vraag, hoe geef ik aan dat de afbeelding vernieuwd moet worden? Er is bijvoorbeeld gescoord, dan moet er een nieuwe afbeelding gemaakt worden. De manier die ik geprobeerd heb, gebruikte ik de bestandsnaam (explode om gegevens uit bestandsnaam te krijgen) als referentie punt om te kijken of er een nieuwe afbeelding gemaakt moest worden (in combinatie met jQuery). Alleen gaat dit niet goed, door het caching systeem.. Tevens leek deze methode wel het meest "serverload"-vriendelijke(?) Of ik moet zeggen, niet de afbeelding opslaan, maar gewoon "opvragen" door een header("content/png"); geval te gebruiken..

- Misschien nog andere alternatieven? Ik weet niet precies hoe ik op dit onderwerp moet zoeken en heb ook geen ideeën meer..

[RobIII]

Ik zal 't wel missen, maar wat is er mis met:
http://site.com/foo.php?tl=Espanyol&tb=Barcelona&sl=0&sr=2&w=618&h=161&s=ended


Waarbij tl = team-left, tr = team-right, sl = score-left, sr = score-right, w = width, h = height. s = status ("ended" voor "De wedstrijd is afgelopen" etc. etc.)... of verzin zelf iets... Voorkomt meteen allerlei caching issues etc. (en sterker nog: je kunt die afbeeldingen een far-future expiration date meegeven). Die afbeelding sla je op als md5(<parameters>).png o.i.d. et voila, je kunt voordat je heel die image gaat genereren eerst controleren of je die image niet al toevallig hebt gegenereerd.

Los daarvan: moet 't echt een afbeelding zijn? Want met wat html/css en desnoods een snufje JS maak je dit natuurlijk veel makkelijker schaalbaar(der) zonder dat je bij elke resize de server moet gaan lastigvallen.

[ Voor 37% gewijzigd door RobIII op 14-08-2013 19:31 ]

[Satom]

U bedoelt, de aangegeven url structuur gebruiken om een afbeelding te generen. Dat is zeker een optie die ik deels klaar heb liggen, alleen vraag ik mij af of dit geen "zware" actie is voor de server?

Tevens als ik het zal opslaan, als u mij een beetje op weg wilt/kunt helpen, gebruik ik JS/jQuery om te verversen, hoe ga ik dan controleren? Want als ik simpelweg (zoals ik in gedachte had) "wid-500_2_0_45.png" gebruik voor de <img>-tag dan gaat het natuurlijk mis als ik zeg, delete de oude, maak een nieuwe (met respectievelijk een nieuwe bestandsnaam) terwijl de oude ge-cachet is.. alhoewel, dit typend, bedenk ik mij net, wat als ik uw url structuur gebruik om afbeelding te weergeven en in dat .php script kijk of afbeelding toevallig niet al aanwezig is, voordat we uberhaupt een nieuwe genereren (Of zal ik dan weer komen te zitten met de url die ge-cachet word van de <img>-tag

Nee, het hoeft niet een afbeelding te zijn, maar gezien mijn CSS kwaliteiten bleef er voor mijzelf weinig keus over

[RobIII]

Satom schreef op woensdag 14 augustus 2013 @ 20:02:
U bedoelt, de aangegeven url structuur gebruiken om een afbeelding te generen. Dat is zeker een optie die ik deels klaar heb liggen, alleen vraag ik mij af of dit geen "zware" actie is voor de server?

Die URL "interpreteren" valt zwaar in 't niet bij 't genereren van die afbeelding. Druppel op een gloeiende plaat.

Satom schreef op woensdag 14 augustus 2013 @ 20:02:...en in dat .php script kijk of afbeelding toevallig niet al aanwezig is

Ongeacht "mijn" URL structuur of "jouw" idee of bijvoorbeeld iets als
http://site.com/image.php/Espanyol/Barcelona/0-2/618x161/ended of wat dan ook moet je sowieso gewoon kijken of die afbeelding al aanwezig is. Zolang de URL uniek is kun je 'm een far-future expiry date meegeven en komt caching e.d. vanzelf goed zonder (al te veel) moeite. Hoe je de URL opbouwt is totaal niet relevant verder zolang elke URL maar uniek is voor elke afbeelding. Vervolgens bereken je de imagenaam (ik zou een simpele hash op de parameters (lees: variabelen die de afbeelding beïnvloeden) loslaten bijvoorbeeld) en kijk je of je een bestand hebt met die naam. Zo nee, afbeelding genereren en opslaan. Vervolgens het (al dan niet net gegenereerde) bestand gewoon met de juiste content-type header (image/png ofzo) serveren met fpassthru.

[ Voor 23% gewijzigd door RobIII op 14-08-2013 21:19 ]

[incaz]

Satom, misschien kun je een jsfiddle maken, dan kijken we even mee met de css. Maar dan is wel belangrijk welk gedrag je precies wilt bij resizen: welke dingen moeten kleiner worden bv?

(Het eenvoudigst is natuurlijk je div waar de achtergrondafbeelding op zit gewoon width en height mee te geven van de achtergrondafbeelding, en dan wordt er helemaal niets geresized maar krijg je gewoon scrollbalken als het niet past.)