afbeeldingen met randen | WordPress.org Nederlands

Melodyk
(@melody62)

4 jaren, 7 maanden geleden

Hallo allemaal

Na eindeloos zoeken en dingen uitproberen met helaas niet het gewenste resultaat kom ik maar hier in de hoop dat iemand mij kan helpen met iets dat ik graag zou willen…

Ik gebruik in mijn blogberichten afbeeldingen… via CSS heb ik een andere afbeelding geplaatst die als omlijsting dient van de afbeeldingen.
Tot zover niks aan de hand…

Echter de afbeelding die ik gebruik als omlijsting komt achter de afbeeldingen die ik in de blogposten gebruik.. het lukt me niet om het andersom te krijgen dus vandaar dat je een solide lijst ziet terwijl ik liever een open-gewerkte lijst zou gebruiken…

Kortom… Wie heeft voor de oplossing?

Alvast bedankt, groeten, Melody

De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

14 reacties aan het bekijken - 1 tot 14 (van in totaal 14)

ronaldvw
(@ronaldvw)

4 jaren, 6 maanden geleden

Hi Melody,

het is me niet helemaal duidelijk wat je bedoelt. Zou je e.e.a. met screenshots kunnen illustreren?

Thread starter Melodyk
(@melody62)

4 jaren, 6 maanden geleden

Hallo Ronald

ALs je op mijn blog kijkt zie je dat de afbeeldingen een rand hebben, dat is een afbeelding die ik als ‘border-image’ heb ingesteld.

Als voorbeeld :

Ik gebruik als border-img : https://melodyk.nl/wp-content/uploads/2019/10/blad1.png
Dan zie ik op mijn blog : https://melodyk.nl/wp-content/uploads/2019/10/blad2.png
Maar wil graag : https://melodyk.nl/wp-content/uploads/2019/10/blad3.png

Oftewel de afbeelding die de border vormt… valt achter de afbeelding die ik in een blogpost gebruik… en ik wil dat dus graag net andersom…

Hopelijk is het zo duidelijk?

Moderator Richard van Denderen
(@rdd)

4 jaren, 6 maanden geleden

Dat is een lastige, het is wel mogelijk om meerdere lagen qua afbeeldingen toe te passen met CSS op een html element (link).
Echter een laag ‘boven op’ een afbeeldings element instellen is een stuk complexer.

Ook de omkadering die je als voorbeeld geeft is niet van een resolutie en beeld verhouding dat dit altijd mooi weergegeven zal worden.
Dit zou je beter eert kunnen maken in foto bewerkingsprogramma of wellicht kan dit ook met een online bewerker zoals Canva

Thread starter Melodyk
(@melody62)

4 jaren, 6 maanden geleden

Hallo Richard

Dank je wel voor je reactie… dat is allemaal begrijpelijk, zo ver was ik ook al gekomen na veel zelf zoeken en puzzelen…

De afbeeldingen in de voorbeelden zijn niets meer dan dat, voorbeelden.

Ik ontdekte dat het zou kunnen lukken met position: aboslute en dan z-index maar dan is de weergave op de pagina niet goed omdat alles uitgelichte afbeeldingen dan over elkaar heen schuiven met een aan de bovenkant zo’n grofweg geschat 200 pixels verschil… kortom dan is de uitgelichte afbeelding maar deels te zien en het deel eronder tot aan het begin van de volgende uitgelichte afbeelding valt er dan onder… en dat moet uiteraard niet…
ronaldvw
(@ronaldvw)

4 jaren, 6 maanden geleden
Hi,

t.a.v. je huidige code, de volgende opmerkingen. Je hebt je code voor de border-image ook op de .aligncenter class in je CSS. Dat betekent dat de CSS wordt toegepast op ieder (gecenteerd) element (ieder element met de class.aligncenter). Dat lijkt me niet de bedoeling. Daarnaast zul je hetblad1.png nog moeten bewerken omdat er nog witte “kleurresten” op de afbeeldingen zitten.

Omdat je de border-image nu via dezelfde CSS selector toevoegt zal de border-image achter de afbeelding vallen. Door gebruik te maken van een zgn “pseudo-element” kan je de border-image “later” toevoegen zodat deze over de afbeelding valt.

Zie ook deze jsfiddle: https://jsfiddle.net/ronald/zkweab8y/

Via media queries zou je een smallere border kunnen toepassen bij een kleiner viewport.
- Deze reactie is gewijzigd 4 jaren, 6 maanden geleden door ronaldvw.
Thread starter Melodyk
(@melody62)

4 jaren, 6 maanden geleden

Hallo Ronald

Ik had al een vermoeden inderdaad dat het daarmee te maken zou kunnen hebben maar tegelijkertijd dacht ik ook dat dat niet het gehele probleem zou zijn… Vandaar dus dat ik vroeg om hulp 🙂

En ja.. die afbeelding is uiteraard niet oke, is ook niet de afbeelding die ik wil gaan gebruiken maar is niets meer en niets minder dn een voorbeeld zoals ik in mijn vorige antwoord in deze rij ook al aangaf.

Ik duik even in de link die je geeft en meld me dan wel weer met wat ik ermee bereik

Bedankt voor zover.

Thread starter Melodyk
(@melody62)

4 jaren, 6 maanden geleden

Als ik jouw code gebruik… en aanpas met de juiste gegevens

.post-thumbnail img, .dizze-image-container {
position: absolute;
z-index: 1;
}

