Componente “cover-image”

👀 Vista del componente #

Este componente muestra la imagen de portada del inmueble junto con diferentes etiquetas (badges) que indican el estado de la propiedad, su tipo de gestión (venta/arriendo), así como características especiales como destacado, de lujo o verificado.

📸 Ejemplo visual:

---

📝 Descripción #

El componente cover-image se encarga de renderizar la portada del inmueble con estilos personalizados, controlando su disponibilidad (vendido o arrendado) y mostrando información relevante mediante insignias (badges).

Además, puede funcionar con un enlace al detalle del inmueble o sin él, según la configuración recibida en los atributos.

---

⚙️ ¿Cómo funciona? #

<?php
$checkLink = !(isset($attrs) && isset($attrs['withLinktoDetail']) && $attrs['withLinktoDetail'] == false);
?>
<?php
if ($checkLink) :
?>
    <a href="<?php echo visualinmu_route_detalleInmueble($inmueble->slug()); ?>" class="inmueblelink" target="_blank">
    <?php
endif;
    ?>
    <style>
    .property-noavaliable::after {
        content: "<?php echo $inmueble->gestion()->esAriendo() ?  __('ARRENDADO','visualinmueble') : __('VENDIDO','visualinmueble') ?>"; 
    }
    </style>
    <div class="imagenportada portada<?php echo $cont; ?> <?php echo $inmueble->retirado() ? 'property-noavaliable' : ''?>" style=" background: url(<?php echo $inmueble->fotoPortada(); ?>);  background-size: cover; background-position: center; ">
        <?php if ($inmueble->gestion()->esArriendoVenta()) : ?>
            <span class="badge rounded-pill bg-primary">Venta</span>
            <span class="badge rounded-pill bg-primary">Arriendo</span>
        <?php elseif ($inmueble->gestion()->esAriendo()) : ?>
            <span class="badge rounded-pill bg-primary">Arriendo</span>
        <?php else : ?>
            <span class="badge rounded-pill bg-primary">Venta</span>
        <?php endif; ?>
        <?php foreach ($inmueble->tags() as $tag) { ?>
            <?php if ($tag->key() === "VISUALINMU_DESTACADO" || $tag->key() == "DESTACADO") { ?>
                <span class="badge rounded-pill bg-primary badgePropiedadDestacada">Propiedad destacada</span>
            <?php } ?>
            <?php if ($tag->key() === "VISUALINMU_DELUJO") { ?>
                <span class="badge rounded-pill bg-primary badgePropiedadDeLujo">Propiedad de lujo</span>
            <?php } ?>
            <?php if ($tag->key() === "VISUALINMU_VERIFICADO") { ?>
                <span class="badge rounded-pill bg-primary badgePropiedadverificada" data-bs-toggle="tooltip" data-bs-placement="top" title="Este inmueble y sus propietarios fueron previamente verificados a través de nuestro software de análisis jurídico y se encuentra CALIFICADA para ser comercializada; encuentra la información legal de esta propiedad descargando gratis la ficha técnica."><i class="icon-homlity icon-uniE9AF"></i> Propiedad verificada</span>
            <?php } ?>            
        <?php } ?>
    </div>
<?php if ($checkLink) : ?>
    </a>
<?php endif; ?>

1. Validación del enlace al detalle
   • El parámetro withLinktoDetail define si la imagen llevará un enlace al detalle del inmueble.
   • Por defecto, sí lleva enlace, salvo que el atributo sea explícitamente false.
   $checkLink = !(isset($attrs) && isset($attrs['withLinktoDetail']) && $attrs['withLinktoDetail'] == false);
2. Estado de disponibilidad
   • Si el inmueble está retirado, se agrega la clase property-noavaliable.
   • Mediante pseudo-elemento ::after, se imprime el texto “ARRENDADO” o “VENDIDO” sobre la imagen, dependiendo de la gestión.
   .property-noavaliable::after { content: "ARRENDADO" o "VENDIDO"; }
3. Imagen de portada
   • Se coloca como background CSS, con cover y center para ajustar la visualización.
   • Se genera de la función fotoPortada().
   style="background: url(<?php echo $inmueble->fotoPortada(); ?>); background-size: cover; background-position: center;"
4. Insignias de gestión
   • Si el inmueble está disponible tanto en venta como arriendo, se muestran ambos badges.
   • Si es solo arriendo → Arriendo.
   • Si es solo venta → Venta.
5. Insignias de características
   Se recorren los tags del inmueble, y dependiendo del valor, se muestran badges especiales:
   • 🔹 Propiedad destacada (VISUALINMU_DESTACADO o DESTACADO).
   • 💎 Propiedad de lujo (VISUALINMU_DELUJO).
   • ✅ Propiedad verificada (VISUALINMU_VERIFICADO), con tooltip explicativo.

---

🎨 Personalización disponible #

El componente permite personalizar diferentes aspectos:

1. Texto de disponibilidad
   • Cambiar lo que aparece cuando la propiedad está retirada (ej. “VENDIDO” → “NO DISPONIBLE”).
   content: "Texto personalizado";
2. Enlace a detalle
   • Controlar si la imagen debe redirigir o no al detalle del inmueble con el atributo withLinktoDetail.
   $attrs['withLinktoDetail'] = false;
3. Imagen de portada
   • Cambiar el estilo de fondo (background-size, background-position).
   • Reemplazar fotoPortada() por otra fuente de imagen.
4. Insignias (badges)
   • Editar el texto o los estilos de los badges (ej. colores, posición, íconos).
   • Agregar nuevos badges según etiquetas adicionales en $inmueble->tags().
5. Clases CSS adicionales
   • imagenportada, property-noavaliable, badgePropiedadDestacada, etc.
   • Permiten modificar la presentación visual desde CSS sin tocar la lógica PHP.