Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

Door Femme Taken

Architect

Inline imageviewer, Thumbor en meer - Development-iteratie #118

31-10-2017 • 15:21

41 Linkedin Google+

Onze ontwikkelaars hebben development-iteratie #118 opgeleverd. De focus lag in deze sprint op het implementeren van een nieuwe editor in het redactionele cms en het refactoren van het weergaveframework. Daarnaast hebben we een inline imageviewer gebouwd.

Inline imageviewer

Eerder dit jaar hebben we een nieuwe lay-out geïntroduceerd voor onze redactionele artikelen. De belangrijkste verandering is dat reviews en .plans meer ruimte in de breedte kunnen benutten om bijvoorbeeld afbeeldingen op een groter formaat te presenteren.

Sinds de oplevering van de initiële versie van de nieuwe lay-out werken we iteratief aan het verbeteren van elementen, zodat ze gebruik kunnen maken van de extra ruimte. In iteratie #118 hebben we een inline imageviewer gemaakt waarmee een galerij van afbeeldingen in het artikel geplaatst kan worden en je een afbeelding op middelgroot formaat kunt bekijken zonder het zicht op de review te verliezen. Door op de grote afbeelding te klikken kun je zoals vanouds de afbeelding in een lightbox op de maximale grootte van de viewport bekijken.

De inline imageviewer is opgeleverd als een mvp en kun je hieronder in werking zien. We zijn benieuwd naar je feedback!

Thumbor

In de afgelopen maand heeft Development gewerkt aan de implementatie van Thumbor, een zelf te hosten service die automatisch afbeeldingen verkleint en/of uitsnijdt aan de hand van parameters in de url. Het resultaat daarvan wordt in een cache bewaard op onze Ceph-storage. Onze loadbalancers zorgen voor https- en http/2-verbindingen en gebruiken ook nog eens hun 'reverse proxy cache' voor de meestgebruikte afbeeldingen om het nóg sneller te maken.

Thumbor maakt het voor ons veel eenvoudiger om afbeeldingen in verschillende formaten aan te bieden, zodat we daar flexibeler mee om kunnen gaan. Bovendien hebben we Thumbor ingericht om afbeeldingen automatisch te optimaliseren, waardoor er minder data over de lijn hoeft en de site nog iets sneller is geworden. Sinds vandaag worden de meeste thumbnails en verkleinde afbeeldingen, bijvoorbeeld die in de imageviewer hierboven, via Thumbor geserveerd.

Refactor weergaveframework

Tweakers bestaat inmiddels ruim negentien jaar en in die tijd hebben we nogal wat functionaliteit aan het oorspronkelijke, eenvoudige concept toegevoegd. Het onvermijdelijke gevolg daarvan is dat er nogal wat legacycode in onze codebase leeft. Zo zijn er op dit moment vier methodes om de uiteindelijke weergave aan te roepen, die hun origine kennen in verschillende fasen in de ontwikkeling van Tweakers. De nieuwste versie is nog ontwikkeld in de tijd dat we overstapten van losse php-code die html genereerde, naar Symfony's Controller-structuur en php-templates. Later is dat aangevuld om ook de output van Twig-templates op te kunnen vangen.

De weergavemethodes zijn indertijd wel zo aangepast dat ze uiteindelijk allemaal hetzelfde eindpunt bereiken, waar de pagina-inhoud tussen het framework van header en footer wordt geplaatst. Het is desondanks onhandig om de vier verschillende ingangen te onderhouden, die bovendien hier en daar kleine verschillen in gedrag hebben.

Onze devvers zijn momenteel bezig met een volledig nieuwe versie, die Twig als uitgangspunt heeft. De bestaande Twig-templates worden daarmee gelijk helemaal netjes in Twig verwerkt, en niet meer achteraf opgevangen en via eigen php-code in het html-framework geplaatst. Helaas is het te veel werk om ook de honderden php-templates om te zetten naar Twig, waardoor we nog wel een ingang vanuit de oude php-templates naar de nieuwe Twig-versie nodig hebben. Dat lijkt misschien een 'lood om oud ijzer'-situatie, maar het betekent ook dat we de drie oudste versies kunnen verwijderen en bovendien een groter deel van de html-generatie, afgescheiden van overige php-code, in Twig-templates gebeurt.

