Como fazer os thumbnail

[Apenas Eu 13]

Olá!

 

Eu sei mais ou menos que o thumbnail é uma miniatura da foto original. Mas, como ela funciona na verdade? É o CSS que compacta ela? Ou eu tenho que fazer uma cópia manualmente foto por foto?

 

Eu tenho aqui o cód dela do boostrap. Estava sem, daí inclui ela na class das fotos, mas não vi diferença.

 

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 6px;
}
.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: border 0.2s ease-in-out;
  -o-transition: border 0.2s ease-in-out;
  transition: border 0.2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-left: auto;
  margin-right: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #337ab7;
}
.thumbnail .caption {
  padding: 9px;
  color: #333333;
}

Na foto ela está aplicada assim:

<img src="http://www.dcsdesenvolvimento.com.br/imagens/artur1.jpg"class="effect-portfolio wow fadeIn img-thumbnail" data-wow-duration="2s" alt="Fotos Especiais - Book em Família, Rafael e Família por Fotógrafo Danilo CS em Campo Mourão" title="Fotos Especiais - Book em Família, Rafael e Família por Fotógrafo Danilo CS em Campo Mourão" >

Antigamente eu fazia uma pasta só com as miniaturas, mas isso dispensa muito tempo para montar e a manutenção é bem chatinha.

 

Estou fazendo corretamente? O que faltou eu fazer?

 

[Diego Arent 19]

Utilizando CSS você consegue redimensionar a foto, mas isso não diminui o tamanho do arquivo da imagem.

 

Para gerar uma miniatura (inclusive no tamanho), você precisaria utilizar alguma linguagem de programação, como PHP, ASP, etc.

Manualmente, você até pode fazer, mas demoraria muito, dependendo da quantidade de imagens que você a página possui e da frequencia com que é atualizada.

 

Apenas com CSS você só conseguirá redimensionar "visualmente" e não "fisicamente".

 

 

Exemplo:

Se você tiver uma imagem de 500kb, caso você redimensione ela na tela (via CSS), ela continuará com 500kb e será diminuída na tela.

Caso você crie a miniatura (dinamicamente ou manualmente) a imagem terá apenas o tamanho da miniatura (suponhamos que 50kb) e não os 500kb originais.

[Apenas Eu 13]

Ahh bomm... Era uma dúvida cruel que eu tinha hehehe.

Mas obrigado por sua ajuda em...vou ver se eu conseguiria fazer em php, senão o negócio é fazer de novo manualmente uma por uma :)

[guilomaker 31]

usa o phpthumb, da uma pesquisada no google! ele e bem simples de utilizar e você faz suas configurações como quiser.

 

http://www.dacostabalboa.com/es/phpthumb-recortar-y-redimensionar-imagenes-con-php/16746

[Apenas Eu 13]

Eu vou ver aqui...muito obrigado emm

[Apenas Eu 13]

Rsss eu não consegui usar hahahaha. Acho que vou ter que fazer manualmente, pelo menos as fotos da galeria.

 

Pode ser também um pouco de falta de paciência :)