[SOLUCIONADO] imagen diagonal

[el_tigre]

Amigos estoy usando WP y mi presentación es mostrando las miniaturas + el título del post, estoy intentando crear un imagen diagonal cada vez que ingreso un post nuevo y que esta imagen debe estar visible por una semana.....¿alguna idea de cómo debo hacerlo?

La imagen es esta.....

[mardojai]

Si tu pregunta es como programar para que solo se muestre una semana después de ser publicado, deberías de preguntar en PHP,

Si quieres saber como colocar la imagen vertical seria así:

Código HTML:

<div class="libro">
    <img class="nuevo" src="imagen_de_la_esquina" />
    <div class="contenido">
        <p>Leído 680 veces</p>
    </div>
</div>
 

Código CSS:

.libro {
    position: relative;
    width: 150px;
    height: 200px;
}
 
.nuevo {   
    left: 0px;
    position: absolute;
    top: 0px;   
}
 

Puedes verlo aquí: https://jsfiddle.net/5a5jbvwh/1/

Para la "imagen_de_la_esquina" te recomiendo algo así: http://acf.bones.com/skin/frontend/s...t-l-corner.png

[mardojai]

También puedes poner un div con la imagen de fondo:

Código HTML:

<div class="libro">
    <div class="nuevo"></div>
    <div class="contenido">
        <p>Leído 680 veces</p>
    </div>
</div>
 

Código CSS:

.libro {
    position: relative;
    width: 150px;
    height: 200px;
}
 
.nuevo {
    background: url('imagen_de_la_esquina') no-repeat;
    height: 70px;
    left: 0px;
    position: absolute;
    top: 0px;   
    width: 70px;
}
 

Ejemplo: https://jsfiddle.net/690stsp6/

[el_tigre]

Muchas gracias amigo.

[mardojai]

No olvides de marcarlo como solucionado xD

[pzin]

Una solución solo con CSS:

Código CSS:

div {
  position: relative;
  width: 200px;
  height: 280px;
  border: 1px solid;
  overflow: hidden;
}
 
div:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  background: #f00;
  content: 'nuevo';
  transform: translate(-25%, 50%) rotate(-45deg);
}
 

[mardojai]

Pensé en :before, pero recordé que lo quería para wordpress, y pensé que sería mejor con un div que pueda condicionar con php. Pero ahora que pienso, puede condicionar el class que tenga ese :before.

Buen aporte! +1, Saludos!

[caricatos]

Hola:

Otra opción: imágenes svg (hasta con animaciones)

Saludos

[siddartha23]

Y para implementarlo en wordpress necesitas usar un custom-field en cada post nuevo que haces, luego dentro del loop llamas a la función get_post_meta() y con un condicional programas si se va mostrar el mensaje nuevo o no...

[el_tigre]

Iniciado por siddartha23

Y para implementarlo en wordpress necesitas usar un custom-field en cada post nuevo que haces, luego dentro del loop llamas a la función get_post_meta() y con un condicional programas si se va mostrar el mensaje nuevo o no...

ni idea de cómo llamarlo con un condicional amigo.

[mardojai]

Algo así:

Código PHP:

<?php global $wp_query; $postid = $wp_query->post->ID;
        $new =  get_post_meta($postid, 'NEW', true);
        if($new) {
            echo '<div class="nuevo"></div>'; } 
        ?>
 

El "<div class="nuevo"></div>" lo puedes cambiar por el método que hayas elegido para poner la etiqueta de "nuevo".

Y en los post que quieras mostrar el cartelito de "nuevo", le pones un custom-field con el nombre "NEW".

Edito: Si quieres que este en español, solo cambia en el código donde dice "NEW", y cámbialo por ejemplo con "NUEVO", y así ahora el nombre del custom-field seria "NUEVO".

Saludos!

[el_tigre]

Perfecto amigos, pero usar el Custom-field ya hace que el trabajo sea manual...osea si quiero mostrar el NEW por una semana...habrá que modificar el post dentro de una semana para retirar el NEW.....y si tengo 50 new? :s

[mardojai]

Me la estoy jugando tremendamente siendo un novato en php xD
Pero se me ocurrió esto, es para el loop de tus posts:

Código PHP:

<?php 
$local_timestamp = time();
$segundos_semana = 604800;
$tiempo_total = $local_timestamp - $segundos_semana;
 
if ($tiempo_total < get_the_time('U');) {
  echo '<div class="nuevo"></div>';
}
?>
 

Ojala te funcione xDD

[mardojai]

Lo mejoro y lo anoto:

Código PHP:

<?php 
$tiempo_de_publicado = time() - 604800; // Restamos los segundos de una semana a el tiempo unix (en segundos) actual.
 
if ($tiempo_de_publicado < get_the_time('U'))  { // Si la resta es menor al tiempo unix (en segundos) en que se publico el post, mostramos el cartel.
  echo '<div class="nuevo">dsdsd</div>';
}
?>
 

[el_tigre]

Amigos ya quedó con este código

Código PHP:

  <?php
    $post_date = strtotime( $post->post_date );
    $limit_time = time() - ( 7 * DAY_IN_SECONDS );
?>
<?php if ($post_date > $limit_time):?>
    <div class="nuevo"></div>
<?php endif ?>   

Muchas gracias por todo.