Betaalmethode op 'n.v.t.' bij gratis advertenties

In de .plan over iteratie #117 kozen jullie als community-pick het automatisch selecteren van de betaalmethode 'n.v.t.' bij het plaatsen van gratis advertenties. We hebben deze functie gebouwd, zodat je nu niet meer de curieuze verplichting hebt om een betaalmethode in te vullen in een advertentie van een product dat je gratis weggeeft.

En verder hebben we...

  • een opmaakfout verholpen in reviewpagina's die beginnen met een tabel;
  • ervoor gezorgd dat de beoordelingloze 'hands-on'-gebruikersreviews de gemiddelde beoordelingen van een product niet meer verstoren.

Reacties (41)

Wijzig sortering
Wat me direct opvalt bij de Inline imageviewer is dat ik niet de pijltjes toetsen kan gebruiken om vorige/volgende afbeeldingen te bekijken. Wordt deze functionaliteit tijdens een toekomstige sprint nog toegevoegd? Had toch wel verwacht dat dit in de MVP scope zat :D Maar ziet er verder erg netjes uit. Ben blij dat je op 3 manieren de imageviewer kan sluiten: met de X knop, de 'escape' toets indrukken of buiten de viewer klikken met de muis; dat werkt perfect zoals 't hoort!

Edit: als ik op een afbeelding druk wordt de afbeelding groter weergegeven. Ik kan dan echter niet meer naar andere afbeeldingen navigeren. Wordt dit later ook nog aangepast of houden jullie dit zo? Zou graag op de afbeelding willen drukken en vervolgens door alle 'grote' afbeeldingen kunnen bladeren/scrollen.

[Reactie gewijzigd door stin00 op 31 oktober 2017 15:38]

Weet niet of ik daar op sta te wachten eerlijk gezegd, wat als je 2 of meer inline image viewers op een pagina hebt?
Is makkelijk zat te checken welke in de viewport is, en mocht het zeldzame geval zo zijn dat er meerdere op een scherm staan kan de functionaliteit altijd nog uitgeschakeld worden.
Of met de scroll button op de rij plaatjes :)
Dat heb ik dan weer liever niet, want dan krijg je een inconsistente pagina-scroll-ervaring: je wilt toch dat je met het draaiwiel van de muis altijd consequent de pagina naar boven of beneden beweegt.
De optie om pijltjes te gebruiken zou ik ook graag zien.
Edit: als ik op een afbeelding druk wordt de afbeelding groter weergegeven. Ik kan dan echter niet meer naar andere afbeeldingen navigeren. Wordt dit later ook nog aangepast of houden jullie dit zo?
Dat wordt later nog aangepast. De optie om ueberhaupt een grotere versie van de afbeelding te openen zat zelfs niet in de initieel opgeleverde versie en is er gisteren pas op het laatste moment ingehacktbouwd :)
Dat, maar ook dat een full screen image bij mij op chrome op android niet meer te schalen valt. Dus ik kan alleen het plaatje als geheel bekijken, of een 100% 1:1 weergave en niets daartussen (was bijde oude viewer ook t geval)

Maar dit is een enorme verbetering tov de oude imageviewer, dus goede vooruitgang.
Naar vorige en volgende foto's gaan met de pijltjestoetsen zou ik ook graag zien. Verder werkt het heel goed, mooie verbetering!
Betekent Thumbor ook dat er verbeterd fotoalbum (+ features voor afbeeldingsformaten voor op het forum) komt voor users uiteindelijk?

[Reactie gewijzigd door Zeror op 31 oktober 2017 16:32]

