diff --git a/public/shared/admin.css b/public/shared/admin.css
index 0c93944a..1012683f 100644
--- a/public/shared/admin.css
+++ b/public/shared/admin.css
@@ -613,6 +613,68 @@
.profile-preview-initials { font-size: 24px; font-weight: 700; color: var(--white); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.profile-upload-actions { display: flex; flex-direction: column; gap: 8px; }
+/* Profile picture cropper modal (LinkedIn-style zoom + pan).
+ Cropper.js CSS lives on the CDN; these rules style the surrounding chrome
+ and force the crop box into a circle to match the live profile circle.
+ The outer classes are prefixed `pp-crop-` to avoid colliding with
+ Cropper.js's own `.cropper-modal` class (which is its internal dark
+ overlay outside the crop box). */
+.pp-crop-modal {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.6);
+ z-index: 10000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 16px;
+}
+.pp-crop-modal-inner {
+ background: var(--white);
+ border-radius: 12px;
+ padding: 20px;
+ width: min(520px, 94vw);
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
+}
+.pp-crop-modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12px;
+}
+.pp-crop-modal-header h3 { margin: 0; font-size: 18px; }
+.cropper-stage {
+ width: 100%;
+ height: 360px;
+ background: #000;
+ border-radius: 8px;
+ overflow: hidden;
+}
+.cropper-stage img { max-width: 100%; display: block; }
+.cropper-hint {
+ margin: 10px 0 0;
+ font-size: 12px;
+ color: var(--muted, #666);
+}
+.cropper-controls {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ margin-top: 12px;
+}
+.cropper-controls label { font-size: 13px; color: var(--muted, #666); }
+.cropper-controls input[type=range] { flex: 1; }
+.cropper-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ margin-top: 16px;
+}
+/* Circular crop overlay so the preview matches the 110px profile circle.
+ These target Cropper.js's own internal elements — keep the class names. */
+.cropper-view-box,
+.cropper-face { border-radius: 50%; }
+
/* Company Logo Upload */
.logo-upload-container { display: flex; align-items: center; gap: 16px; }
.logo-upload-preview {
diff --git a/public/shared/admin.js b/public/shared/admin.js
index a848f906..89f38ee7 100644
--- a/public/shared/admin.js
+++ b/public/shared/admin.js
@@ -1381,7 +1381,7 @@ function profileForm(d) {
${t('form.profile_picture')}
-
+
${escapeHtml(d.initials || 'CV')}
@@ -1397,6 +1397,10 @@ function profileForm(d) {
image
${t('form.choose_image')}
+
+ crop
+ ${t('form.adjust_picture')}
+
inventory_2
${t('form.use_existing')}
@@ -2160,6 +2164,9 @@ function checked(id) {
// Profile Picture Functions
let pendingProfilePicture = null;
+// Crop metadata queued alongside a pending upload/reuse; applied server-side after the
+// file is saved. null means "no change"; { offsetX, offsetY, zoom } overrides.
+let pendingProfilePictureCrop = null;
function previewProfilePicture(input) {
if (input.files && input.files[0]) {
@@ -2170,6 +2177,7 @@ function previewProfilePicture(input) {
return;
}
pendingProfilePicture = file;
+ pendingProfilePictureCrop = null;
const reader = new FileReader();
reader.onload = function(e) {
const img = document.getElementById('profilePreviewImg');
@@ -2177,6 +2185,11 @@ function previewProfilePicture(input) {
img.src = e.target.result;
img.style.display = 'block';
initials.style.display = 'none';
+ applyProfilePictureCrop(img, null);
+ // Open the cropper automatically so the user can frame the new image
+ // (LinkedIn parity: uploading opens the adjuster; they can Cancel to
+ // accept the default centered cover-fit).
+ openCropperForNewUpload(e.target.result);
};
reader.readAsDataURL(file);
}
@@ -2184,17 +2197,26 @@ function previewProfilePicture(input) {
function removeProfilePicture() {
pendingProfilePicture = 'remove';
+ pendingProfilePictureCrop = null;
const img = document.getElementById('profilePreviewImg');
const initials = document.getElementById('profilePreviewInitials');
img.style.display = 'none';
initials.style.display = 'flex';
+ applyProfilePictureCrop(img, null);
document.getElementById('f-picture').value = '';
+ const adjustBtn = document.getElementById('adjustPictureBtn');
+ if (adjustBtn) adjustBtn.disabled = true;
}
async function uploadProfilePicture() {
// Siblings of a localized dataset should share the picture even when "Apply to all datasets" is off.
// The server uses this to look up the language_group and sync the siblings.
const ctxId = activeDatasetId || '';
+ // Snapshot + clear the queued crop up-front so an early return (remove path)
+ // doesn't leave a stale crop behind to be applied on the next save.
+ const queuedCrop = pendingProfilePictureCrop;
+ pendingProfilePictureCrop = null;
+ let filenameResult = null;
if (pendingProfilePicture === 'remove') {
const url = ctxId ? `/api/profile/picture?current_dataset_id=${encodeURIComponent(ctxId)}` : '/api/profile/picture';
try { await fetch(url, { method: 'DELETE' }); } catch (err) {}
@@ -2205,13 +2227,12 @@ async function uploadProfilePicture() {
const filename = pendingProfilePicture.reuse;
try {
await api('/api/profile/picture/select', { method: 'PUT', body: { filename, current_dataset_id: ctxId || undefined } });
+ filenameResult = filename;
} catch (err) {
toast(t('toast.upload_failed'), 'error');
}
pendingProfilePicture = null;
- return filename;
- }
- if (pendingProfilePicture && pendingProfilePicture instanceof File) {
+ } else if (pendingProfilePicture && pendingProfilePicture instanceof File) {
const formData = new FormData();
formData.append('picture', pendingProfilePicture);
if (ctxId) formData.append('current_dataset_id', String(ctxId));
@@ -2219,14 +2240,25 @@ async function uploadProfilePicture() {
const response = await fetch('/api/profile/picture', { method: 'POST', body: formData });
if (!response.ok) throw new Error('Upload failed');
const result = await response.json();
- pendingProfilePicture = null;
- return result.filename || null;
+ filenameResult = result.filename || null;
} catch (err) {
toast(t('toast.upload_failed'), 'error');
}
pendingProfilePicture = null;
}
- return null;
+ // Apply queued crop after the file is live on the server. The server resets
+ // picture_crop on upload/select, so we always PUT our queued value (even
+ // defaults) to replace the server's NULL with the user's intent.
+ if (filenameResult && queuedCrop) {
+ try {
+ const propagate = checked('f-picturePropagate');
+ await api('/api/profile/picture/crop', {
+ method: 'PUT',
+ body: { offsetX: queuedCrop.offsetX, offsetY: queuedCrop.offsetY, zoom: queuedCrop.zoom, applyToAll: propagate, current_dataset_id: ctxId || undefined }
+ });
+ } catch (err) { /* non-fatal: default crop remains */ }
+ }
+ return filenameResult;
}
async function showPicturePicker() {
@@ -2268,17 +2300,193 @@ async function deleteUnusedPicture(filename) {
function selectExistingPicture(filename) {
pendingProfilePicture = { reuse: filename };
+ pendingProfilePictureCrop = null;
const img = document.getElementById('profilePreviewImg');
const initials = document.getElementById('profilePreviewInitials');
if (img) {
img.src = `/uploads/${encodeURIComponent(filename)}?${Date.now()}`;
img.style.display = 'block';
+ applyProfilePictureCrop(img, null);
}
if (initials) initials.style.display = 'none';
const grid = document.getElementById('picturePickerGrid');
if (grid) grid.style.display = 'none';
const fileInput = document.getElementById('f-picture');
if (fileInput) fileInput.value = '';
+ const adjustBtn = document.getElementById('adjustPictureBtn');
+ if (adjustBtn) adjustBtn.disabled = false;
+}
+
+// --- LinkedIn-style profile picture cropper (zoom + pan) ---
+//
+// The math:
+// Let W, H = natural image size, L = min(W, H). The display circle uses
+// object-fit: cover, so the image is scaled to side length L before any
+// crop is applied. Our stored zoom is relative to that cover-fit baseline,
+// so zoom = L / cropBoxWidth (Cropper returns crop-box dims in natural px).
+// Offsets are the difference between the crop-box centre and the image centre
+// as a percentage of the natural dimensions — they become the object-position
+// CSS value on the display img.
+//
+// readCropFromCropper and seedCropperFromCrop are kept pure so tests can
+// round-trip them without instantiating Cropper.
+const DEFAULT_CROP = { offsetX: 0, offsetY: 0, zoom: 1 };
+let cropperInstance = null;
+let cropperMode = null; // 'new' (file pending) | 'existing'
+let cropperNaturalSize = { w: 0, h: 0 };
+let cropperInitialCrop = null;
+
+function readCropFromCropper(cropperData, naturalSize) {
+ const W = naturalSize.w, H = naturalSize.h;
+ if (!W || !H || !cropperData || !cropperData.width) return { ...DEFAULT_CROP };
+ const L = Math.min(W, H);
+ const zoomRaw = L / cropperData.width;
+ const zoom = Math.max(1, Math.min(4, zoomRaw));
+ const percentX = ((cropperData.x + cropperData.width / 2) / W) * 100;
+ const percentY = ((cropperData.y + cropperData.height / 2) / H) * 100;
+ return {
+ offsetX: Math.max(-100, Math.min(100, percentX - 50)),
+ offsetY: Math.max(-100, Math.min(100, percentY - 50)),
+ zoom
+ };
+}
+
+function cropToCropperData(crop, naturalSize) {
+ const W = naturalSize.w, H = naturalSize.h;
+ const L = Math.min(W, H);
+ const width = L / (crop.zoom || 1);
+ const percentX = 50 + (crop.offsetX || 0);
+ const percentY = 50 + (crop.offsetY || 0);
+ const cx = (percentX / 100) * W;
+ const cy = (percentY / 100) * H;
+ return {
+ x: cx - width / 2,
+ y: cy - width / 2,
+ width,
+ height: width,
+ rotate: 0,
+ scaleX: 1,
+ scaleY: 1
+ };
+}
+
+function seedCropperFromCrop(crop) {
+ if (!cropperInstance) return;
+ cropperInstance.setData(cropToCropperData(crop, cropperNaturalSize));
+}
+
+function openCropperForNewUpload(dataUrl) {
+ _openCropper(dataUrl, 'new', { ...DEFAULT_CROP });
+}
+
+async function openCropperForExisting() {
+ try {
+ const profile = await api('/api/profile');
+ if (!profile || !profile.picture_filename) {
+ toast(t('toast.no_picture'), 'info');
+ return;
+ }
+ let crop = { ...DEFAULT_CROP };
+ if (profile.picture_crop) {
+ try { crop = { ...crop, ...JSON.parse(profile.picture_crop) }; } catch {}
+ }
+ const src = '/uploads/' + encodeURIComponent(profile.picture_filename) + '?t=' + Date.now();
+ _openCropper(src, 'existing', crop);
+ } catch (err) {
+ toast(t('toast.upload_failed'), 'error');
+ }
+}
+
+function _openCropper(src, mode, initialCrop) {
+ if (typeof Cropper === 'undefined') {
+ toast(t('toast.upload_failed'), 'error');
+ return;
+ }
+ cropperMode = mode;
+ cropperInitialCrop = initialCrop;
+ const modal = document.getElementById('cropperModal');
+ const img = document.getElementById('cropperImage');
+ if (!modal || !img) return;
+ if (cropperInstance) { cropperInstance.destroy(); cropperInstance = null; }
+ img.onload = () => {
+ cropperNaturalSize = { w: img.naturalWidth, h: img.naturalHeight };
+ cropperInstance = new Cropper(img, {
+ aspectRatio: 1,
+ viewMode: 1,
+ dragMode: 'move',
+ background: false,
+ autoCropArea: 1,
+ guides: false,
+ center: false,
+ cropBoxMovable: false,
+ cropBoxResizable: false,
+ toggleDragModeOnDblclick: false,
+ ready: () => seedCropperFromCrop(initialCrop)
+ });
+ };
+ img.src = src;
+ modal.style.display = 'flex';
+ const zoomSlider = document.getElementById('cropperZoom');
+ if (zoomSlider) {
+ zoomSlider.value = String(initialCrop.zoom || 1);
+ zoomSlider.oninput = () => {
+ if (!cropperInstance) return;
+ const z = Math.max(1, Math.min(4, parseFloat(zoomSlider.value) || 1));
+ const current = cropperInstance.getData(true);
+ // Preserve the crop centre while changing zoom.
+ const cx = current.x + current.width / 2;
+ const cy = current.y + current.height / 2;
+ const L = Math.min(cropperNaturalSize.w, cropperNaturalSize.h);
+ const newSide = L / z;
+ cropperInstance.setData({ x: cx - newSide / 2, y: cy - newSide / 2, width: newSide, height: newSide, rotate: 0, scaleX: 1, scaleY: 1 });
+ };
+ }
+}
+
+function resetCropperCrop() {
+ seedCropperFromCrop({ ...DEFAULT_CROP });
+ const zoomSlider = document.getElementById('cropperZoom');
+ if (zoomSlider) zoomSlider.value = '1';
+}
+
+async function saveCropperCrop() {
+ if (!cropperInstance) { closeCropperModal(); return; }
+ const data = cropperInstance.getData(true);
+ const crop = readCropFromCropper(data, cropperNaturalSize);
+ if (cropperMode === 'existing') {
+ // Image is already on the server — PUT the crop only.
+ try {
+ const ctxId = activeDatasetId || '';
+ const propagate = checked('f-picturePropagate');
+ await api('/api/profile/picture/crop', {
+ method: 'PUT',
+ body: { offsetX: crop.offsetX, offsetY: crop.offsetY, zoom: crop.zoom, applyToAll: propagate, current_dataset_id: ctxId || undefined }
+ });
+ toast(t('toast.crop_saved'), 'success');
+ // Reflect in the 80px preview + the live header circle.
+ const previewImg = document.getElementById('profilePreviewImg');
+ if (previewImg) applyProfilePictureCrop(previewImg, crop);
+ const headerImg = document.getElementById('profilePicture');
+ if (headerImg) applyProfilePictureCrop(headerImg, crop);
+ } catch (err) {
+ toast(t('toast.upload_failed'), 'error');
+ }
+ } else {
+ // New upload: queue the crop and update the preview; upload happens on
+ // profile-form save (uploadProfilePicture will PUT the crop afterwards).
+ pendingProfilePictureCrop = crop;
+ const previewImg = document.getElementById('profilePreviewImg');
+ if (previewImg) applyProfilePictureCrop(previewImg, crop);
+ }
+ closeCropperModal();
+}
+
+function closeCropperModal() {
+ if (cropperInstance) { cropperInstance.destroy(); cropperInstance = null; }
+ const modal = document.getElementById('cropperModal');
+ if (modal) modal.style.display = 'none';
+ cropperMode = null;
+ cropperInitialCrop = null;
}
// Company logo upload
diff --git a/public/shared/i18n/de.json b/public/shared/i18n/de.json
index 3d32feb5..71ff6732 100644
--- a/public/shared/i18n/de.json
+++ b/public/shared/i18n/de.json
@@ -110,6 +110,13 @@
"copy_section.toast_error": "Der Abschnitt konnte nicht kopiert werden.",
"btn.save": "Speichern",
"btn.cancel": "Abbrechen",
+ "btn.reset_crop": "Zurücksetzen",
+ "form.adjust_picture": "Anpassen",
+ "form.adjust_hint": "Zum Verschieben ziehen, Schieberegler oder Zwei-Finger-Geste zum Zoomen.",
+ "form.zoom": "Zoom",
+ "modal.adjust_picture": "Profilbild anpassen",
+ "toast.crop_saved": "Profilbild angepasst",
+ "toast.no_picture": "Laden Sie zuerst ein Profilbild hoch.",
"btn.delete": "Löschen",
"btn.close": "Schließen",
"btn.save_changes": "Änderungen speichern",
diff --git a/public/shared/i18n/en.json b/public/shared/i18n/en.json
index 2db7fd30..910a5747 100644
--- a/public/shared/i18n/en.json
+++ b/public/shared/i18n/en.json
@@ -112,6 +112,7 @@
"btn.save": "Save",
"btn.cancel": "Cancel",
"btn.delete": "Delete",
+ "btn.reset_crop": "Reset",
"btn.close": "Close",
"btn.save_changes": "Save Changes",
"btn.done": "Done",
@@ -130,10 +131,14 @@
"modal.add_skill": "Add Skill Category",
"modal.edit_project": "Edit Project",
"modal.add_project": "Add Project",
+ "modal.adjust_picture": "Adjust Profile Picture",
"form.section_heading": "Section heading",
"form.profile_picture": "Profile Picture",
"form.show_profile_picture": "Show Profile Picture",
"form.choose_image": "Choose Image",
+ "form.adjust_picture": "Adjust",
+ "form.adjust_hint": "Drag to reposition, use the slider or pinch to zoom.",
+ "form.zoom": "Zoom",
"form.remove": "Remove",
"form.picture_hint": "Recommended: Square image, at least 200x200 pixels. JPEG, PNG or WebP.",
"form.apply_picture_globally": "Apply this picture to all datasets",
@@ -408,6 +413,8 @@
"toast.logo_deleted": "Logo deleted",
"toast.picture_deleted": "Picture deleted",
"toast.picture_in_use": "Picture is still in use and cannot be deleted.",
+ "toast.crop_saved": "Profile picture adjusted",
+ "toast.no_picture": "Upload a profile picture first.",
"toast.cannot_delete_picture": "Failed to delete picture",
"toast.order_saved": "Order saved",
"toast.order_failed": "Failed to save order",
diff --git a/public/shared/i18n/es.json b/public/shared/i18n/es.json
index 8ae59d64..7e2030ea 100644
--- a/public/shared/i18n/es.json
+++ b/public/shared/i18n/es.json
@@ -110,6 +110,13 @@
"copy_section.toast_error": "No se pudo copiar la sección.",
"btn.save": "Guardar",
"btn.cancel": "Cancelar",
+ "btn.reset_crop": "Restablecer",
+ "form.adjust_picture": "Ajustar",
+ "form.adjust_hint": "Arrastra para reposicionar, usa el deslizador o pellizca para hacer zoom.",
+ "form.zoom": "Zoom",
+ "modal.adjust_picture": "Ajustar foto de perfil",
+ "toast.crop_saved": "Foto de perfil ajustada",
+ "toast.no_picture": "Sube primero una foto de perfil.",
"btn.delete": "Eliminar",
"btn.close": "Cerrar",
"btn.save_changes": "Guardar cambios",
diff --git a/public/shared/i18n/fr.json b/public/shared/i18n/fr.json
index 057fcf45..41ea414f 100644
--- a/public/shared/i18n/fr.json
+++ b/public/shared/i18n/fr.json
@@ -110,6 +110,13 @@
"copy_section.toast_error": "Impossible de copier la section.",
"btn.save": "Enregistrer",
"btn.cancel": "Annuler",
+ "btn.reset_crop": "Réinitialiser",
+ "form.adjust_picture": "Ajuster",
+ "form.adjust_hint": "Faites glisser pour repositionner, utilisez le curseur ou pincez pour zoomer.",
+ "form.zoom": "Zoom",
+ "modal.adjust_picture": "Ajuster la photo de profil",
+ "toast.crop_saved": "Photo de profil ajustée",
+ "toast.no_picture": "Téléchargez d'abord une photo de profil.",
"btn.delete": "Supprimer",
"btn.close": "Fermer",
"btn.save_changes": "Enregistrer les modifications",
diff --git a/public/shared/i18n/it.json b/public/shared/i18n/it.json
index cc244ac3..789103f2 100644
--- a/public/shared/i18n/it.json
+++ b/public/shared/i18n/it.json
@@ -110,6 +110,13 @@
"copy_section.toast_error": "Impossibile copiare la sezione.",
"btn.save": "Salva",
"btn.cancel": "Annulla",
+ "btn.reset_crop": "Reimposta",
+ "form.adjust_picture": "Regola",
+ "form.adjust_hint": "Trascina per riposizionare, usa il cursore o pizzica per ingrandire.",
+ "form.zoom": "Zoom",
+ "modal.adjust_picture": "Regola foto profilo",
+ "toast.crop_saved": "Foto profilo aggiornata",
+ "toast.no_picture": "Carica prima una foto profilo.",
"btn.delete": "Elimina",
"btn.close": "Chiudi",
"btn.save_changes": "Salva modifiche",
diff --git a/public/shared/i18n/nl.json b/public/shared/i18n/nl.json
index dfb75f7a..208be662 100644
--- a/public/shared/i18n/nl.json
+++ b/public/shared/i18n/nl.json
@@ -110,6 +110,13 @@
"copy_section.toast_error": "De sectie kon niet worden gekopieerd.",
"btn.save": "Opslaan",
"btn.cancel": "Annuleren",
+ "btn.reset_crop": "Herstellen",
+ "form.adjust_picture": "Aanpassen",
+ "form.adjust_hint": "Sleep om te verplaatsen, gebruik de schuifregelaar of knijp om te zoomen.",
+ "form.zoom": "Zoom",
+ "modal.adjust_picture": "Profielfoto aanpassen",
+ "toast.crop_saved": "Profielfoto aangepast",
+ "toast.no_picture": "Upload eerst een profielfoto.",
"btn.delete": "Verwijderen",
"btn.close": "Sluiten",
"btn.save_changes": "Wijzigingen opslaan",
diff --git a/public/shared/i18n/pt.json b/public/shared/i18n/pt.json
index 4aa463b0..d6116a04 100644
--- a/public/shared/i18n/pt.json
+++ b/public/shared/i18n/pt.json
@@ -110,6 +110,13 @@
"copy_section.toast_error": "Não foi possível copiar a secção.",
"btn.save": "Guardar",
"btn.cancel": "Cancelar",
+ "btn.reset_crop": "Redefinir",
+ "form.adjust_picture": "Ajustar",
+ "form.adjust_hint": "Arraste para reposicionar, use o controlo deslizante ou aperte para ampliar.",
+ "form.zoom": "Zoom",
+ "modal.adjust_picture": "Ajustar foto de perfil",
+ "toast.crop_saved": "Foto de perfil ajustada",
+ "toast.no_picture": "Envie primeiro uma foto de perfil.",
"btn.delete": "Eliminar",
"btn.close": "Fechar",
"btn.save_changes": "Guardar Alterações",
diff --git a/public/shared/i18n/zh.json b/public/shared/i18n/zh.json
index 4fe77a68..33bd9284 100644
--- a/public/shared/i18n/zh.json
+++ b/public/shared/i18n/zh.json
@@ -110,6 +110,13 @@
"copy_section.toast_error": "无法复制该板块。",
"btn.save": "保存",
"btn.cancel": "取消",
+ "btn.reset_crop": "重置",
+ "form.adjust_picture": "调整",
+ "form.adjust_hint": "拖动以重新定位，使用滑块或双指缩放。",
+ "form.zoom": "缩放",
+ "modal.adjust_picture": "调整头像",
+ "toast.crop_saved": "头像已调整",
+ "toast.no_picture": "请先上传头像。",
"btn.delete": "删除",
"btn.close": "关闭",
"btn.save_changes": "保存更改",
diff --git a/public/shared/scripts.js b/public/shared/scripts.js
index a5151cce..ce0149ad 100644
--- a/public/shared/scripts.js
+++ b/public/shared/scripts.js
@@ -333,6 +333,39 @@ function escapeHtml(text) {
return div.innerHTML;
}
+// Apply stored crop metadata to a profile-picture  : '/uploads/picture.jpeg'}?${Date.now()})
+