liquidRock

Also, It would be a good idea besides showing and allowing us to edit Sort #, but the ability to organize the list based on it. It’s difficult finding things when many categories are used.

thanks

I tried just using [+query:attachment_category+] for the hidden div rel, and it seems to work.

The first gallery is still loading the second gallery’s classes and IDs. I ended up making it’s own template in the meantime. If you want to check the code once I have this up on my testing server I can give you temp access if you like. There must be a bug somewhere that’s doing this.

So far all seems to be working though. Will be in touch if it explodes 😉

In case anyone else has the problem of duplicates, here’s how I fixed it.

You need to change the <a> tag that triggers fancybox, using data-trigger-rel attribute with the group name of your image links, and instead of the fancybox class you add a fancybox-trigger class. The MLA template grabs the category slug for data-trigger-rel attribtue which would match the rel of your hidden links.

<a data-trigger-rel="[+terms:attachment_category(slug),single+]" class="clickBlock fancybox-trigger" href="[+filelink_url+]" title="[+terms:attachment_category(name),single+] gallery" > </a>

Then, in your footer, you add the following jQuery function so that your trigger works and the image link of the trigger does not load into fancybox:

$(document).ready(function() {
	$(".fancybox-trigger").click(function() {

	    $("a[rel='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click');

	    return false;

	});
});

sorry for all the messages, but I managed to get the ID and rel slugs working as mentioned in my last response. 🙂

In case you’re wondering, here’s my PHP that loads the shortcodes. I also tested the shortcodes in a regular wordpress page just using the shortcodes, and I get identical behavior.

<?php
// GRAPHIC DESIGN
echo do_shortcode('[mla_gallery attachment_category=graphic-design mla_style=none mla_markup=single-image-section]');
echo do_shortcode('[mla_gallery attachment_category=graphic-design mla_style=none mla_markup=fancybox-hidden]');

// BRANDING & LOGOS
echo do_shortcode('[mla_gallery attachment_category=branding-logos mla_style=none mla_markup=single-image-section]');
echo do_shortcode('[mla_gallery attachment_category=branding-logos mla_style=none mla_markup=fancybox-hidden]');

// PHOTOGRAPHY
echo do_shortcode('[mla_gallery attachment_category=photography mla_style=none mla_markup=single-image-section]');
echo do_shortcode('[mla_gallery attachment_category=photography mla_style=none mla_markup=fancybox-hidden]');

// ILLUSTRATION
echo do_shortcode('[mla_gallery attachment_category=illustration mla_style=none mla_markup=single-image-section]');
echo do_shortcode('[mla_gallery attachment_category=illustration mla_style=none mla_markup=fancybox-hidden]');

// WEB DESIGN
echo do_shortcode('[mla_gallery attachment_category=web-design mla_style=none mla_markup=single-image-section]');
echo do_shortcode('[mla_gallery attachment_category=web-design mla_style=none mla_markup=fancybox-hidden]');

// FONT-DESIGN
echo do_shortcode('[mla_gallery attachment_category=font-design mla_style=none mla_markup=single-image-section]');
echo do_shortcode('[mla_gallery attachment_category=font-design mla_style=none mla_markup=fancybox-hidden]');
?>

I’ve been playing with this but have a few problems. Your code lacked a section closing tag but I found that quick 🙂 I also removed the tag for header image as I’m loading that with CSS as a background image.

1) The icons were defined in the actual HTML/PHP, so the letter “G” was only for the graphic design icon. I’m going to try using pseudo element :before to see if that will load the correct icon even if the tag is empty without doing something weird.

2) For some reason I can’t track down, the graphic design gallery does not work even though the slug is formatted correctly. It’s loading my second att. category: instead of graphic-design, it’s loading branding-logos. Even stranger is that the branding-logos gallery that loads second is correct, as are the rest of the galleries.

3) The group # must change for each section and increase by 1. So the first gallery is group1, second is group2, etc.. Maybe it’s not possible to automate this to make them increment, and I’ll need to create a template for each section?

4) The way fancybox works when using groups: each link is added to the group that has the same group name (group1, group2, etc.). In this case, getting the single link (the newest image uploaded, what the first MLA template is grabbing) that fires off fancybox, it’s also going to be added to the group, which means when the hidden links are generated the first image is is the same, hence we get a duplicate image in fancybox.

