Record Photo & Logo Component for Salesforce — User Guide
Version: 1.0
Applies to: Salesforce Lightning Experience
1. What Is a Record Photo & Logo Component for Salesforce?
Record Photo & Logo Component for Salesforce is a Lightning Web Component that allows users to upload, crop, and display profile photos directly on Salesforce records.
It provides a clean, profile-style UI similar to modern applications while fully using Salesforce Files and security model
The component works with:
- Standard objects (Contact, Account, etc.)
- Custom objects
2. Who This Guide Is For
| Section | Audience |
|---|---|
| Section 3 | Salesforce Administrators |
| Section 4 | End Users |
3. For Administrators: Setup
3.1 Assign Permission Set
Users must have access to:
- Apex class
- Custom object (
Record_Photo_Card_Mapping__c) - Files (ContentVersion)
Steps:
- Setup → Permission Sets
- Open your package permission set
- Assign to users
3.2 Add Component to Record Page
- Go to Object Manager
- Open desired object
- Lightning Record Pages
- Edit page
- Drag Record Photo Card component
- Save & Activate
3.3 Configure Component
Component supports:
- Field display (comma-separated API names)
- Layout:
- Horizontal
- Mirror
- Vertical
Example:
Name,Email,Phone
Invalid fields are ignored automatically
4. For End Users
4.1 Viewing the Component
On a record page, users see:
-
Profile photo area
-
Optional record fields
-
Upload button
4.2 Uploading a Photo
- Click Upload Photo
- Select image
- Crop image using:
- drag
- zoom slider
- Save
4.3 Cropping
Before saving, users can:
- reposition image
- zoom
- preview circular crop
The system always saves a square image optimized for avatars
4.4 Replacing a Photo
Uploading a new image:
- replaces the displayed photo
- keeps previous files in Salesforce Files
4.5 What Happens After Upload
System automatically:
- saves file as Salesforce File
- links it to the record
- updates the displayed photo
5. How Photo Display Works
The component:
- Finds mapping records for the record
- Picks the latest one
- Displays the associated image
6. Troubleshooting
Photo not displayed
Possible reasons:
- no photo uploaded
- file deleted
- no access to file
Upload fails
Check:
- file size
- file format
- permissions
Fields not visible
Check:
- Field API names
- Field Level Security