.post-thumbnail img, .dizze-image-container::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-style: solid;
border-image-slice: 50;
border-image-width: 50px;
border-image-outset: 0;
border-image-repeat: round;
border-image-source: url(“https://melodyk.nl/wp-content/uploads/2019/10/dizze.png”);
content: ”;
}

.dizze-image-container .dizze-image {
position: relative;
width: 100%;
height: auto;
z-index: 0;
}

Dan komt het al aardig in de buurt van wat ik wil … op 2 dingen na

1) uitgelichte afbeeldingen worden enorm verkleind
2) uitgelichte afbeeldingen schuiven in elkaar / over elkaar heen…
zie printscreen https://melodyk.nl/wp-content/uploads/2019/10/ps1.jpg

En de rand die ik wel zie verschijnen is veel te smal, zou dus breder moeten

ronaldvw
(@ronaldvw)

4 jaren, 6 maanden geleden

Hoi,

vanaf een screenshot is dit niet te debuggen, maar de CSS selector:

.post-thumbnail img, .dizze-image-container::after {

kan ook gelezen worden als, en wordt dus toegepast op:

.post-thumbnail img { (zonder pseudo class “after”)

en

.dizze-image-container::after { (met pseudo class “after”)
Thread starter Melodyk
(@melody62)

4 jaren, 6 maanden geleden
Sorry … wat je schrijft gaat boven mijn pet… wat bedoel je?

Zoals ik schreef, de code lijkt te werken voor een groot deel…

echter op 2 dingen na
1) de Uitgelichte afbeeldingen komen niet in het juiste formaat in beeld maar zeker wel de helft tot 3/4 kleiner zichtbaar

2) onder elke uitgelichte afbeelding zou nog een veldje zichtbaar moeten zijn met de titel, entry-meta etc… en dan een witruimte en dan de volgende post… de hele boel schuift met die code dus omhoog in elkaar zoals je op de printscreen ziet

kortom… de code zoals ik die plaatste in mijn antwoord is dus duidelijk fout maar ik
weet niet wat ik waar moet herstellen om het goed te krijgen
- Deze reactie is gewijzigd 4 jaren, 6 maanden geleden door Melodyk.
ronaldvw
(@ronaldvw)

4 jaren, 6 maanden geleden
Hi,

excuus, er zit een typo in de code, de image container moet relative gepositioneerd worden:
```
.blad-image-container {
  position: relative;
  z-index: 1;
}
```
ik heb de jsfiddle aangepast (en ook de class namen wat generieker genaakt).

Je moet de css voor de ::after pseudo-class NIET toepassen op de afbeelding, dus ik zou .post-thumbnail img, verwijderen uit
```
.post-thumbnail img, .dizze-image-container::after {
   de css
}
```
Thread starter Melodyk
(@melody62)

4 jaren, 6 maanden geleden

Hallo Ronald

Allereerst heel veel dank voor je hulp tot dusver.

Ik heb nu weer een hele tijd zitten stoeien met bovenstaande uit jouw antwoord maar krijg het simpelweg niet voor elkaar…

De afbeelding die ik als omranding wil is: https://melodyk.nl/wp-content/uploads/2019/10/dizze.png

Maar als ik jouw tips toepas valt het alsnog achter de afbeeldingen die ik als uitgelichte afbeeldingen heb geupload en die vallen bovendien veel kleiner uit…

Kortom, ik zal wel te blond zijn en ik weet nu even niet hoe verder…

ronaldvw
(@ronaldvw)

4 jaren, 6 maanden geleden

Hi,

als je een link naar een pagina toevoegt en aangeeft waar je wat hebt gedaan kunnen we er naar kijken.
Thread starter Melodyk
(@melody62)

4 jaren, 6 maanden geleden
Hallo

Bedoel je de link naar mijn blog?
https://melodyk.nl

Die link staat toch ook bij mijn profiel?

Als je iets anders bedoelt dan lees ik het graag… dat wat jij verstrekte aan codes etc zul je niet terugvinden want dat heb ik niet laten staan omdat het niet werkte…
- Deze reactie is gewijzigd 4 jaren, 6 maanden geleden door Melodyk.
Thread starter Melodyk
(@melody62)

4 jaren, 6 maanden geleden

Na enkele uren nadenken weer geprobeerd….

Als ik deze code invoeg :
.post-thumbnail {
position: relative;
z-index: 1;
}

.post-thumbnail::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-style: solid;
border-image-slice: 50;
border-image-width: 50px;
border-image-outset: 0;
border-image-repeat: round;
border-image-source: url(“https://melodyk.nl/wp-content/uploads/2019/10/vrij.png”);
content: ”;
}

.post-thumbnail img .vrij-image {
position: relative;
width: 100%;
height: auto;
z-index: 0;
}

krijg ik dit als resultaat:
Voorbeeld met horizontale afbeelding
https://melodyk.nl/wp-content/uploads/2019/10/voorbeeld-horizontaal.jpg
Voorbeeld met verticale afbeelding
https://melodyk.nl/wp-content/uploads/2019/10/voorbeeld-verticaal.jpg

Je ziet dus bij de horizontale versie dat de rand alleen maar over de onderrand heengaat en niet over de bovenzijde en zijkanten

Je ziet dus bij de verticale versie dat er witruimtes ontstaan links en rechts van de afbeelding en dat de randen boven en onder dus niet over de afbeelding heen gaan zoals dat zou moeten…

(ik word er moedeloos van onderhand… doe ik iets verkeerds of wil ik iets dat niet mogelijk is?)

14 reacties aan het bekijken - 1 tot 14 (van in totaal 14)

Het onderwerp ‘afbeeldingen met randen’ is gesloten voor nieuwe reacties.

Weergaven