Nieuwe lay-out nieuwsberichten op VN ***Update***

Moderators: Essie73, ynskek, Ladybird, Polly, Muiz, Telpeva, NadjaNadja

Toevoegen aan eigen berichten
 
 
JorineV
Berichten: 1215
Geregistreerd: 05-11-15
Woonplaats: Gouda

Re: Nieuwe lay-out nieuwsberichten op VN ***Update***

Link naar dit bericht Geplaatst: 08-08-24 17:05

Hmm... in mijn herinnering was het vanwege het format niet mogelijk om soms wel en soms niet een foto in te voegen. Vanwege de plek op de voorpagina? Toen is er wel (waarvoor dank!) het bijschrift gekomen dat de foto niet relevant is / ter illustratie / niet het betreffende paard. Voorheen gebeurde het vaak dat je klikte om de foto te downloaden, en dat het dan niet zo veel bleek toe te voegen...

Tegenwoordig worden foto's standaard geopend (bij mij althans, weet niet of dat aan je eigen instellingen ligt), dus maakt het weinig meer uit. Maar goed, data en accu zijn inmiddels ook minder kostbaar.

Ibbel

Berichten: 51310
Geregistreerd: 01-09-04
Woonplaats: West-Veluwe

Link naar dit bericht Geplaatst: 08-08-24 17:54

JorineV schreef:
Hmm... in mijn herinnering was het vanwege het format niet mogelijk om soms wel en soms niet een foto in te voegen.


Klopt. Er is gewoon een template mét plek voor een foto die niet leeg kan blijven. Zoals de meeste websites die hebben en hanteren.
Ik heb al eens de suggestie gedaan om de mededeling: "we hebben geen bijpassende foto" als 'meme' op fotoformaat te plaatsen. Dan heb je én je template gevuld met een afbeelding én je mededeling gedaan dat je geen foto hebt.

manzano

Berichten: 25000
Geregistreerd: 22-10-01

Link naar dit bericht Geplaatst: 08-08-24 18:07

Ibbel schreef:
JorineV schreef:
Hmm... in mijn herinnering was het vanwege het format niet mogelijk om soms wel en soms niet een foto in te voegen.


Klopt. Er is gewoon een template mét plek voor een foto die niet leeg kan blijven. Zoals de meeste websites die hebben en hanteren.
Ik heb al eens de suggestie gedaan om de mededeling: "we hebben geen bijpassende foto" als 'meme' op fotoformaat te plaatsen. Dan heb je én je template gevuld met een afbeelding én je mededeling gedaan dat je geen foto hebt.


Of gewoon meerdere templates maken zodat je kiest welke je pakt bij het plaatsen van een bericht of is dat echt heel ingewikkeld?

Ibbel

Berichten: 51310
Geregistreerd: 01-09-04
Woonplaats: West-Veluwe

Link naar dit bericht Geplaatst: 08-08-24 18:08

manzano schreef:
Of gewoon meerdere templates maken zodat je kiest welke je pakt bij het plaatsen van een bericht of is dat echt heel ingewikkeld?


Vast niet. Maar toen, en nu vast ook, werd gezegd: dat is een beetje onzinnig want binnenkort hebben we Flarum :+

JPitty
Lid Nieuwsredactie

Berichten: 31290
Geregistreerd: 01-06-10
Woonplaats: Zwolle

Re: Nieuwe lay-out nieuwsberichten op VN ***Update***

Link naar dit bericht Geplaatst: 08-08-24 20:35

In dit topic zien we regelmatig de vraag terugkomen waarom we artikelen niet zonder foto plaatsen, als we geen bijpassende foto hebben. Dit heeft te maken met een aantal factoren. Allereerst de nieuws-highlights die je op de voorpagina ziet staan, boven de nieuwsberichten. Daar kunnen we geen artikelen in plaatsen zonder foto. Ook als we een nieuwsartikel op Facebook of Instagram willen zetten, lukt dat niet als er geen afbeelding bij staat. Voor klein nieuws is dat wellicht niet zo'n probleem, maar voor het grotere nieuws is dat gewoon niet wenselijk.

