Pesquisa
Itens ativos
Posts mais lidos hoje
Login do usuário
Parceiros
Assine o RSS do Drupal-BR
Image Galleries Theming
Olá Pessoal,
Eu estou precisando mudar a exibição que o Image Gallery (do módulo Image) tem como padrão. Segue a parte do código que faz a exibição atual:
if (!empty($images)) {
$content .= '<ul class="images">';
foreach ($images as $image) {
$content .= theme('image_gallery_img', $image, $size);
}
$content .= "</ul>\n";
}
function theme_image_gallery_img($image, $size) {
$width = $size['width'];
// We'll add height to keep thumbnails lined up.
$height = $size['height'] + 75;
$content = '<li';
if ($image->sticky) {
$content .= ' class="sticky"';
}
$content .= " style='height : {$height}px; width : {$width}px;'>\n";
$content .= l(image_display($image, IMAGE_THUMBNAIL), 'node/'. $image->nid, array(), NULL, NULL, FALSE, TRUE);
$content .= '<h3>'. l($image->title, 'node/'. $image->nid) .'</h3>';
if (variable_get('image_gallery_node_info', 0)) {
$content .= '<div class="author">'. t('Posted by: !name', array('!name' => theme('username', $image))) ."</div>\n";
if ($image->created > 0) {
$content .= '<div class="date">'. format_date($image->created) ."</div>\n";
}
}
$content .= "</li>\n";
return $content;
}
$content .= '<ul class="images">';
foreach ($images as $image) {
$content .= theme('image_gallery_img', $image, $size);
}
$content .= "</ul>\n";
}
function theme_image_gallery_img($image, $size) {
$width = $size['width'];
// We'll add height to keep thumbnails lined up.
$height = $size['height'] + 75;
$content = '<li';
if ($image->sticky) {
$content .= ' class="sticky"';
}
$content .= " style='height : {$height}px; width : {$width}px;'>\n";
$content .= l(image_display($image, IMAGE_THUMBNAIL), 'node/'. $image->nid, array(), NULL, NULL, FALSE, TRUE);
$content .= '<h3>'. l($image->title, 'node/'. $image->nid) .'</h3>';
if (variable_get('image_gallery_node_info', 0)) {
$content .= '<div class="author">'. t('Posted by: !name', array('!name' => theme('username', $image))) ."</div>\n";
if ($image->created > 0) {
$content .= '<div class="date">'. format_date($image->created) ."</div>\n";
}
}
$content .= "</li>\n";
return $content;
}
O resultado desse código é algo parecido com isso:
<ul class="images">
<li style='height : 150px; width : 100px;'>
<a href="/gallery/?q=node/4"><img src="http://localhost/gallery/files/images/Dia-dos-pais-2008-008.thumbnail.jpg" alt="Peixinho e Cavalinho 2" title="Peixinho e Cavalinho 2" class="image image-thumbnail " width="100" height="75" /></a>
<h3><a href="/frog-gallery/?q=node/4">Peixinho e Cavalinho 2</a></h3></li>
<li style='height : 150px; width : 100px;'>
</ul>
<li style='height : 150px; width : 100px;'>
<a href="/gallery/?q=node/4"><img src="http://localhost/gallery/files/images/Dia-dos-pais-2008-008.thumbnail.jpg" alt="Peixinho e Cavalinho 2" title="Peixinho e Cavalinho 2" class="image image-thumbnail " width="100" height="75" /></a>
<h3><a href="/frog-gallery/?q=node/4">Peixinho e Cavalinho 2</a></h3></li>
<li style='height : 150px; width : 100px;'>
</ul>
Eu preciso que a exibição disso seja assim:
<div id="gallery">
<a href="images/1.jpg">
<img src="images/1_thumb.jpg" />
</a>
</div>
<a href="images/1.jpg">
<img src="images/1_thumb.jpg" />
</a>
</div>
Eu tentei usar o Content Template, mas esqueci que ele só serve para Contant Types. Alguem tem alguma ideia de como posso alterar isso?
Agradeço novamente.
Abração!
Thiago Régis
Enviado por tregismoreira em seg, 15/09/2008 - 22:46. 
- Por favor, se logue ou se registre para poder enviar comentários
- 193 leituras
Se não me engano, a
Se não me engano, a exibição padrão do Image Gallery é uma view (caminho: /image). Com o theme wizard não será difícil aplicar o que deseja.
Abraço!
Leonardo Silva
Produtor Cultural
www.xulispa.com.br
www.ecultura.com.br
Resposta:
Vamos lá então caro Thiago.
Pelo que vejo você quer ter acesso direto à imagem para alguma aplicação externa tal como Javascript ou CSS, e não está querendo utilizar o caminho origial criado pelo sistema.
Para realizar suas alterações primeiramente vamos criar um arquivo template.php, caso não tenha criando ainda, dentro da pasta de seu template.
Em seguida, vamos então copiar as duas funções usadas pelo theme() que queremos alterar:
theme_image_gallery() e theme_image_gallery_img().
Dentro do arquivo template.php que você deve criar dentro da pasta do seu tema em questão, TROQUE as INICIAIS das funções acima pelo nome do seu tema e você ficará com o seguinte código:
OBS.: Não feche as tags do PHP deixe em aberto!
/**
* Alterações para a exibição do tema original
*/
function SEU_TEMA_AQUI_image_gallery($galleries, $images) {
drupal_add_css(drupal_get_path('module', 'image_gallery') .'/image_gallery.css');
$size = image_get_sizes(IMAGE_THUMBNAIL);
$content = '';
if (count($galleries)) {
$content .= '<ul class="galleries">';
foreach ($galleries as $gallery) {
$content .= '<li class="clear-block">';
if ($gallery->count) {
$content .= l(image_display($gallery->latest, IMAGE_THUMBNAIL), 'image/tid/'. $gallery->tid, array(), NULL, NULL, FALSE, TRUE);
}
$content .= "<h3>". l($gallery->name, 'image/tid/'. $gallery->tid) ."</h3>\n";
$content .= '<div class="description">'. check_markup($gallery->description) ."</div>\n";
$content .= '<p class="count">'. format_plural($gallery->count, 'Há 1 imagem nesta galeria', 'Há @count imagens nesta galeria') ."</p>\n";
if ($gallery->latest->changed) {
$content .= '<p class="last">'. t('Última atualização: %date', array('%date' => format_date($gallery->latest->changed))) ."</p>\n";
}
$content .= "</li>\n";
}
$content .= "</ul>\n";
}
if (!empty($images)) {
$content .= '<div id="gallery"">';
foreach ($images as $image) {
$content .= theme('image_gallery_img', $image, $size);
}
$content .= "</div>\n";
}
if ($pager = theme('pager', NULL, variable_get('image_images_per_page', 6), 0)) {
$content .= $pager;
}
If (count($images) + count($galleries) == 0) {
$content .= '<p class="count">'. format_plural(0, 'Há 1 uma imagem nesta galeria', 'Há @count imagens nesta galeria') ."</p>\n";
}
return $content;
}
function SEU_TEMA_AQUI_image_gallery_img($image, $size) {
$width = $size['width'];
$height = $size['height'] + 75;
$content = '<a href="'.$image->images['_original'].'"';
$content .= '<img src="'.$image->images['thumbnail'].'"/>';
$content .= "</a>\n";
return $content;
}
Espero ter ajudado! (y)
Revisão:
Ali no post acima eu esqueci de colocar algumas explicações:
Eu simplesmente retirei as saídas exibidas pelo PHP na variável $content e troquei pelas desejadas.
Finalmente, então eu precisei obter os valores para acessar as informações da imagem.
Paral tal, fiz uso da função print_r() da seguinte forma, caso contrário nao exibirá nada caso você coloque em outro lugar do script:
print_r($imagem) // QUE É O OBJETO RESPONSAVEL POR TODA A MANIPULAÇÂO DA IMAGEM
$width = $size['width'];
$height = $size['height'] + 75;
$content = '<a href="'.$image->images['_original'].'"';
$content .= '<img src="'.$image->images['thumbnail'].'"/>';
$content .= "</a>\n";
return $content;
}
Então, como $imagem é um objeto, e contem um Array $images, ficou assim:
$image->images['thumbnail'];