WordPress: obtener URL de imagen destacada by danielnabil.com

WordPress: obtener URL de imagen destacada by danielnabil.com

fuente: https://www.danielnabil.com/blog/funciones-wordpress-ruta-imagen-destacada/

Buenas a tod@s

Normalmente usamos the_post_thumbnail para obtener rapidamente la imagen destacada de nuestro post, el problema es que esta funcion carga la imagen pero tambien nos traera divs y mas cosas que pueden fastidiarnos con el CSS

Con este codiguillo cortesia de danielnabil.com obtendremos exclusivamente la url de la imagen:

<?php // Ruta de la imagen destacada (tamaño completo) global $post; $thumbID = get_post_thumbnail_id( $post->ID );
$imgDestacada = wp_get_attachment_url( $thumbID );
echo $imgDestacada;
?>

Leer artículo completo aquí, donde se explican mas funcionalidades como por ejemplo tema tamaños de fotos

#lightroom: crear #foto #panoramica

#lightroom: crear #foto #panoramica

cudillero-asturias-pueblo-asturiano-pesquero-panoramica-lightroom

Hola a tod@s

Crear una foto panoramica a partir de X fotos con lightroom esta chupao! nos vamos a biblioteca y solo tenemos que seleccionar las fotos que queremos usar para crear la panoramica (seleccion multiple con control + click). Cuando las tengamos seleccionadas le damos al control + M y nos saldra la ventanita del modulo panoramica para configurar alguna opcion del aspecto

Una vez creada la panoramica podemos revelarla, aunque he leido que algunos prefieren revelar antes las fotos una por una yo he probado asi y de momento muy bien

Un saludo!

5 páginas #web para Descargar Imágenes en Alta Resolución #Gratis by @infyart

5 páginas web para Descargar Imágenes en Alta Resolución Gratis http://www.informacionyarte.com/descargar-imagenes-alta-resolucion-gratis vía @infyart

fuente: http://www.informacionyarte.com/descargar-imagenes-alta-resolucion-gratis

5-paginas-web-para-descargar-imagenes-en-alta-resolucion-gratis-by-infyart

Encontrar sitios webs para descargar imágenes en alta resolución gratis no es nada sencillo. Generalmente este tipo de contenido tiene un precio. Aún así hemos rebuscado un poco para ver qué opciones hay para encontrar fotos de muy buena calidad para descargarlas gratis.

Leer artículo completo en informacionyarte.com

#php: post subir image a #twitter @cbielich

#php: post subir image a #twitter @cbielich

fuente: http://stackoverflow.com/questions/35350822/posting-image-status-with-the-twitter-api-using-php

Twitter-PPC

tras mucho buscar y probar y arrancarme el pelo de la cabeza gracias a Cesar Bielich por fin he encontrado solucion, twittear desde php muy guapo pero para publicar una foto con el tweet me las vi y me las desee … con este codiguillo y descargando la libreria codebird, mano de santo:

tweet(‘This is my sample tweet message’,’../audi-a3-grande.jpg’);

function tweet($message,$image) {

// add the codebird library
require_once(‘codebird-php-develop/src/codebird.php’);

// note: consumerKey, consumerSecret, accessToken, and accessTokenSecret all come from your twitter app at https://apps.twitter.com/
\Codebird\Codebird::setConsumerKey(«xxx», «xxx»);
$cb = \Codebird\Codebird::getInstance();
$cb->setToken(«xxx», «xxx»);

//build an array of images to send to twitter
$reply = $cb->media_upload(array(
‘media’ => $image
));
//upload the file to your twitter account
$mediaID = $reply->media_id_string;

//build the data needed to send to twitter, including the tweet and the image id
$params = array(
‘status’ => $message,
‘media_ids’ => $mediaID
);
//post the tweet with codebird
$reply = $cb->statuses_update($params);

}

Cortar una Imagen con #PHP by @CodigoAdicto #crop #image

fuente: http://codigoadicto.com/cortar-una-imagen-con-php