Intussen is er samen met Bart gekeken naar de hele situatie. Er is hard gewerkt achter de schermen en het lijkt erop dat we een manier hebben gevonden waarop de foto's nu weer rechts kunnen staan, zonder dat het hinderlijk wordt met tekst ernaast.

Verder hebben we al jullie andere suggesties qua vervangen van neutrale foto's gezien. Wij nemen deze mee achter de schermen en zullen kijken wat we hiermee kunnen.

BartVB
Eigenaar

Berichten: 42327
Geregistreerd: 08-01-01
Woonplaats: Arnhem

Link naar dit bericht Geplaatst: 13-08-24 12:37

Gazal Black Jack ShA. Foto: Aangeleverd door EASP


Er is, zoals hierboven ook gesuggereerd, wat CSS toegevoegd om de layout wat te verbeteren en flexibeler te maken. Ook is er een nieuwe BBcode tag aangemaakt voor de foto's:

[ newsimg=https://boktimg.nl/img/m/6ZU2Px.jpg]Gazal Black Jack ShA. Foto: Aangeleverd door EASP[/newsimg]

Dit werkt prima, tot je een foto gebruikt die portrait is. Dan wordt de foto nog wel beperkt tot 40% van de artikelbreedte, maar dan kan deze behoorlijk hoog worden en neemt dan ongeveer twee keer meer ruimte in dan een liggende foto. Ik heb daar flink op zitten puzzelen maar ik ben nog steeds geen grote vrienden met CSS. Lastig om dit te doen zonder Javascript waarbij zowel de hoogte als de breedte van het kader met foto + bijschrift wordt beperkt, de verhoudingen van de foto intact blijven, de foto niet wordt bijgesneden, niet buiten het kader gaat en het bijschrift het kader ook niet onnodig breed maakt.

Als hier slimmerikken zijn met suggesties; heel graag :j

Shadow0

Berichten: 44713
Geregistreerd: 04-06-04
Woonplaats: Utrecht

Re: Nieuwe lay-out nieuwsberichten op VN ***Update***

Link naar dit bericht Geplaatst: 13-08-24 12:47

Een max-height, en dan in een vaste waarde? Bijvoorbeeld (px), of een relatieve waarde zoals em (bv 8em; dus max zo hoog als 8 regels tekst) of 'vh' (1% van de viewport height). Dus 80vh zou betekenen dat het verticaal maximaal 80% van de beschikbare hoogte van je scherm inneemt.

Ongetest, maar als je een voorbeeld kunt geven met een verticale afbeelding waarbij dat optreedt, kijk ik vanavond even verder. Maar eerst naar het water.

BartVB
Eigenaar

Berichten: 42327
Geregistreerd: 08-01-01
Woonplaats: Arnhem

Re: Nieuwe lay-out nieuwsberichten op VN ***Update***

Link naar dit bericht Geplaatst: 13-08-24 14:20

Hier staat een voorbeeld:

https://jsfiddle.net/4m061nys/

Heb al van alles geprobeerd. Divs met max-width etc, flex box, tabellen, etc. Maar alles loopt ergens in de soep:
- Artikel gaat door de box heen
- Foto wordt uit verhouding getrokken
- Foto wordt gecropt
- Foto valt buiten de box
- Hoogte van de foto wordt niet beperkt
- Foto wordt netjes beperkt maar het bijschrift maakt de box onnodig breed
- Etc, etc :)

Iig veel dank! Richting water klinkt als een goed plan {:}


Edit: Hmm, misschien heb ik toch een werkende oplossing gevonden.
Edit2: Het lijkt toch gelukt! Nieuwe versie staat nu online. Werkt in ieder geval in de scenario's die ik heb getest. Geen idee wat er gisteren (nacht) mis ging. Waarschijnlijk vooral gaarheid...