Avisos
Vaciar todo

Modificar mi tema para que se muestren bien las imágenes de la home en el ordenador  

 
Stefano
 Stefano
Usuario experto

Buenos días (y feliz Navidad):

Esta es mi primera entrada en el foro. Tengo un problema con mi web de fotografía. Las imágenes que aparecen en la home son automáticamente adaptadas para que cubran todo el tamaño de la pantalla. Sin embargo, el css de la plantilla hace que las imágenes desborden los márgenes en todos los lados (top, bottom, left y right).

Me encantaría hacer que la adaptación no afectara el margen de arriba y que, si tuviera que hacerse alguna reconfiguracion vertical, esta se hiciera solo desbordando el margen inferior.

Ahora bien, el archivo que regula las funciones de la galería que aparece en mi home es –casi seguramente– el supersized.css

Sé que en el foro no habría que plantear preguntas acerca de CSS y os pido perdón de antemano pero a) he trasteado mucho y no consigo encontrar la solución; b) pagar a un informático por una línea de código no puedo permitírmelo 🙁

Os dejo el contenido del supersize.css (en el caso de que esta entrada incumpliera –más de lo que ya hace– las normas del foro, la borraré de inmediato):

img { border:none; }

#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; }

#supersized { display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:1; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/

#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.prevslide { z-index:-20; }
#supersized li.activeslide { z-index:-10; }
#supersized li.image-loading { background:#fff url(../images/loading.gif) no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img, #supersized li.activeslide img{ display:inline-block; }

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 24/12/2016 12:24 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Stefano,

Felices Fiestas!!!! para ti también de parte de todo el equipo de webempresa, estamos encantados de tenerte por aquí :cheer:

Sobre lo que nos comentas, esto es lo que yo veo:

Lo que no entiendo y discúlpame :blush: , es lo que comentas que se desborda.
Si nos adjuntas alguna captura con lo que quieres indicarnos nos seria de ayuda para poder localizarlo y orientarte en la mejor solución.

Un saludo

ResponderCitar
Respondido : 24/12/2016 1:25 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Stefano
 Stefano
Usuario experto

Hola Pepe! Felices fiestas a ti también!!!

Te adjunto la imagen que aparece en la web (adjunto 1) y la imagen original (adjunto 2). Como ves la distancia entre la cabeza de Iván Ferreiro y el top margin es mucho más pequeño en la web que en la foto original. De por sí esto es normal porque para adaptar la imagen al tamaño de la pantalla, CSS hace un resize de la imagen.

Lo que busco es que el resize no implique un desbordamiento del top margin, es decir, que si hace falta extender la imágen en sentido vertical, esto se haga solo extendiendo la foto por el bottom-margin.

Si no estoy confundido el CSS que rige la fullscreen gallery de la home es el que he copiado en mi primera entrada. Esto lo he determinado por el siguiente archivo gallery-fullscreen-cover.php:

ID);
$current_page_id = '';

if(isset($page->ID))
{
$current_page_id = $page->ID;
}

//Check if gallery template
$grandphotography_page_gallery_id = grandphotography_get_page_gallery_id();
if(!empty($grandphotography_page_gallery_id))
{
$current_page_id = $grandphotography_page_gallery_id;
}

//Check if password protected
get_template_part("/templates/template-password");

$grandphotography_homepage_style = grandphotography_get_homepage_style();

$tg_full_menu_transparent = kirki_get_option('tg_full_menu_transparent');

if(THEMEDEMO && isset($_GET['nocrop']) && !empty($_GET['nocrop']))
{
$tg_full_menu_transparent = '';
}

if(empty($tg_full_menu_transparent))
{
$grandphotography_homepage_style = 'fullscreen_white';
}
else
{
$grandphotography_homepage_style = 'fullscreen';
}
grandphotography_set_homepage_style($grandphotography_homepage_style);

get_header();

$nocrop_query = '';
if(THEMEDEMO && isset($_GET['nocrop']))
{
$nocrop_query.= '&nocrop=1';
}

//Run gallery script data
wp_enqueue_style("supersized", get_template_directory_uri()."/css/supersized.css", false, THEMEVERSION, "all");

wp_enqueue_script("supersized", get_template_directory_uri()."/js/supersized.3.2.7.min.js", false, THEMEVERSION, true);
wp_enqueue_script("supersized-shutter", get_template_directory_uri()."/js/supersized.shutter.min.js", false, THEMEVERSION, true);
wp_enqueue_script("touchwipe", get_template_directory_uri()."/js/jquery.touchwipe.1.1.1.js", false, THEMEVERSION, true);
wp_enqueue_script("grandphotography-supersized-gallery", admin_url('admin-ajax.php')."?action=grandphotography_script_supersized_gallery&gallery_id=".$current_page_id.$nocrop_query, false, THEMEVERSION, true);
?>


ResponderCitar
Respondido : 24/12/2016 1:35 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Stefano.

Puede ser que estés utilizando Revslider para la galería de imágenes?

Si estas utilizando ese plugin, la alineación de la imagen la puedes realizar desde las opciones de las imágenes o desde el apartado Background si las imágenes son de Background del slider:

Un saludo

ResponderCitar
Respondido : 24/12/2016 2:38 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Stefano
 Stefano
Usuario experto

Hola Pepe... no, no estoy utilizando el RevSlider. Incluso lo acabo de desactivar y como puedes ver esto no afecta al funcionamiento de mi web. La solución tiene que estar en otro lado... ¿No crees que habría que trastear el supersize.css que he cortado/pegado antes?

ResponderCitar
Respondido : 24/12/2016 2:43 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola Stefano

Veo que hay un top con un margen negativo en la imagen, prueba con el siguiente código CSS:

#supersized li.prevslide img, #supersized li.activeslide img#supersized li.prevslide img, #supersized li.activeslide img{
	top:0!important;
}

Puedes agregar este código al final de algún archivo CSS, como:
/wp-content/themes/grandphotography/css/jqueryui/custom.css

Felices Fiestas!!

Saludos.

ResponderCitar
Respondido : 24/12/2016 3:32 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Stefano
 Stefano
Usuario experto

Gracias gracias gracias.
Llevaba semanas con este asunto... Qué alegría :silly:

ResponderCitar
Respondido : 24/12/2016 4:15 pm
Stefano
 Stefano
Usuario experto

Una pregunta, ¿sería posible limitar la siguiente función solo para el desktop (excluyendo móviles y tabletas)? ¿O por lo menos limitándola a un determinado tamaño de la pantalla?

#supersized li.prevslide img, #supersized li.activeslide img#supersized li.prevslide img, #supersized li.activeslide img{
top:0!important;
}

ResponderCitar
Respondido : 24/12/2016 5:41 pm

Cursos Gratuitos WordPress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Si es posible, puedes usar un media query, por ejemplo para tamaños de pantalla mayores a 980px

@media (min-width:980px){
	#supersized li.prevslide img, #supersized li.activeslide img#supersized li.prevslide img, #supersized li.activeslide img{
	top:0!important;
	} 
}

Saludos.

ResponderCitar
Respondido : 24/12/2016 7:00 pm