Als het ooit zover komt dat we het fotoalbum gaan verbouwen dan maakt Thumbor het wel makkelijker om afbeeldingen in verschillende formaten aan te bieden, maar verder staat het helemaal los van het fotoalbum en komen er uit dit project ook geen verbeteringen aan het fotoalbum voort.
Dat staat los van elkaar. We kunnen hooguit thumbor inzetten om van de uiteindelijk geuploade afbeeldingen (andere maten) thumbnails te maken, maar dat is vast niet het belangrijkste minpunt van het huidige fotoalbum.
Wat ik me altijd afvraag, is waarom jullie het wiel altijd opnieuw willen uitvinden.

Waarom niet bestaande oplossingen gebruiken, de code aanpassen / mergen naar eigen inzicht en klaar...

Jullie src-code / name-spacing / class-definities / UI / UA / UX wordt echt een warboel van wir-war bij elke iteratie.

Voor een image viewer (desktop, mouse, touch, phone, etc...) incl. gestures kan je bv. toch ook iets als http://photoswipe.com/ gebruiken?

Klikken = foto openen, daarna kan je 'swipen' (of 'draggen') van links naar rechts, naar beneden swipen = sluiten, etc...

Een bijna native ervaring en dan zitten jullie weer zelf een halfbakken oplossing te implementeren?

Money-wise zou ik het wel weten, maar blijkbaar speelt geld geen rol en bouwen jullie liever alles zelf 10x opnieuw?
Als je het zelf bouwt kan je 100% zekerheid geven dat het goed samenwerkt met de rest van de website. Daarbij zijn 10.000 plugins voor alles behoorlijke perfomance hogs waar je site gewoon niet beter van wordt.
Voor een halfbakken wordpress siteje misschien niet erg, maar voor een site als Tweakers moet je dat niet willen.
We gebruiken op heel veel plekken standaard oplossingen in onze code, maar zeker niet overal. Het is simpelweg niet waar dat het gebruik van standaard oplossing per definitie implementatie en onderhoud vergemakkelijken. In de eerste plaats zijn 3rd party oplossing vaak lastiger te integreren. In de tweede plaats loop je vaak tegen tekortkomingen aan. Dat kan je dan negeren (waarmee je dus een suboptimale feature hebt) of zelf gaan oplossen, maar in het laatste geval maak je updates dan weer veel lastiger.

En wat je ook niet moet vergeten: in hoeverre is 3rd party code betrouwbaar? Zowel qua kwaliteit, performance als qua veiligheid weet je dat niet altijd precies, en je bent grotendeels afhankelijk van derden voor het fixen van bugs.

Als het zaken zijn waar onze expertise echt niet ligt (zoals bijvoorbeeld voor de videoplayer) dan zullen we sneller naar een externe oplossing kijken dan voor dingen die we prima zelf kunnen, zoals onze imageviewer die we waarschijnlijk al hadden voordat photoswipe bestond :P
Kleine finding: Binnen chrome op een chromebook is het in ieder geval niet mogelijk binnen de afbeeldingen te balderen. Sluiten kan alleen middels klikken op het kruisje van de inline viewer. Edit: Escape werkt wel zie ik net. :)

[Reactie gewijzigd door Spacecowboy op 31 oktober 2017 18:24]

In de fullscreen/lightbox-view kun je inderdaad nog niet browsen door de afbeeldingen in de gallery. Daar heb je het denk ik over anders zie je geen sluitkruisje. In de inline view kun je wel door de afbeeldingen bladeren. De lightboxview met bladerfunctie moeten we nog implementeren.
Ook inline view is het helaas niet mogelijk binnen Chrome op Chrome OS. To be sure: Ik klik op de pagina op een afbeelding, deze komt naar voren (met het sluitkruisje zichtbaar). Daar kan ik op dit moment helaas niet bladeren middels de pijltjestoetsen.

Betreft Google Chrome 61.0.3163.123