Este código muestra la parte seleccionada de una imagen utilizando coordenadas para hacer la función de corte, este código es bastante útil cuando queremos usar imágenes como Featureden los post sin importar el tamaño de esta indicarle que haga un corte estándar para poder visualizarla a la medida.

$filename= "ejemplo-de-imagen.jpg";
list($w, $h, $type, $attr) = getimagesize($filename);
$src_im = imagecreatefromjpeg($filename);

$src_x = '0';   // comienza x
$src_y = '0';   // comienza y
$src_w = '100'; // ancho
$src_h = '100'; // alto
$dst_x = '0';   // termina x
$dst_y = '0';   // termina y

$dst_im = imagecreatetruecolor($src_w, $src_h);
$white = imagecolorallocate($dst_im, 255, 255, 255);
imagefill($dst_im, 0, 0, $white);

imagecopy($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h);

header("Content-type: image/png");
imagepng($dst_im);
imagedestroy($dst_im);

#html y #css: #image #crop, usease; no mostrar imagen completamente by @aNieto2k

Fuente: http://www.anieto2k.com/2009/09/08/3-tecnicas-de-hacer-crop-con-css/

Llamamos crop al recorte selectivo de una imagen. Este recorte no afecta ni al ancho ni al alto de la imagen, y únicamente se encargar de mostrar nuestra selección al usuario.

800px-Image_cropping_aspect_ratios
(Ver Imagen)

Como vemos en la imagen, sacada de la Wikipedia, esta técnica la usamos cada día al ver la televisión, ya que para no perder el ratio de la imagen y así no deformar los objetos que visualizamos se realiza un crop adaptando la imagen sin perder la relación de aspecto de la imagen.

Márgenes negativo

Esta técnica, basada en el uso de márgenes negativos simula el efecto crop sobre la imagen, haciendo que la imagen se oculte sobre una capa superior.

// HTML
p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p> 

// CSS
.crop{
 float:left;
 margin:.5em 10px .5em 0;
 overflow:hidden; /* IMPORTANTE */
 border:1px solid #ccc;
 }

 /* Indicamos los márgenes que dejamos para simular el crop. */
.crop img{
 margin:-20px -15px -40px -55px;
 }

Ver una demo.

#html5 y #css3: Imagen Responsive Básica

Fuente: http://www.psdahtmlpasoapaso.com/blog/como-crear-imagenes-responsive-con-css#ejemplo

Comenzamos con un DIV contenedor que incluirá una imagen.

<div>
   <img src="image01.jpg" width="960" height="640" />
 </div>

Ahora aplicaremos una serie de reglas con contenedor de dicha imagen para que el mismo tenga un ancho del 96% del ancho de la pantalla, pero que el mismo no supere los 960px.
También le colocamos un margen de 0 para arriba y abajo y AUTO para el izquierdo y derecho. Asi logramos que quede centrado.

div.container {
width: 96%;
max-width: 960px;
margin: 0 auto;
}
img {
width: 100%;
height: auto;
}

También le incluí un ancho del 100% a la imagen y un alto en automatico, con eso logramos que tome el ancho completo del DIV contenedor y la altura se respete proporcionalmente.

RESUMEN: en este ejemplo logramos una imagen responsive (adaptable) pero que no supere los 960px de ancho.

>> Ver ejemplo

rcarousel – a continuous #jQuery UI carousel … carrusel horizontal de divs

Fuente: http://ryrych.github.io/rcarousel/

Table of Content
Announcement

rcarousel development is discontinued at the moment. Maybe If I have more time and feel like it I will resume the work on the project. Anyway I encourage you to share it, fork it and whaterver you feel like. But please – respect the licence.

Examples
News
  • January 25, 2012 – point release fixes issue #14.
  • January 13, 2012 – point release fixes issue #10.
  • December 31, 2011 – new stable version 1.1.1 has been released. See changelog for more.
  • December 12, 2011 – new stable version 1.1 has been released. See changelog for more.
About

rcarousel is a jQuery UI continuous carousel with many cool features. It is highly customizable and supports even olderbrowsers (No IE6, please).

Features
simple to use

Now rcarousel is very simple to use. Just add some elements into a container and run the widget on it!

highly customizable

