Tabla de contenidos
¡Hola! Para personalizar el componente de multimedia de inmueble en el detalle de un inmueble, debes seguir estos sencillos pasos. Recuerda que, al modificar el diseño o los datos de este componente, es importante tener en cuenta que el soporte sobre el componente afectado no estará disponible y es posible que no se apliquen futuros cambios, mejoras o actualizaciones al componente. ¡Vamos a ello!
Pasos para personalizar la multimedia de inmueble: #
- Lo primero que debes hacer es crear una carpeta en la raíz del tema de tu página web y nombrarla “visualinmueble”.
- Dentro de la carpeta “visualinmueble”, crea otra carpeta llamada “templates”.
- Luego, dentro de la carpeta “templates”, crea una nueva carpeta llamada “inmuebles”.
- A continuación, dentro de la carpeta “inmuebles”, crea otra carpeta llamada “componentes”. Dentro de esta carpeta, crea una última carpeta llamada “detalleInmueble”.
- Ahora, crea un archivo dentro de la carpeta “detalleInmueble” y nombralo “sliders.php”. Este archivo reemplazará al archivo predeterminado del plugin.
- Abre el archivo “sliders.php” y encontrarás el siguiente código:
<div class="col-md-12">
<!---- SE PRESENTA EL TAB DE LOS DIFERENTES OPCIONES DISPONIBLES DE PRESENTACIÓN DE MULTIMEDIA ------>
<ul class="nav nav-tabs tabs-media" id="tabCabeceraInmueble" role="tablist">
<!---- TAB DE FOTOS NORMALES ---->
<li class="nav-item" role="presentation">
<button class="nav-link active" id="fotos-tab" data-bs-toggle="tab"
data-bs-target="#fotos" type="button" role="tab" aria-controls="fotos"
aria-selected="true">
<i class="icon icon-uniE931"></i> Fotos
</button>
</li>
<!---- SI EL INMUEBLE TIENE FOTOS 360 EL TAB DE FOTOS 360 SE MOSTRARÁ ----->
<?php if (count($slider["s360"]) > 0) { ?>
<li class="nav-item" role="presentation">
<button class="nav-link" id="fotos-360-tab" data-bs-toggle="tab"
data-bs-target="#fotos360"
type="button" role="tab" aria-controls="fotos360" aria-selected="false">
<i class="icon icon-uniE9A2"></i> Fotos 360
</button>
</li>
<?php } ?>
<!---- SI EL INMUEBLE TIENE VIDEOS EL TAB DE VIDEOS SE MOSTRARÁ ----->
<?php if (!empty($slider["video"])) : ?>
<li class="nav-item videos-inmueble" role="presentation">
<button class="nav-link" id="video-tab" data-bs-toggle="tab"
data-bs-target="#video"
type="button" role="tab" aria-controls="video" aria-selected="false">
<i class="icon icon-uniE932"></i> Video
</button>
</li>
<?php endif; ?>
<!---- SI EL INMUEBLE TIENE RECORRIDOS 360 EL TAB DE RECORRIDOS 360 SE MOSTRARÁ ----->
<?php if (!empty($slider["video360"])) { ?>
<li class="nav-item" role="presentation">
<button class="nav-link" id="video360-tab" data-bs-toggle="tab"
data-bs-target="#video360"
type="button" role="tab" aria-controls="video360" aria-selected="false">
<i class="icon icon-uniE932"></i> Recorrido 360
</button>
</li>
<?php } ?>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="fotos" role="tabpanel"
aria-labelledby="fotos-tab">
<!---- VERIFICA EL TIPO DE SLIDER A USAR SEGÚN LA CONFIGURACIÓN DEL PLUGIN, RECORDAR QUE LAS OPCIONES SON OWL CARROUSEL Y LIGHT GALLERY LA CUAL ES LA OPCIÓN POR DEFECTO ------>
<?php if (\Codwelt\WordPress\VisualInmueble\Configuracion::checkConfiguracion("filtros",'sliderDetalleInmueble') == 1) { ?>
<!----- SE ITERAN LAS FOTOS ------->
<ul id="visualinmo-inmueble-slider" style="width: 100%;">
<?php foreach ($slider["fotos"] as $foto): ?>
<li data-thumb="<?php echo $foto->url(); ?>" data-src="<?php echo $foto->url(); ?>">
<img src="<?php echo $foto->url(); ?>" class="itemslider" alt="<?php echo $nombre; ?>"/>
</li>
<?php endforeach; ?>
</ul>
<?php } else { ?>
<!----- SE ITERAN LAS FOTOS ------->
<div class="owl-carousel owl-carousel-image owl-theme">
<?php foreach ($slider["fotos"] as $foto): ?>
<div class="item">
<img src="<?php echo $foto->url(); ?>" style="height:55vh;width:auto;"/>
</div>
<?php endforeach; ?>
</div>
<script>
jQuery(function ($) {
$(document).ready(function () {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: false,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 2
}
}
});
});
});
</script>
<?php } ?>
</div>
<!---- SI EL INMUEBLE TIENE FOTOS 360 EL TAB DE FOTOS 360 SE MOSTRARÁ MONTANDO UN COMPONENTE DE VUE EL CUAL TIENE TODA LA VISUALIZACIÓN DE LAS FOTOS 360----->
<?php if (count($slider["s360"]) > 0) { ?>
<div class="tab-pane fade" id="fotos360" role="tabpanel" aria-labelledby="fotos360-tab">
<visualinmueble-slider360></visualinmueble-slider360>
<script type="text/javascript">
window.VISUALINMUEBLE_FOTOS = <?php echo json_encode($slider["s360"], JSON_PRETTY_PRINT);?>;
window.VISUALINMUEBLE_SITE_URL = "<?php echo \get_site_url(); ?>";
</script>
</div>
<?php } ?>
<!---- SI EL INMUEBLE TIENE VIDEOS EL TAB DE VIDEOS SE MOSTRARÁ CON UN IFRAME EN DONDE IRÁ EL LINK DE VISUALIZACIÓN DEL VIDEO ----->
<?php if (!empty($slider["video"])) : ?>
<div class="tab-pane fade" id="video" role="tabpanel" aria-labelledby="video-tab">
<iframe src="<?php echo $slider["video"]->url(); ?>"
title="<?php echo $nombre; ?>" frameborder="0"
style="width: 100%; height: 50vh;"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<?php endif; ?>
<!---- SI EL INMUEBLE TIENE RECORRIDOS 360 EL TAB DE RECORRIDOS 360 SE MOSTRARÁ CON UN IFRAME DONDE ESTARA EL LINK PÚBLICO DE VISUALIZACIÓN DEL RECORRIDO 360 ----->
<?php if (!empty($slider["video360"])) { ?>
<div class="tab-pane fade" id="video360" role="tabpanel" aria-labelledby="video360-tab">
<iframe src="<?php echo $slider["video360"]->url(); ?>"
title="<?php echo $nombre; ?>" frameborder="0"
style="width: 100%; height: 50vh;"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<?php } ?>
</div>
</div>Una vez hayas pegado y guardado este código en el archivo “sliders.php”, podrás cambiar la forma de visualización de cada una de las opciones multimedia. También podrás insertar tu propio código HTML y personalizar el componente a tu gusto o modificar el tab de bootstrap que usa el plugin.
Recuerda que estos pasos son específicos para personalizar el componente de multimedia en tu sitio web de WordPress. ¡Esperamos que disfrutes personalizando este componente y que le des un toque único y especial a tu página web inmobiliaria! Si tienes alguna duda o necesitas ayuda adicional, ¡estamos aquí para ayudarte en todo lo que necesites!
