Personalización de Componente anidado “foto”

🧩 Introducción #

El componente “foto" es una plantilla anidada utilizada para mostrar la fotografía del asesor dentro del componente “perfilAsesor". Este archivo se encarga de renderizar una imagen circular con el retrato del asesor, asegurando una presentación visual uniforme y profesional.

En caso de que el asesor no cuente con una imagen personalizada, el sistema mostrará automáticamente el logotipo predeterminado del sitio, aprovechando la configuración del logo en el tema de WordPress.

Este componente puede ser sobrescrito desde el tema hijo para personalizar su diseño, clases CSS o lógica condicional.

---

👁️ Vista del Componente #

Este componente muestra:

• La imagen de perfil del asesor en un formato circular.
• Un diseño tipo “avatar corporativo”, acompañado opcionalmente de marco, borde o fondo.
• En ausencia de imagen personalizada, se muestra el logotipo definido por el sitio.

---

🧱 Código del Componente #

<?php if (!empty($asesor->fotoUrl())) { ?>
    <img src="<?php echo $asesor->fotoUrl(); ?>" class="card-img-top text-center img-thumbnail"
        alt="<?php echo $asesor->nombre(); ?>" />
<?php } else {
    $custom_logo_id = get_theme_mod('custom_logo');
    $logo_url = wp_get_attachment_image_url($custom_logo_id, 'full');
    ?>
    <img src="<?php echo $logo_url; ?>" class="custom card-img-top text-center img-thumbnail"
        alt="<?php echo $asesor->nombre(); ?>" />
<?php } ?>

---

🛠️ ¿Qué se puede personalizar? #

1. Fuente de imagen del asesor
   • El método $asesor->fotoUrl() puede ser modificado para apuntar a una fuente diferente, como una CDN o campo personalizado.
2. Clases CSS aplicadas
   • card-img-top, text-center, img-thumbnail pueden ser reemplazadas por clases propias o de frameworks externos (Tailwind, UIkit, etc.).
3. Diseño de respaldo
   • Puedes modificar el comportamiento por defecto cuando no hay foto del asesor:
     • Mostrar una imagen genérica.
     • Usar íconos SVG o avatars animados.
     • Omitir la imagen completamente.
4. Logo por defecto del sitio
   • El código recupera el logo desde get_theme_mod('custom_logo'), lo cual puede cambiarse por otra imagen según el branding o la sección del sitio.
5. Formato o estilos adicionales
   • Se pueden agregar bordes, filtros CSS, marcos redondeados o efectos visuales directamente desde este componente.

---

📁 Ruta del Componente #

Ubicación original en el plugin:

asesores/componentes/asesores/foto.php

Ruta para sobrescribirlo en tu tema hijo:

visualinmueble/
└── templates/
    └── asesores/
        └── componentes/
            └── asesores/
                └── foto.php

📌 Recuerda mantener la misma estructura y nombre de archivo en tu tema hijo para que la sobrescritura funcione correctamente.