Profiel-foto aanpassen door ingelogde gebruiker

Voor een leden-site wil ik dat bezoekers hun eigen foto kunnen toevoegen aan het profiel, zodat er een leuk smoelenboek ontstaat. Ik maak hierbij gebruik van 3 plugins.

Stap 1: gebruikers veld aanmaken

Schermafbeelding 2015-04-04 om 11.05.03 Schermafbeelding 2015-04-04 om 11.07.18

Onder types ga je naar user field.
Klik op add a user meta group.
Kies het type veld dat je wilt toevoegen, in dit geval een image.
Bepaal voor welke groep gebruikers dit veld moet worden toegevoegd.

Stap 2: formulier maken

Maak een formulier en voeg 1 veld toe, namelijk bestandsuplaod.
Check wat je wilt bij confirmations (bij mij gaat het naar een bedankpagina) en notifications (staat bij mij uit).
Bewaar het formulier.

Stap 3: formulier-veld koppelen aan gebruikers-gegevens

Schermafbeelding 2015-04-04 om 11.16.11

Schermafbeelding 2015-04-04 om 11.17.12

Ga naar user registration en maak een nieuw formulier.
Kies update user.
Selecteer het bij 2 gemaakte formulier.
De user settings kun je zo laten staan.
Zoek bij User Meta het bij 1 gemaakte veld. Dat heeft meestal een  naam die begint met wpcf-
Kies aan de rechterkant Profiel-foto (of hoe jij het veld hebt genoemd).
Save.

Stap 4: formulier op pagina plaatsen

Maak een nieuwe pagina of ga naar een bestaande.
Voeg het formulier toe met de Add form knop boven de editor.


Je hebt nu een pagina met een formulier waar ingelogde gebruikers hun profiel-foto kunnen wijzigen.
Maar het is natuurlijk ook leuk als ze zien welke foto ze hebben geplaatst.
Daarvoor maak ik in toolset een view dat alleen de profiel-foto laat zien van de ingelogde gebruiker.

Stap 5: profiel-foto van ingelogde gebruiker laten zien

Maak een nieuwe view.
Kies bij Content selection voor User en dan welke groep gebruikers.

Schermafbeelding 2015-04-06 om 08.54.59

Laat Don’t show current logged user niet aangevinkt. De “current logged user” moet juist zichtbaar worden.
Plaats onderstaande code in de view.

[code]

[wpv-layout-start]
[wpv-items-found]
<!– wpv-loop-start –>
<wpv-loop>
</wpv-loop>
<!– wpv-loop-end –>
<div class=”profielfoto”>
<img src=”[wpv-user field=”wpcf-profiel-foto” id='[wpv-current-user info=”id”]’]” > </div>
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context=”wpv-views”]<strong>Er is nog geen foto geupload</strong>[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

[/code]

Uitleg:
de loop moet er wel staan, anders krijg je foutmeldingen. Maar de code voor de foto staat buiten de loop. Anders krijg je de foto net zo vaak als dat er gebruikers zijn.
Verder zit er een trucje in om alleen de foto van de ingelogde gebruiker te zien. Een soort embedded view-code: [wpv-user field=”wpcf-profiel-foto” id='[wpv-current-user info=”id”]’].
Wat jammer is, is dat het me niet gelukt is om de featured image aan te roepen met deze code. Dus je moet met css nog iets doen om de foto netjes in de img te krijgen. Als je daar een verbeterd stukje code voor hebt dan hoor ik het graag.

Tadaaa

En het werkt! Ik hoop dat je er wat aan hebt. Het heeft mij behoorlijk wat tijd gekost om deze combinatie van plugins uit te puzzelen. Succes!

Wil je reageren?

Graag!
Je kunt hier een berichtje achterlaten. Het is noodzakelijk daarvoor je naam en emailadres in te vullen. Het emailadres zal nooit openbaar worden gemaakt.
Na goedkeuring door WP-bieb zal je bericht op de website verschijnen.

*