[Reactie gewijzigd door Spacecowboy op 31 oktober 2017 19:04]

Met inline wordt bedoeld dat we nu een imageviewer met bladerbare thumbnails tussen de tekst in een artikel kunnen plaatsen. Je kunt nu in het artikel op de thumbnails klikken en je krijgt een afbeelding op middelgroot formaat (als je 'm zou bekijken op een desktop) zonder een lightbox te moeten openen en de focus op de review te verliezen.

Als je op de grote afbeelding klikt krijgt je een lightbox en daar kun je inderdaad nog niet in bladeren naar andere afbeeldingen uit de gallery, we gaan dat later implementeren.
Misschien wil ik iets heel raars, maar is het mogelijk om, wanneer ik de light box open heb en op de back toets op een telefoon druk, de light box te sluiten en terug naar het artikel te gaan, ipv naar de vorige pagina te gaan? Zal op geen enkele manier standaard zijn, maar ik blijf ongewild pagina's terug gaan wanneer ik klaar ben met een afbeelding.
Dat is vaker gevraagd en is ook al een ticket voor. Misschien dat het in het kader van het verder uitwerken van deze MVP eens prioriteit gaat krijgen ;)
Oh dit zou zo fijn zijn! Op mijn telefoon blijf ik het maar "fout" doen... Misschien iets voor de volgende community pick?
Dit heb ik ook altijd op Tweakers. Is ook een van de weinige websites die ik ken die op mobiel een plaatje openen niet als los event ziet, waardoor back inderdaad helemaal terug gaat. Zou mooi zijn als dit wordt aangepast.
Duidelijk, bedankt voor de verheldering :)
Het zou fijn zijn als de pijlen op mobiele weergave van de inline image viewer wat kleiner zijn. Ze beslaan nu wel groot deel van de afbeelding er onder. Verder werkt het goed 👍
Hier is al een ticket voor en is dus aan gedacht :) , kon alleen nog niet mee met deze release.

[Reactie gewijzigd door Zvennn op 2 november 2017 08:59]

Ik merk dat de thumbnails van Pricewatch producten nu wat waziger zijn (lagere resolutie). Als ik erop klik dan zijn ze wel gewoon scherp en volledige resolutie, maar de wazige thumbnails komen een beetje goedkoop over :P. Is dit iets wat al opgemerkt is, en eventueel te fixen is? :)
Dit is inmiddels gefixed :)
Wederom goed bezig jongens (en dames). :)
Ziet er weer mooi uit allemaal :)
Die inline imageviewer is wel erg netjes! Goed bezig!

En leuk om te zien dat een door mij ingeschoten bug opgelost is (de hands-on reviews bug) :9
In iteratie #118 hebben we een inline imageviewer gemaakt waarmee een galerij van afbeeldingen in het artikel geplaatst kan worden en je een afbeelding op middelgroot formaat kunt bekijken zonder het zicht op de review te verliezen. Door op de grote afbeelding te klikken kun je zoals vanouds de afbeelding in een lightbox op de maximale grootte van de viewport bekijken.

De inline imageviewer is opgeleverd als een mvp en kun je hieronder in werking zien. We zijn benieuwd naar je feedback!
Dit is een zeer grote en fijne verbetering! Op de desktop ziet het er mooier uit en op mijn telefoon is het gewoon een stuk praktischer! De lightbox afbeelding is hier namelijk net zo groot als de inline imageviewer en het is dus niet meer nodig om los op elke afbeelding te drukken.

Ik zeg houden die feature!

Kleine opmerking. Als ik nu op de afbeelding hierboven druk, kan ik vervolgens in de lightbox niet door de afbeeldingen heen scrollen.

Op dit item kan niet meer gereageerd worden.


Apple iPhone 11 Nintendo Switch Lite LG OLED C9 Google Pixel 4 FIFA 20 Samsung Galaxy S10 Sony PlayStation 5 Games

'14 '15 '16 '17 2018

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2019 Hosting door True