CSS para superponer imágenes con custom-field

  • Autor Autor sebasxnco
  • Fecha de inicio Fecha de inicio
S

sebasxnco

Épsilon
hola forobeta alguien sabe o conoce algún tutorial para hacer esto con css

Enlace eliminado

Lifehacker, tips and downloads for getting things done
montar la imagen de play encima de la imagen del post

y la forma de identificarlo sea con un custom-field

<span class="<?php echo get_post_meta($post->ID, "play", true);?>" >
</span>
 
Última edición:
Tenes que ser más descriptivo con el titulo :top:
 
Si quieres nada la mas la imagen de "play" sobre la imagen del vídeo, es con CSS.
Si quieres además agregar interacción, necesitas un poco de magia javascript.
 
yo tengo en el codigo del index lo siguiente

PHP:
<div class="entry">
	<div class="post" id="post-<?php the_ID(); ?>">

<span class="custom_image" >
<a href="<?php the_permalink() ?>" rel="bookmark" title="Leer El Resto De: <?php the_title_attribute(); ?>"> 
<span class="<?php echo get_post_meta($post->ID, "play", true);?>" >//span del boton play que le agrego custom.field para que se muestre solo donde quiera//
<img src="<?php echo get_post_meta($post->ID, "Image", true);?>" />// imageen del pst
</span>// cierra estilo del play
</a>
</span>// cierra imagen



	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Leer El Resto De: <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
	</h2>
	<span class="content">



 
<?php the_excerpt(); ?>
 

       

	</span>
	<div class="clearfloat"></div>
	<div class="allinfos">
	<span class="alignright">
	[<a href="<?php the_permalink() ?>" rel="bookmark" title="Leer el resto De <?php the_title(); ?>"> Leer Completo </a>]
	</span>
	<span class="date"><?php the_time('F jS, Y') ?></span> | <span class="comments"><?php comments_popup_link('No Hay Comentarios', '1 Comentario', '% Comentarios'); ?> </span> | <span class="category">Alojado En </span><?php the_category(', ') ?> | <?php edit_post_link('editar', '', ''); ?> | <span class="view"><?php the_views(); ?></span>


	</div>

Insertar CODE, HTML o PHP:
.videop { 
background: url('http://cdn.contactogeek.com/video-post.png');
background-repeat:no-repeat;
width: 38px; 
height: 38px; 
bottom:auto;
right: 2px;}
display: block;
}
 
Última edición:
Tengo algunos comentarios:
0. Yo pienso que será mas efectivo usar capas (DIV) en lugar de inlines (SPAN), pero puedes tratar.
1. Colocar en el mismo contenedor (DIV o SPAN) ambas imagenes, al botón le das una posición absoluta.
2. Por esto mismo, el botón play solo debe aparecer cuando haya un valor en el campo personalizado 'play'

El procedimiento sería mas o menos este:
1. Escribo un post y pongo una thumbnail que es una captura de video
2. Como es un video, coloco en el campo personalizado 'play' un valor cualquiera, por ejemplo: "este post tiene un video, asi que botón de play, te invoco"
3. En mi plantilla, tengo en un mismo contenedor DIV el thumbnail del post y
4. Una condicional que dice:
- Si el campo personalizado play está vacío, no hagas nada.
- Si el campo personalizado play NO ESTA vacío, pon esta imagen en posición absoluta.
5. Ya.
 
nada que funciona y cuando le pongo position: absolute; me deforma el sitio

Si quieres nada la mas la imagen de "play" sobre la imagen del vídeo, es con CSS.
Si quieres además agregar interacción, necesitas un poco de magia javascript.


tienes algun ejemplo de un boton con javascript y eso que dices asi como acá en Gizmovil
 
Atrás
Arriba