Imagenes alternativas en las miniaturas de YARPP


A veces me encuentro que muchas entradas de los blogs que superviso no incluyen imagen destacada como norma general, esto es un problema a la hora de implementar el magnifico plugin de WordPress YARPP (Yet Another Related Posts Plugin) que nos permite mostrar al lector las entradas relacionadas al contenido que acaba de leer, consiguiendo así una mayor estancia de este en nuestra web y logrando por tanto un menor porcentaje en la tasa de rebote o bounce rate.

yarpp

YARPP con nuestro propio estilo e imágenes dinámicas

YARPP nos permite mostrar las entradas relacionadas como una lista o como una serie de thumbnails o miniaturas que contienen la imagen destacada que hayamos designado a la entrada que se esta proponiendo, por lo tanto si no hay imagen destacada el plugin nos permite definir una imagen por defecto que se mostrara en tal caso. El problema es que como comente anteriormente, hay muchos casos en los que el blogger de turno no acostumbra a insertar imagen destacada en sus entradas y por lo tanto siempre se mostrara la imagen por defecto que hemos definido anteriormente.

Afortunadamente este inconveniente puede ser resuelto fácilmente mediante la posibilidad que nos ofrece YARPP de customizar la plantilla PHP que se encarga de mostrar las miniaturas así como su hoja de estilo CSS correspondiente, por lo tanto necesitamos:

  • Crear una plantilla para THUMBNAILS (recordad que YARPP permite varias formas de mostrar las entradas relacionadas).
  • Agregar los estilos CSS correspondientes al HTML generado en nuestra plantilla anterior.
  • Configurar YARPP para que use nuestra plantilla como formato de salida de las recomendaciones.

Creamos la plantilla

Como hemos visto antes, YARPP nos permite definir plantillas a nuestro gusto para mostrar de una manera mas o menos personalizada las recomendaciones a nuestros lectores, de hecho YARPP viene con varias plantillas de muestra que podemos reutilizar:

yarpp selector de estilo

YARPP nos permite añadir nuestra propia plantilla

De hecho si es la primera vez y queremos activar la opción “Custom” nos preguntara si queremos copiar las plantillas de muestra en la carpeta de nuestro Theme, esto ultimo es importante, todas las plantillas y estilos se deberán crear en dicha carpeta de nuestro Theme actual, por lo que debemos tener acceso a nuestro servidor mediante FTP.

En nuestro caso no queremos copiar todas las plantillas de muestra ya que solo queremos una basada en la platilla THUMBNAILS que nos ofrece YARPP y que modificaremos para poder mostrar las imágenes que están dentro del contenido de la entrada y no la imagen destacada. Así que vamos al ataque, creando en primer lugar un archivo PHP e insertando el siguiente código:

<?php /*
Miniaturas relacionadas
Author: Lumilued
*/
?>

<?php if ($related_query->have_posts()):?>
    <h4>Quizás te interese alguna de las siguientes entradas:</h4>
    <ol>
        <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
            <li>
                <?php
                    $img = '';
                    if ( has_post_thumbnail() ) {
                        $img = get_the_post_thumbnail( $post->ID, 'related-thumbnail', array( 'title' => $title, 'alt' => $title ) );
                    }
                    else {
                        $attachments = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image',  'numberposts' => 1 ) );

                        if ( count( $attachments ) > 0 ) {
                            $img = array_shift( $attachments );
                            $img = wp_get_attachment_image( $img->ID, 'related-thumbnail', true );
                        }
                    }
                    $extra_class = '';
                    if ( $img == '' ) {
                        $img         = wp_html_excerpt( get_the_excerpt(), 40 );
                        $extra_class = ' related-thumb-text';
                    }
                ?>
                <div>
                    <div>
                        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" alt="<?php the_title(); ?>">
                            <?php echo $img; ?>
                        </a>
                    </div>
                    <div>
                        <a href="<?php the_permalink() ?>" rel="bookmark">
                            <?php the_title(); ?>
                        </a>
                    </div>
                </div>
            </li>

        <?php endwhile; ?>
    </ol>
    <div style="clear: both"></div>
<?php endif; ?>

El código anterior hace una serie de operaciones por cada entrada recomendada a mostrar, en primer lugar comprueba si la entrada contiene una imagen destacada y en caso positivo la agrega como thumbnail, si no tenemos, entonces comprueba si dentro de la entrada existe contenido gráfico y si es así intenta recuperar la primera imagen encontrada, en caso de no tener ninguna imagen dentro de la entrada entonces procedemos a insertar un pequeño resumen o excerpt de 40 caracteres del texto de la entrada y lo agregamos sustituyendo así a la imagen (aunque con un poco de estilo podemos hacerlo encajar muy bien).

Guardamos el archivo con un nombre como puede ser yarpp-template-thumbs.php y lo subimos a la carpeta de nuestro Theme actual mediante FTP, dicha ruta debería ser algo como esto: /public_html/wp-content/themes/NUESTRO_THEME

