Editar galeria

GabrielFerrari · Outubro 23, 2010

Boa tarde!

Estou montando uma página para um cabeleireiro aqui do bairro e ele me pediu o seguinte:

- Postar uma imagem qualquer

- O visitante clica nessa imagem

- Abre uma galeria

Então pensei, instalei um plugin para mostrar as fotos com lightbox e tal

como pode ser visto:

http://artsydney.cpweb0014.servidorwebfacil.com/nova-galeria/

Porém ele mostra todas as fotos upadas na galeria e ao clicar em alguma ela amplia e mostra as opções de avançar e voltar a foto

Eu gostaria de fazer a mudança para que mostre a penas 1 foto e ao clicar mostra-se as opções de avançar e voltar para ver as demais.

Alguém tem alguma idéia de como posso fazer isso?

Pensei em alterar o loop que mostra as fotos... porém não encontrei o arquivo responsavel pelas galerias.

Abraços e obrigado!

macielcr7 · Outubro 23, 2010

http://highslide.com/#examples

GabrielFerrari · Outubro 23, 2010

Obrigado pelo link mas,

acho que você entendeu mau minha pergunta

O efeito eu já consegui.

O que preciso é que no POST só mostre uma imagem da galeria

e não todas elas.

Anderson Narciso · Outubro 24, 2010

Thelon eu até entendi o que você quer mas nunca me deparei com uma situação dessas, porque tipo... Um post pode ter uma thumb com uma dessas imagens da galeria, ao clicar nela ela abreria o post completo com a galeria.. agora fazer com que o plugin mostre apenas 1 foto sendo que a galeria tem ex 20 e só mostrar as restantes quando clicar na seta de avançar seria uam cosia bem pensanda, isso na minha opinião, a não ser que o plugin tenha opções voltadas para essa situação :huh:

GabrielFerrari · Outubro 25, 2010

E ae Anderson!

Então, eu já pesquisei pra caramba isso ae

instalei um monte de plugin e não vi nada... até pensei em algumas maneiras "poganas" mas não encontrei o arquivo responsável por gerar a galeria.

Um post pode ter uma thumb com uma dessas imagens da galeria, ao clicar nela ela abreria o post completo com a galeria

Como eu poderia fazer isso? Já é uma boa solução. Me aconselha algum plugin?

Obrigado pela dica :)

precisando é só gritar.

Anderson Narciso · Outubro 25, 2010

Implementação, primeiro seu tema tem que dar suporte a criação de miniaturas

Arquivo functions.php

/** Ativando Thumbnails **/

if (function_exists('add_theme_support')) {
        add_theme_support('post-thumbnails');
        set_post_thumbnail_size(120, 90, true);
        add_image_size('miniatura-da-galeria', 274, 120, true);
        
}

Essa função ativa o suporte a thumbnail no seu tema, acho que é simples de entender..

Para que o loop puxe uma imagem, você tem que adicionar a tag the_post_thumbnail

Ex:

<div class="thumbnail">
<a href="<?php permalink(); ?>"><?php the_post_thumbnail('miniatura-da-galeria'); ?></a>
</div>

Ativando a função e colocando a tag que puxa a miniatura, na página de vai aparecer logo abaxido da selesão de categorias um campo "imagem destacada" ai você faz upload de uma das imagens que irão aparecer na sua galeria, no final da caixa vai ter a opção "salvar como imagem destacada" salve e ela sera jogada ali para baixo do link que abriu a box, e é basicamente isso

GabrielFerrari · Outubro 26, 2010

Não deu certo não. :mellow:

<div class="thumbnail">
<a href="<?php permalink(); ?>"><?php the_post_thumbnail('miniatura-da-galeria'); ?></a>
</div>

Isso aqui vai no Index.php certo?

Na parte onde o post é criado.

Anderson Narciso · Outubro 26, 2010

No seu caso isso vai dentro do loop, mas não importa a página, ela puxa a imagem de qualquer lugar

GabrielFerrari · Outubro 27, 2010

Não está rolando não, veja como está:

index.php

<?php get_header(); ?>
	<?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
			<div <?php post_class() ?>>
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<div class="date">
					<div class="bg">
						<span class="day"><?php the_time('d') ?></span>
						<span><?php the_time('M') ?></span>
					</div>
				</div>

<!-- THUMB -->

<div class="thumbnail">
<a href="<?php permalink(); ?>"><?php the_post_thumbnail('miniatura-da-galeria'); ?></a>
</div>

<!-- FIM -->
				<div class="entry">
					<?php the_content('Read the rest of this entry »'); ?>
					<div class="cl"> </div>
				</div>

				<div class="meta">
					<div class="bg">
						<span class="comments-num"><?php comments_popup_link('0 comentários', '1 comentário', '% comentários') ?></span>
						<p>Postado por <?php the_author_link() ?></p>

					</div>

					<div class="bot"> </div>
				</div>
			</div>

		<?php endwhile; ?>
		<?php if(function_exists('wp_pagenavi')) : wp_pagenavi(); else :?>
			<div class="navigation">
				<div class="alignleft"><?php next_posts_link('« Mais Antigos') ?></div>
				<div class="alignright"><?php previous_posts_link('Mais Novos »') ?></div>
			</div>
		<?php endif ?>
		
	<?php else : ?>
		<h2 class="center">Nada Encontrado</h2>
		<p class="center">Desculpe, Volte mais tarde.</p>
		<?php get_search_form(); ?>
	<?php endif; ?>
	
	<?php get_sidebar(); ?>
<?php get_footer(); ?>

function.php

(Está no final)

<?php
wp_enqueue_script('jquery');// Include jquery
automatic_feed_links();

register_sidebar(array(
	'name'=>'sidebar',
	'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget' => '</li>',
	'before_title' => '<h2 class="widgettitle">',
	'after_title' => '</h2>',
));

function attach_theme_settings() {
	$theme_root = dirname(__FILE__) . DIRECTORY_SEPARATOR;
	include_once($theme_root . 'lib/theme-options/theme-options.php');
	include_once($theme_root . 'options/theme-options.php');
	include_once($theme_root . 'options/navigation-options.php');
	// include_once('options/theme-widgets.php');
}

attach_theme_settings();

function print_comment($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>
	<li <?php comment_class('comment'); ?>>
		<div class="comment-body" id="comment-<?php comment_ID() ?>">
			<?php echo get_avatar($comment, 70, get_bloginfo('stylesheet_directory') . '/images/avatar.gif'); ?>
			<p class="author">
				<?php comment_author_link() ?>
			</p>
			<p class="comment-meta">
				<?php comment_date() ?> at <?php comment_time() ?>
			</p>
			<div class="comment-content">
				<?php if ($comment->comment_approved == '0') : ?>
	 	<em><?php _e('Your comment is awaiting moderation.') ?></em>

				<?php endif; ?>
				
				<?php comment_text() ?>
				<div class="alignleft"><?php edit_comment_link(__('(Edit)'),' ','') ?></div>
				
			</div>
			<div class="reply">
 	<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
			</div>
			<div class="cl"> </div>
		</div>
	<?php
}

# crawls the pages tree up to top level page ancestor 
# and returns that page as object
function get_page_ancestor($page_id) {
	$page_obj = get_page($page_id);
	while($page_obj->post_parent!=0) {
 	$page_obj = get_page($page_obj->post_parent);
	}
	return get_page($page_obj->ID);
}

$nav_limit = 10;
function choco_print_pages_nav() {
	global $post, $nav_limit;
	$current_page_ancestor = get_page_ancestor($post->ID);
	$excluded = get_option('header_nav_pages_exclude');
	if ($excluded) {
		$excluded_pages = "exclude=" . implode(',', $excluded);
	} else {
		$excluded_pages = '';
	}
	
	$pages = get_pages("parent=0&child_of=0&sort_column=menu_order&$excluded_pages");
	
	$html = '';
	
	$i = 0;
	foreach ($pages as $page) {
 	$subpages = get_pages('child_of=' . $page->ID . '&parent=' . $page->ID . '&sort_column=menu_order');
 	$has_dropdown = !empty($subpages) && get_option('enable_dropdown', 'yes')=='yes';
		$classes = array();
		if (is_page() && $current_page_ancestor->ID==$page->ID) {
			$classes[] = "current_page_item";
		}
		
		if ($has_dropdown) {
			$classes[] = "has_dropdown";
		}
		$html .= '<li class="' . implode(' ', $classes) . '">';
		$html .= '<a href="' . get_permalink($page->ID) . '"><span>';
			
		if ($has_dropdown) {
			$html .= '<span>' . apply_filters('the_title', $page->post_title) . '</span>';
		} else {
			$html .= apply_filters('the_title', $page->post_title);
		}
		
		$html .= '</span></a>';
		if ($has_dropdown) {
			$html .= choco_get_pages_nav_dropdown($page, intval(get_option('dropdown_depth', 2)));
		}
		
		$html .= '</li>';
		if ($i==$nav_limit) {
			break;
		}
		$i++;
	}
	echo $html;
}
function choco_get_pages_nav_dropdown($page, $max_levels, $current_level=1) {
	$html = '';
	$subpages = get_pages('child_of=' . $page->ID . '&parent=' . $page->ID . '&sort_columnm=enu_order');
	if (count($subpages) > 0) {
		$html .= '<div class="dropdown dd-level-' . $current_level . '"><ul>';
		foreach ($subpages as $subpage) {
			$html .= '<li>';
			$html .= '<a href="' . get_permalink($subpage->ID) . '">' . apply_filters('the_title', $subpage->post_title) . '</a>';
			if ($current_level < $max_levels) {
				$html .= choco_get_pages_nav_dropdown($subpage, $max_levels, $current_level + 1);
			}
			$html .= '</li>';
		}
		$html .= '</ul></div>';
	}
	return $html;
}
function choco_print_categories_nav() {
	global $nav_limit;
	$excluded = get_option('header_nav_categories_exclude');
	if ($excluded) {
		$excluded_cats = "exclude=" . implode(',', $excluded);
	} else {
		$excluded_cats = '';
	}
	
	$categories = get_categories("$excluded_cats");
	
	$html = '';
	$i=0;
	foreach ($categories as $category) {
		$classes = array();
		if (is_category($category->term_id)) {
			$classes[] = "current_page_item";
		}
		$html .= '<li class="' . implode(' ', $classes) . '"><a href="' . get_category_link($category->term_id) . '"><span>' . $category->name . '</span></a></li>';
		
		if ($i==$nav_limit) {
			break;
		}
		$i++;
		
	}
	echo $html;
}
function choco_print_header() {
	$nav_type = get_option('nav_type');
	if ($nav_type=='pages') {
		choco_print_pages_nav();
	} else if ($nav_type=='categories') {
		choco_print_categories_nav();
	} else /*shouldn't happen*/ {
		choco_print_pages_nav();
	}
}
function choco_get_body_style() {
	$bg_color = get_option('background_color', '#3A2820');
	$bg_image = get_option('background_image');
	$bg_repeat = get_option('background_repeat');
	
	$style = 'background: ' . $bg_color;
	if ($bg_image) {
		$style .= ' url(' . $bg_image . ') center top ' . $bg_repeat;
	}
	$style .= ';';
	
	return $style;
}

function choco_get_theme_path() {
	$map = array(
		'Default Scheme'=>'default',
		'Dark Scheme'=>'darkgray',
		'Red Scheme'=>'red',
	);
	$theme = get_option('choco_color_scheme');
	if (isset($map[$theme])) {
		return $map[$theme];
	}
	return 'default';
}


/** Ativando Thumbnails **/

if (function_exists('add_theme_support')) {
 	add_theme_support('post-thumbnails');
 	set_post_thumbnail_size(120, 90, true);
 	add_image_size('miniatura-da-galeria', 274, 120, true);
 	
}

?>

Brigadão Anderson Narciso!!!

Anderson Narciso · Outubro 27, 2010

To meio que boiando cara, ta tudo certão, não teira porque não funcionar.. a não ser que seje pepino no tema... testa em outro..

GabrielFerrari · Novembro 9, 2010

To tentando aqui até hoje

só falta isso para entregar pro cara.

To tentando achar o arquivo responsavel pelo loop que mostra ela

e bugar para mostrar só a primeira. hehehe

Mas nem isso eu acho.

mazetto · Novembro 10, 2010

No caso do Post Thumbnails não deixe de definir uma imagem destacada, se isso não for feito não resultará em nada mesmo...

Agora para buscar uma imagem da galeria você poderia consultar no banco de dados, na tabela de posts (wp_posts), um post qualquer do tipo (post_type) 'attachment' e que tenha como 'post_parent' o ID do post ativo... é um pouco complicado, mas funciona perfeitamente...

GabrielFerrari · Novembro 25, 2010

ahh desisti!

Valeu a ajuda pessoal

dei meu jeito com o cliente

Alex Hiroshi · Novembro 25, 2010

Não custa deixar uma ideia.

Eu gostaria de fazer a mudança para que mostre a penas 1 foto e ao clicar mostra-se as opções de avançar e voltar para ver as demais.

Não cheguei a ver a página de exemplo, mas se estiver usando a própria galeria do WP, daria para usar um javascript para mostrar apenas a primeira (ou uma das imagem) da galeria, escondendo o resto. Como você só iria esconder e não remover os elementos de imagens, o lightbox acharia essas imagens escondidas e mostraria as opções de avançar e voltar.

Para ser mais específico,o WP cria a galeria com elementos dl dentro de uma div com a classe gallery. Nesse caso, esse javascript ajudaria.

// Necessita da biblioteca jQuery
$('div.gallery dl').not(':first-child').hide();

Arquivado

Editar galeria

Recommended Posts

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

macielcr7 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Narciso 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Narciso 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Narciso 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Anderson Narciso 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

mazetto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alex Hiroshi 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Fóruns

Tempo Real

Informação importante