Problemas con escalado de imagen en slider de Graphene

  • Autor Autor jorge94
  • Fecha de inicio Fecha de inicio
J

jorge94

Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola a todos.

Estoy utilizando el tema graphene y me estoy peleando mucho con el slider (que muestra la foto destacada de cada entrada).

No consigo que la imagen se adapte (escale) a lo que ocupa el slider. Lo que hace es rellenarla como si fuera otro mosaico.

HDR4lfl.png



Por más que le doy vueltas a todo no doy con la tecla.
Muchas gracias a todos.
 
por lo general, la imagen de fondo la ponen mediante la propiedad css background o background-image, busca que clase especial usa ese slider y agregale " background-size: cover;" (sin comillas)
 
dos cosas a probar .
modifica el css del slider (como te han dicho :distant: arriba ).

O simplemente cambiar el tamaño de la imagen para que se adapte al slider , creo que usas imágenes un tanto cuadradas y eso lo debería de cambiar por imágenes de un tipo rectangular .

lo mejor seria cambiar el css pero al usar cover la imagen se vería muy escalada y posiblemente no se distinguiría. a si que yo usaría imágenes mas rectangulares .
 
Muchas gracias.

Me sale con todas las imágenes, hasta las que escalo yo que son rectangulares.

¿En qué archivo tengo que añadir esas líneas?
 
Puedes hacerlo en el archivo de style.css o puedes incluirlo en la sección de CSS personalizado, ya sea en la sección de personalizar de WP o en la sección de tu theme que tenga esa función

en cualquier caso creo que lo mejor es implementar ambas soluciones, tanto usar el css, como utilizar solamente imágenes rectangulares para los sliders
 
Muchas gracias. He estado haciendo pruebas intentado introducir esa línea, pero no se muy bien dónde ponerla, y en los sitios donde he probado no me sale. Os dejo un fragmento del slider de stilo.css. Lo he puesto en todos ellos.

