Indexando todas as imagens de um texto – jQuery

Como vocês já devem estar cansados de ler, estou desenvolvendo algumas novidades para o And After mas isso está rendendo ótimos frutos, principalmente com jQuery (e ultimamente com SQL).

Para uma das novas features eu precisava indexar todas as imagens utilizadas nos posts do site. Resolvi cadastrar tudo no banco de dados, mas a dúvida era… como automatizar isso tudo?

Como estava estudando jQuery resolvi deixar de lado o server-side, utilizando apenas quando necessário: para inserir os dados no banco. Quase todo o resto foi feito com javascript, especificamente com jQuery.

Dica de leitura: Excelentes truques e dicas para jQuery

Objetivo do script
Encontrar todas as imagens de um texto e inserir estas imagens no banco de dados guardando as informações: url (src), descrição (alt) e qual o texto utilizou a imagem (definido por server-side). Ao final, passar para o próximo post do banco de dados e repetir o processo até que as imagens de todos os posts tenham sido indexadas.

Etapas de funcionamento

Explicarei em passos simples o funcionamento do script:

1. O script server-side seleciona o post no Banco de Dados
2. Através o jQuery o script "lê" o texto e busca pelas imagens
3. Para cada imagem encontrada é executado um script server-side (post por ajax) que insere a imagem no banco de dados
4. Ao final da indexação das imagens daquele post o script redireciona a página para o próximo post

Irei publicar aqui apenas a programação client-side, que é o foco deste post para facilitar o entendimento, deixando o script resumido. Também ocultei as funções de redirect (para passar os itens "post" do banco de dados) para o script ficar mais amplo.

O objetivo aqui é mostrar como funciona e estimular idéias 🙂

Indexando todas as imagens de um post

/*
 * Finding images in a div and list (or execute any action) with all images
 *
 * Copyright (c) 2009 Guilherme Serrano
 * Dual licensed under the MIT
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://www.guilhermeserrano.com.br
 * https://andafter.org
 *
 */
$(function (){
	var imag = $(´#finder´).find(´img´); //find all images
	var i = 0
	if(imag.length==0){
		item.html(´
Nenhuma imagem neste texto
´)
	}
	imag.each(function(){
		var url =  $(this).attr(´src´); //get img url
		var titulo =  $(this).attr(´alt´); //get img description (alt)
		var item = $(´
 
´) //create item list
		$.post(´server-side.asp?a=add´, { url: url, titulo: titulo, id_post: id_post}, //POST data to server side script
		  function(data){
			i = i+1
			item.html(data)
			$(´#imagens´).animate({opacity: 1}, 5000).append(item) //print data and pause 5s
		  });
	})
})

No arquivo server-side.asp eu tenho um script que verifica se a imagem já está cadastrada no banco de dados, se ela não está cadastrada então cadastro e retorno um html "Imagem X cadastrada com sucesso no banco" ou "A imagem X já existe no banco". Esta mensagem é a variável data, que é printada pelo jQuery   no meu elemento #imagens.

[update] Depois do comentário do Anderson Baldner resolvi tornar mais intuitivo, adicionando o html de forma "completa", chamando o jQuery e também chamando o arquivo de javascript. [/update]

Html

Aqui vai o texto que contém as imagens que você deseja indexar.

Utilizando server-side e algumas alterações neste script criei um "mini-crawler" que percorreu todos os posts do meu banco de dados indexando as imagens e suas informações em um banco de dados, independente as imagens estarem hospedadas no meu servidor ou não.

Curiosidade

Esse script foi desenvolvido para aplicação "interna", utilizando um delay de 2 segundos por post o script levou 1 hora e 30 minutos para percorrer de forma automática 800 posts do And After e indexar 2.659 imagens no banco de dados. Poderia ser feito de forma reduzindo um pouco o delay, mas como não estava com pressa e não queria "consumir" o banco (sou cagão e não sou programador, então melhor previnir né?) deixei ele light.

É apenas um exemplo do que é possível, dá pra fazer muita coisa com um pouco de criatividade, espero ter ajudado a despertar alguma idéia nestas cabeças geniais que leio por aí! 🙂

Indexar feeds dos blogs que você gosta, para selecionar posts pelas imagens por exemplo é só umas das idéias possíveis… haha 😉

Lembre-se que Programar é Grátis, exercite-se!