#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);

}

#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.

Crear marcas de agua con #PHP by @tednologia

Fuente: http://tednologia.com/marcas-de-agua-php/

Añadir o crear marcas de agua a una imagen se utiliza bastante para dejar los créditos en una imagen, realizar esto de forma automática con PHP nos ahorrara tiempo en abrir un programa de edición de imágenes para ponerlo manualmente, ahora solo tendremos que ponerlo como una función antes de hacer el upload o mejor aún si tenemos los archivos en un directorio podemos recorrerlo y agregarle marcas de agua masivamente.

ImageWorkshop es una Clase PHP que utiliza la librería GD para agregar capas de imágenes fácilmente (igual que en Photoshop o GIMP).

Tutorial

Vamos a añadir una marca de agua en una imagen de diferentes formas, solo texto, con imagen, con transparencia, vertical y en diagonal.

Estas son las imágenes que utilizaremos:

1- Agregar texto como marca de agua

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
require_once('imageworkshop.php');
 
$norwayLayer = new ImageWorkshop(array(
    "imageFromPath" => "sgs3.jpg",
));
 
$textLayer = new ImageWorkshop(array(
    "text" => "PHP Image Workshop",
    "fontPath" => "arial.ttf",
    "fontSize" => 14,
    "fontColor" => "ffffff",
    "textRotation" => 0,
));
 
$norwayLayer->addLayer(1, $textLayer, 12, 12, "LB");
$image = $norwayLayer->getResult();
 
header('Content-type: image/jpeg');
 
imagejpeg($image, null, 95);
addLayer([nivel], [subcapa], [x], [y], [posicion]);

En este metodo podemos pasar por

parametros el nivel de la capa (nivel), en que capa se agregara (subcapa), las coordenadas horizontal (x) y vertical (y), y la posicion que podra ser seran LB (Left, Bottom), RT (Right Top), etc.

2- Agregar imagen como marca de agua

01
02
03
04
05
06
07
08
09
10
11
12
13
14
$norwayLayer = new ImageWorkshop(array(
    "imageFromPath" => "sgs3.jpg",
));
 
$watermarkLayer = new ImageWorkshop(array(
    "imageFromPath" => "android.jpg",
));
$norwayLayer->addLayer(1, $watermarkLayer, 12, 12, "LB");
 
$image = $norwayLayer->getResult();
header('Content-type: image/jpeg');
 
imagejpeg($image, null, 95);
3- Agregar imagen con opacidad como marca de agua

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
$norwayLayer = new ImageWorkshop(array(
    "imageFromPath" => "sgs3.jpg",
));
 
$watermarkLayer = new ImageWorkshop(array(
    "imageFromPath" => "android.jpg",
));
$watermarkLayer->opacity(60);
$norwayLayer->addLayer(1, $watermarkLayer, 12, 12, "LB");
 
$image = $norwayLayer->getResult();
header('Content-type: image/jpeg');
 
imagejpeg($image, null, 95);
4- Agregar imagen como marca de agua y rotarla

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
$norwayLayer = new ImageWorkshop(array(
    "imageFromPath" => "sgs3.jpg",
));
 
$watermarkLayer = new ImageWorkshop(array(
    "imageFromPath" => "android.jpg",
));
//$watermarkLayer->opacity(60);
$watermarkLayer->rotate(90);
$norwayLayer->addLayer(1, $watermarkLayer, 12, 12, "LT");
 
$image = $norwayLayer->getResult();
header('Content-type: image/jpeg');
 
imagejpeg($image, null, 95);
5- Agregar texto en diagonal como marca de agua y rotarla

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function calculAngle($bottomSideWidth, $leftSideWidth)
{
    $hypothenuse = sqrt(pow($bottomSideWidth, 2) + pow($leftSideWidth, 2));
    $bottomRightAngle = acos($bottomSideWidth / $hypothenuse) + 180 / pi();
     
    return -round(90 - <div style="display: none"><a href='http://generic--viagra.net/'>buy generic viagra</a></div> $bottomRightAngle);
}
 
$norwayLayer = new ImageWorkshop(array(
    "imageFromPath" => "sgs3.jpg",
));
 
$textLayer = new ImageWorkshop(array(
    "text" => "PHP Image Workshop",
    "fontPath" => "arial.ttf",
    "fontSize" => 40,
    "fontColor" => "ffffff",
    "textRotation" => calculAngle($norwayLayer->getWidth(), $norwayLayer->getHeight()),
));
 
// Some funky opacity
$textLayer->opacity(70);
 
// We add the $textLayer on the norway layer, in its middle
$norwayLayer->addLayer(1, $textLayer, 0, 0, 'MM');
 
$image = $norwayLayer->getResult();
header('Content-type: image/jpeg');
 
imagejpeg($image, null, 95);

Descargar ejemplos

Documentación

jquery – precarga de imagenes en segundo plano by javirey.es

Fuente: javirey.es

La precarga de imágenes en un segundo plano es de gran ayuda cuando, tras haber cargado la página, hemos de cargar alguna imagen de cierto peso en respuesta a un evento. Un ejemplo: tenemos una página con varias secciones y una de estas secciones es una galería fotográfica compuesta por miniautras de imágenes que, al pinchar sobre ellas, nos mostrarán la imagen ampliada. Si en nuestra página cargamos desde el principio todas estas imágenes ampliadas y además tenemos muchas imágenes en nuestra galería, lo que ocurrirá será que nuestra página tardará mucho en cargar. Esto puede desesperar a la gente que quiera entrar en la página ( y que no tiene porqué saber que, una vez cargada la página, ya no tendrá que esperar más ). Una manera de solucionar este problema es cargar en nuestra web sólo las miniaturas de las imágenes ( ya que necesitamos que estén visibles desde el primer momento ) y, una vez cargada la página, empezaremos a cargar las imágenes ampliadas en un segundo plano. De este modo, cuando alguien pinche en la imagen pequeña se le abrirá la foto ampliada igual de rápido que si hubiera cargado toda la web de una sola vez. El usuario no se entera de nada de todo esto y nuestra web es mucho más ligera.

Esto se hace en dos pasos. El primer paso es crear un archivo .js con el siguiente código o añadir el código a cualquier .js que estemos usando en nuestra web ( yo recomiendo crear un nuevo .js para futuros usos ):

(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i–;) {
var cacheImage = document.createElement(‘img’);
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)

El segundo paso es incluir en nuestro html una llamada a las imágenes que se cargarán en segundo plano

<script type=”text/javascript”>
jQuery.preLoadImages(“la_ruta_a_tu_imagen/tuimagen.jpg”, “la_ruta_a_tu_imagen2/tuimagen2.jpg”, “la_ruta_a_tu_imagen3/tuimagen3.jpg”, “la_ruta_a_tu_imagen3/tuimagen3.jpg”);
</script>