This is the same problem I had before using MLA. It’s just the way fancybox works. If you have duplicate links it uses both. I’ll check the API and see if it can automatically remove duplicates, but they have horrible documentation. I couldn’t work out the PHP needed to omit the first entry in the array from the gallery I was querying originally. Since we’re using shortcodes I’m not sure if I can use PHP to check the code generated and then delete a duplicate from the hidden div, or if javascript may be needed to strip out that first <a> tag after the document is ready.

Is there a way with MLA to omit the first image from the hidden template? If so, then I think this is going to work as I’d hoped 🙂

This is definitely on the right track though, just a few caveats to work out.

thanks again for your continued help.

Thanks for the reply. Was the end of along day when I wrote that so probably wasn’t ideal.

Yes, I’ve already built fancybox 2 (from fancyapps) into my theme instead of using a plugin, and it works with the hack way I did it for grabbing images. It works, but there’s a manual part. Your plug-in is doing what I need for providing a way to easily categorize, tag, and then call up images from a specific category.

With your plugin, I’m having trouble understanding the syntax of how I would generate a basic list of links with the full image url that pulls the necessary data from the media based on att. categories. I don’t actually need the markup for the section but it might streamline things if I could do that. Right now it’s really for what is going in the invisible div (and that primary link that fires off the lightbox). If I could do this just with your shortcode, then I could probably bypass the WP_Query altogether and just drop 8 of your shortcodes. That would mean dispensing with the invisble div and just keeping the first image link visible and the others being hidden.

Here’s an example of my loop and how I’m creating the blocks for each gallery (yeah, it’s a lot) but the mla is grabbing the image post url, not the full image url. At the moment the query is set for only 1 post per page because I was using that to simply grab the latest image link and add that to the clickable <a> that covers the section, and count the gallery images. Spent a week trying to find how to just pull all the images into an array and display them with a foreach but all info I could find was about post attachments, not pulling unattached media from the library that was in categories.

<?php
// GRAPHIC DESIGN
$images_query = new WP_Query( array(
  'post_type' => 'attachment',
  'post_mime_type' => 'image',
  'posts_per_page' => 1,
  'order' => 'DESC',
  'post_status' => 'any',
  'tax_query' => array(
    array(
      'taxonomy' => 'attachment_category',
      'field' => 'slug',
      'terms' => 'graphic-design'
    )
  )
) );

if ( $images_query->have_posts() ) {
	while ( $images_query->have_posts() ) {
		$images_query->the_post();
		// below grabs the info of the latest image queried above
		$src = wp_get_attachment_image_src($images_query->ID, 'full' ); // image url
		$post_num = $images_query->found_posts; // get number of images in category

?>
<section id="graphic-design" class="image-block cf">
	<div class="header-image"></div>
	<header>
		<h3>graphic design</h3>
		<div class="image-type-icon icon-graphic-design">
			<p>G</p>
		</div>
	</header>

	<div class="image-content">
		<?php echo category_description( 87 ); // manual, not sure how to make dynamic ?>
	</div>

	<footer class="image-meta cf">
		<p><?= $post_num ?> images</p>
	</footer>

	<a class="clickBlock fancybox" rel="group1" href="<?php echo $src[0] ?>" title="graphic design gallery" >&nbsp;</a> <?php // the clickable link that covers the section ?>
	<div class="fancybox-hidden" style="display:none;"> <?php // the invisible div ?>
		<?php echo do_shortcode( sprintf( '[mla_gallery %1$s="%2$s" mla_link_href={+link_url+} mla_link_attributes=\'class="fancybox" rel="group1"\' mla_caption="{+title+}" mla_debug=false]', $images_query->query_vars['taxonomy'], $images_query->query_vars['term'] ) ); ?>
		</div>
	</section>
	<?php
	}
	} else {
		// no attachments found
	}
	wp_reset_postdata();
	?>

And here’s my old foreach loop with the invisible div. This worked but was manual (and I didn’t extend it for all image info) and I had a duplicate image from my WP_Query. So I was making private posts for each gallery and had a gallery shortcode in them to pull the image links as I couldn’t work it out the proper way.

I really need to grab the wp_get_attachment_url, post_content, post_excerpt, and _wp_attachment_image_alt values for each image. The att. catagoery and att. tag should be straigthforward (i think).

<div class="fancybox-hidden" style="display:none;">
	<?php
	$gallery = get_post_gallery( 320, false );
	$ids = explode( ",", $gallery['ids'] );
		foreach( $ids as $id ) {

			$link = wp_get_attachment_url( $id );
	?>
			<a class="fancybox" href="<?= $link ?>" rel="group1" title="<?= $title ?>"></a>
	<?php } ?>
</div>