Damos estilo a las miniaturas

Una vez hemos conseguido nuestra plantilla, debemos darle estilo ya que al ser una plantilla customizada esta deberá estar acompañada de un estilo definido en la misma carpeta, ya sea en nuestro style.css, custom.css que use el Theme.

Este podría ser un ejemplo de como podría quedar el código CSS, por supuesto vosotros debéis integrar al diseño general de la web en la que trabajéis:

/*---------------------------------------------
RELATED POST THUMBNAILS
-----------------------------------------------*/
.related-posts {
  list-style-type: none;
  margin: 0;
  height: 110px;
}
 
.related-posts li {
  padding: 0; margin: 0;
  float: left;
  margin-right: 5px;
}
 
.related-post {
  position: relative;
  padding: 3px;
  background-color: #C84C45;
  border: 1px solid #C84C45;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
 
.related-post:hover {
  border: 1px solid #B52025;
}
 
.related-title {
  position: absolute;
  bottom: 3px;
  left: 0;
  font-size: 0.7em;
  width: 96px;
  margin-left: 3px;
  opacity: 0.5;
  padding: 1px 2px;
  text-align: center;
  line-height: 1.4;
  height: 30px;
  overflow: hidden;
  background-color: black;
  font-family: helvetica, arial;
}
 
.related-title a {
  text-decoration: none;
  color: white;
}
 
.related-thumb {
    background-color: #C84C45;
    font-size: 2.2em;
    height: 100px;
    line-height: 0.6;
    overflow: hidden;
    width: 100px;
}
 
.related-thumb a {
  text-decoration: none;
  color: #FF9999 !important;
}

.related-thumb img {
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}

Este fragmento corresponde al estilo de nuestros thumbnails y debemos agregarlo al archivo de estilos vigente en nuestro theme.

Configuramos el plugin YARPP

Como colofón a nuestro trabajo nos queda activar la plantilla que acabamos de crear y ver como se muestra, así que dentro de nuestro panel de control o dashboard de WordPress y nos situamos en AJUSTES → Publicaciones Relacionadas (YARPP) y activamos la opción “Custom” que mostrara un desplegable con las posibles plantillas a elegir (en nuestro caso solo debería haber una llamada yarpp-template-thumbs.php):

yarpp selector de plantilla

CUSTOM nos permite seleccionar nuestra plantilla

Una vez seleccionado, podemos escoger cuantas miniaturas mostrar y guardar los cambios para activar nuestras nuevas miniaturas.

 

 

Fuente: Urbangiraffe

Convertir imágenes en color a blanco y negro con CSS


bg color

Los filtros nos permiten procesar visualmente imagenes en el navegador sin necesidad de pasar previamente por Photoshop o usar intensivamente JavaScript o PHP. Los filtros en CSS3 son ampliamente compatibles con las versiones más recientes de Firefox y Chrome, y ademas podremos adaptar su compatibilidad para las versiones anteriores y navegadores alternativos – incluso IE 🙂 – mediante la combinación de distintas técnicas en la hoja de estilo.

En este artículo vamos a convertir una imagen en color a blanco y negro solamente con CSS, para ello usaremos la imagen de arriba que llamaremos “bg.gif”. Con esta técnica es también posible alcanzar un tono sepia, desenfoque, brillo, contraste y otros muchos efectos.

Desaturar una imagen de color no puede ser más sencillo con CSS3. Crearemos la hoja de estilo y añadiremos el filtro como una clase dentro de “img”, así la podremos usar masivamente en nuestras paginas:

img.desaturada { filter: grayscale(100%); }

Los navegadores actuales permiten aplicar filtros a través de prefijos CSS3, por lo que nuestro primer trabajo solo consiste en insertar el código escrito que aun no existe en CSS con el fin de asegurar su funcionamiento en un futuro:

img.desaturada { filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

Ahora utilizaremos nuestra nueva clase en nuestro codigo HTML de la siguiente manera:

<img src=bg.gif alt=”Background” style=”width:512px;height:512px” class=desaturada >

Bien, hasta ahora este ejemplo solo es compatible con Chrome 18 o superior, asi que, mientras esperamos que los demas empiecen a ser compatibles con esta nueva carasteristica de CSS3 podremos usar filtro SVG, para ello crearemos un archivo de que llamaremos “filter.svg” lo guardaremos en la misma ubicación que nuestro HTML y escribiremos en su interior:

<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg”&gt;
<filter id=”gris”>
<feColorMatrix type=”matrix” values=”0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0″/>
</filter>
</svg>

Este nuevo archivo lo tendremos que referenciar ahora en nuestro CSS de tal modo que quedaria entonces asi:

img.desaturada {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(filter.svg#gris);
}

Por ultimo nos queda dar soporte a IE, para eso nos queda añadir una ultima linea al CSS:

img.desaturada{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(filter.svg#gris);
filter: gray;
}
 

Solamente nos queda esperar a que todos los navegadores soporten el estandar CSS3… no entiendo como no se ponen de acuerdo…