rcarousel does not force you to use one pre-defined theme. You can add your own custom navigation with no effort!

many options to choose from

There are many options to choose from. Configure your carousel whatever you like!

Any element

As of 1.1 version you can use hopefully any HTML element inside a carousel. To illustrate this, take a look at the carousel I used at the top of the page.

images with links

As of 1.1 version there is no problem with wrapping IMG elements with links. Another nice feature!

Multiple carousels

You can add as many carousels as you like to a page without a problem. To see a working example, take a look atmulti carousels example.

Vertical carousels

rcarousel supports also vertical orientation of carousels.

Loading elements on demand

With the help of append method, you can load elements on demand. It can come in handy in AJAX calls.

Auto mode

Thanks to the Auto mode you do not even have to use navigation.

cool pagination

The pagination algorithm that is a part of rcarousel allows you to use a custom number of visible elements and a step to scroll by.

simple API

Available API allows you to control rcarousel at the run-time!

Compatibility

rcarousel was tested and has been tested in many browsers. If you come across a bug, please report it in the bug tracker. Some browsers like Internet Explorer 6 are too old and will not be supported. Because of some browsers release cycle like that of Chrome (and Firefox until recently), it is very hard to keep track of rcarousel behaviour in these browsers. Thus the widget was tested just in Chrome/Chromium. Also please note, it is not so easy to estimate the number of browsers to test in especially when it comes to minor releases or a bug fix releases. The more the better is not the answer. If the browser you want to use rcarousel in, is for some reason important to you, and the widget doesn’t work in it, you can fill in a bug report inthe bug tracker.

rcarousel was tested in the following browsers:

  • Internet Explorer 7+
  • Firefox 3.0+
  • Chrome
  • Opera 10.10+ (there are problems with animation in 10.00)
  • Safari 4.0.5+
Getting Started

To get started, add the following JavaScript scripts. rcarousel is built on jQuery 1.7. Since rcarousel is a jQuery UI widget, some additional dependencies are required.

In examples below, replace path with the path to the folder where rcarousel is kept:

<script type="text/javascript" src="path/widget/lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.rcarousel.min.js"></script>

Then add the following style sheet in the head section:

<link type="text/css" rel="stylesheet" href="path/widget/css/rcarousel.css" />

To make it work, add images, or any html content inside some DIV element. For example:

<div id="carousel">
	<img src="flowers/tulip.jpg" alt="a tulip"/>
	<img src="flowers/rose.jpg" alt="a rose"/>
	<img src="flowers/daisy.jpg" alt="a daisy"/>
	<img src="flowers/sunflower.jpg" alt="a sunflower"/>
	<img src="flowers/pansy.jpg" alt="a pansy"/>
</div>

Then run it:

<script type="text/javascript">
	jQuery(function($) {
		$( "#carousel" ).rcarousel();
	});
</script>

Now rcarousel will be run with the default options. You should at least change default size of an element, for instance:

<script type="text/javascript">
	jQuery(function($) {
		$( "#carousel" ).rcarousel( {width: 200, height: 200} );
	});
</script>

Remember that number of elements you add to a carousel have to be at least number of elements you specify in ‘visible’ option! Otherwise the carousel will not run.

Configuration Options
Option Type Default value Description
visible integer 3 Number of visible elements. This number is the minimum number of elements you have to add.
step integer 3 Number of elements to scroll by
width integer 100 Width of carousel’s elements
height integer 100 Height of carousel’s elements
speed integer 1000 Speed in milliseconds of scrolling animation
margin integer 0 Margin between elements
orientation string [«horizontal» | «vertical»] «horizontal» Orientation of carousel
auto object {enabled: boolean, direction: string [«next» | «prev»], interval: integer {enabled: false, direction: «next», interval: 5000} Enables or disables automatic scrolling.
startAtPage integer 0 Which page load first
navigation object {next: string, prev: string} {next: «#ui-carousel-next», prev: «#ui-carousel-prev»} Attach click handler to a given class «.class» or an id «#id»
start event Triggered when carousel is ready to use
pageLoaded event Triggered when page is loaded (scrolled into view)
Public API
Method Usage example Description
next $( «#carousel» ).rcarousel( «next» ); load next elements by step – elements are scrolled left
prev $( «#carousel» ).rcarousel( «prev» ); load previous elements by step – elements are scrolled right
goToPage $( «#carousel» ).rcarousel( «goToPage», 5 ); goes to a given page
getTotalPages $( «#carousel» ).rcarousel( «getTotalPages» ); returns number of total pages
getCurrentPage $( «#carousel» ).rcarousel( «getCurrentPage» ); returns number of current page
append $( «#carousel» ).rcarousel( «append», $jQueryElements ); adds $jQueryElements to carousel; it’s handy in Ajax calls; see the example
Navigation
Changelog
1.1.2 → 1.1.3

Version 1.1.3 is a point release that fixes the issue #14. As you can read there, this one-character typo makes html carousel example broken in IE7. Sorry for inconvenience!

1.1.1 → 1.1.2

Version 1.1.2 is a point release that fixes the issue #10.

1.1 → 1.1.1

Version 1.1.1 is a quick release to help you use rcarousel with a lightbox. Now event handlers and data are copied as well. Have a peek at this awesome example. Please consider donating some money. As this is the last day of 2011 year, I wish you all the best in the coming 2012 year!

1.0 → 1.1

Simple to use

Now, using rcarousel is even more simple. Just add some content into a container and run it!

Any content

Version 1.1 supports any kind of content in a carousel. Not only images!

Ajax handling

Ajax calls have been delegated to third parties. See the example.

Simplified pagination algorithm

Main pagination algorithm has been further improved and well documented.

New public methods

append and getCurrentPage are new public methods.

Where to get help?

First, do not use bug tracker to get help! It’s not meant to be a helping center. Also do not e-mail me directly with a problem that could easily be solved by someone else. To get help, I encourage you to ask, for example on stackoverflow or other Q&A service.
Remember, bug tracker is for reporting bugs and, to some extent, asking for features.

Herramienta para crear imágenes de perfiles (Facebook, Twitter, Google+) by @Kabytes

Fuente: Pablo –  kabytes.com

No hace falta decir lo importante que resulta tener un perfil bien elaborado en las redes sociales, ademas de obviamente el contenido lo visual juega un papel determinante para lograr captar la atención de las personas. Para lograr esto último es que existe Social Media Image Maker, una herramienta para la creación de imágenes para las distintas redes sociales.

Social Media Image Maker es una aplicación online y gratuita, que permite con muy pocos pasos elaborar imágenes de perfil que se ajustan perfectamente a la red social seleccionada. Para lograrlo utiliza un sistema de planillas predeterminadas que nos asisten en la creación de nuestro perfil.

crear imagenes para perfiles

El mecanismo es de lo más sencillo. Primero debemos seleccionar la red social a la cual le deseamos crear una imagen de perfil, entre las disponibles podemos destacar: Facebook, Twitter, Google +, Vimeo, Youtube, Tumblr, Foursquare y muchas más, prácticamente se puede decir que están las principales redes y sitios sociales de internet. Una vez seleccionada la red social simplemente seleccionamos el tipo de plantilla a utilizar. Luego el sistema nos guía paso a paso sobre el tamaño y resolución de imagen necesaria para lograr un excelente resultado.

Por ejemplo podemos seleccionar Facebook, elegir la plantilla correspondiente a la portada, y finalmente arrastrar la imagen que deseamos subir, eso es todo. En caso de que la imagen no sea la ideal el sistema nos alertará sobre el problema para que lo solucionemos seleccionando una imagen más apropiada.

Otro aspecto interesante es que en caso de utilizar imágenes más grandes, con Social Media Image Maker podemos tratar la misma, al menos con herramientas básicas, como por ejemplo, recortar, rotar, etc.

Una vez que finalizamos la edición simplemente descargamos la imagen y la insertamos en la red social que deseamos.

Social Media Image Maker es una herramienta sencilla pero muy útil. Ahora no hay excusas para tener una mala gráfica en las redes sociales :P

Web: Social Media Image Maker