Insertar CODE, HTML o PHP: 
.featured_slider {
    -pie-background: linear-gradient(left top, #0F2D4D, #2880C3);
	background: #0F2D4D;
	background: -moz-linear-gradient(left top, #0F2D4D, #2880C3);
	background: -webkit-linear-gradient(left top, #0F2D4D, #2880C3);
	background: -o-linear-gradient(left top, #0F2D4D, #2880C3);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='#0F2D4D', EndColorStr='#2880C3')";
	background: linear-gradient(left top, #0F2D4D, #2880C3);
	margin-bottom: 20px;
	padding: 25px 0;
	position: relative;
	width: 100%;
	clear: both;
}
.full-width-slider .featured_slider {
	margin: 0 10px 20px;
}
.bottom-slider .featured_slider {
	margin-bottom: 0;
}
.bgimage-excerpt.featured_slider {
	padding: 0;
	-pie-background: none;
	background: none;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='false')";
}
.thumbnail-excerpt.featured_slider {
	margin-bottom: 30px;
}
.featured_slider #slider_root {
	background: #fff;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	height: 240px;
	width: 100%;
}
.three-col-right .bgimage-excerpt.featured_slider #slider_root {
	margin-left: 0;
}
.bgimage-excerpt.featured_slider #slider_root {
	-moz-box-shadow: 0 0 5px #555;
	-webkit-box-shadow: 0 0 5px #555;
	box-shadow: 0 0 5px #555;
}
.featured_slider .slider_items {
	position: absolute;
	width: 20000em;
	height: 100%;
}
.sliderpost_featured_image {
	float: left;
	margin: 4px 1em 12px 0;
}
.sliderpost_featured_image img {
	-moz-box-shadow: 0 0 5px #555;
	-webkit-box-shadow: 0 0 5px #555;
	box-shadow: 0 0 5px #555;
}
.slider_post {
	float: left;
	position: relative;
	height: 100%;
}
.slider-entry-wrap {
	margin: 20px;
}
.fade .slider_post {
	position: absolute !important;
	left: 0;
	top: 0;
	display: none;
}
.slider_post_entry p{
	margin-bottom: 10px;
}
.bgimage-excerpt .slider_post {
	padding: 0;
	position: relative;
	height: 100%;
}
.slider-bgimage {
	position: absolute;
	left: 0;
	top: 0;
	max-width: 100%;
	height: auto;
}

.sliderpost_featured_image {
	margin: 20px 1em 1em 20px;
}
.bgimage-excerpt .slider-entry-wrap {
	background: url(images/black70.png) repeat;
	background: rgba(0, 0, 0, 0.8);
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	margin: 0;
	z-index: 10;
}
.slider_post .permalink-overlay {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
}
.slider_post .permalink-overlay span {
	display: none;
}
.bgimage-excerpt .slider-entry-wrap .slider-content-wrap {
	padding: 5px 10px;
}
.bgimage-excerpt .slider_post h2 a,
.bgimage-excerpt .slider_post h2 a:visited {
	color: #fff;
	font: normal 20px "Pontano Sans", arial, sans-serif;
}
.bgimage-excerpt .slider_post_entry p {
	color: #ccc;
}
.slider_post h2 {
	border-bottom: none;
}
.slider_post h2 a,
.slider_post h2 a:visited {
	font: normal 26px georgia;
}
.slider_post a.continue_reading {
	display: none;
}


.slider_nav {
	clear: both;
	height: 10px;
	margin-top: 5px;
	text-align: center;
	width: 100%;
}
.thumbnail-excerpt .slider_nav {
	position: absolute;
	bottom: -15px;
}
.slider_nav a span {
	display: none;
}
.slider_nav a,
.slider_nav a:visited {
	background: url(images/sprite_master.png) -80px -37px no-repeat;
	display: inline-block;
	margin: 0 3px;
	width: 10px;
	height: 10px;
}
.slider_nav a.active,
.slider_nav a.active:visited,
.slider_nav a:hover {
	background-position: -68px -37px;
}

¿En qué lado debe ir el background-size: cover;?
 
Última edición:
acabo de probar el theme para poder ayudarte mejor y esto es lo que tienes que colocar en la sección de CSS personalizado que encuentras en "Apariencia"

test-.webp

con eso abarcarán todo el ancho de tu slider, aunque se volverá un poco más dificil controlar la parte de la imagen que se muestra, te aconsejo utilizar el alto en pixeles que tenga tu imagen y usar siempre el mismo formato de imagen para tus sliders, por ejemplo: 1920 x 600 px
 
Muchísimas gracias Tglex, eres un crack!

Mi idea es poner el slider para que ocupe todo el ancho de la pantalla, en ajustes/apariencia/OpcionesDelTema/Ampliar el pase de diapositivas para que ocupe toda la anchura del tema.

Y he añadido este código en el css personalizado para que no muestre el título de la noticia debajo, por lo que me queda un simple pase de diapositivas:

Insertar CODE, HTML o PHP: 
.full-sized .slider-entry-wrap {
    display: none;
}

En las opciones generales del tema tengo la altura de la diapositiva en 400px.

No se sigue escalando del todo:

RZgbo2I.png




¿Qué resolución de imagen debería de tener ahora que editado la altura y lo he puesto para que ocupe todo el ancho de la pantalla?

Muchas gracias, perdón por las molestias!


Edito: He mirado los px que son el slider tras cambiar esa opción y es 1000x362. Me he descargado una imagen de ese tamaño y la he puesto y funciona perfecto. Así que escalaré todas las imágenes a esa. Muchas gracias!

- - - Actualizado - - -

Tglex dijo:
acabo de probar el theme para poder ayudarte mejor y esto es lo que tienes que colocar en la sección de CSS personalizado que encuentras en "Apariencia"

con eso abarcarán todo el ancho de tu slider, aunque se volverá un poco más dificil controlar la parte de la imagen que se muestra, te aconsejo utilizar el alto en pixeles que tenga tu imagen y usar siempre el mismo formato de imagen para tus sliders, por ejemplo: 1920 x 600 px
Hacer clic para expandir...


Perdona Tglex.

Ya que tienes el tema instalado, por casualidad sabes cómo quitar esto:

DpnwyoM.png


Quiero dejar la imagen entera sin que salga al lado izquierdo de la foto eso. No veo ninguna opción del tema y en la web del autor no encuentro nada.

Lo que hice fue hacer una nueva entrada y ponerla como tipo imagen, pero no me gusta que salga esa columna a la izquierda.
 
Última edición:
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba