$25
Modifying Autofocus+ theme to work with Lightview

Hi!

I'm looking for someone who could modify the Autofocus+ (or Autofocus Pro if need be) theme to work with Lightview.

I'm sure it could be quite simple for someone who knows what they're doing (=not me!) since all I need is for the images on the front page (see http://journal.karlotta.com) to open full-size in Lightview (already installed on my system) instead of opening the page of the single post.

There is a custom field "image_url" in the post which would probably do the trick, but I can't figure out how to implement it (Autofocus is really hard to customize for novices like me...)

It would be totally awesome to have this done by the end of the weekend, since this photoblog is the only thing still in construction on my website, and I'd like to go live monday morning!

Thank you to anyone who can help!

- Marie

Marie-Charlotte Pezé | 04/03/10 at 7:50am | Edit

Liveview, autofocus

(3) Possible Answers Submitted...

Last edited:
04/03/10
8:17am
Harris Gordon says:
So you want to show the images after clicking instead the post, am I correct ?
- 04/03/10 8:20am
  
  Marie-Charlotte Pezé says:
  Yes!
  
  And I want to show them using the lightview script (installed in standalone, and also now as a plugin)
- 04/03/10 8:21am
  
  Marie-Charlotte Pezé says:
  I use it on the rest of my site : http://www.karlotta.com - but not as plugin, because it was a bit buggy.
  
  (The rest of the site is on a different wordpress installation with a different theme)
Last edited:
04/03/10
8:39am
Olivia says:
Hi Marie!
You site is looking great. I just want it to suggest you to add link to your home page from your blog. It's not easy to go back to your main site when you are there.

You have to use Lightview Plus plugin for wordpress: http://www.puzich.com/wordpress-plugins/lightview-en
After activating it everything should word fine. If it's not working check that you have a
```
 <?php wp_head(); ?> 
```
in the header of your theme.

Let me know what's the problem that you are having to see if we can help you having your site alive right now!
- 04/03/10 8:46am
  
  Marie-Charlotte Pezé says:
  Thank you Olivia! The journal site is in its first construction phase so there's nothing there for now but a few test pictures. I'll be sure to add a link to the main site :)
  
  The lightview plug-in doesn't work with Autofocus because the pictures on the first page don't link to a photo but to the "single post" page. The structure of the Autofocus+ theme is very complicated, and I can't figure out how to change that link (to display the photo only, and in lightview). And I'm not a total newbie, since I've built my whole entire website myself, and it's full of pretty complex stuff. But I admit that I'm stumped by the Autofocus code...
  
  I don't know if you guys have access to the templates and functions, but if it could help, let me know, I'll post some code for you.
  
  Thank you for your input.
- 04/03/10 9:05am
  
  Olivia says:
  I just downloaded the autofocus theme to see it.
  
  You have to change this code in the home.php file:
```
<h2 class="entry-title post-content-title"><a href="<?php the_permalink() ?>" title="<?php printf( __('Permalink to %s', 'sandbox'), the_title_attribute('echo=0') ) ?>" rel="bookmark"><span><?php the_title() ?></span></a></h2>
```
  For this:
```
<h2 class="entry-title post-content-title"><span><?php the_title() ?></span></h2>
```
  Now you are not going to link to a post any more. That should do the trick. Let me now if you want me to download the plugin and help you with something else!
- 04/03/10 10:13am
  
  Marie-Charlotte Pezé says:
  @ Olivia : you downloaded the autofocus theme; I am using the autofocus+ theme (the new version)
  
  Sorry for all the trouble... I think Maxime is on to something, though :)

Last edited:
04/03/10
11:24am

Maxime says:

In the thematic-functions.php file in your Autofocus directory, you should find :

line 276 :



<?php if ( has_post_thumbnail() ) { ?>

<a href="<?php the_permalink() ?>" rel="bookmark" class="post-image-container"><?php the_post_thumbnail('front-page-thumbnail'); ?></a>

<?php } else { ?>

<a href="<?php the_permalink() ?>" rel="bookmark" class="post-image-container"><?php the_post_image('aflarge'); ?></a>

<?php } ?>

Change the two class="post-image-container" in class="post-image-container lightview"

---------------

EDIT (because I can't edit the others and we don't want a bazillions of Q/R)

Try now :

<?php if ( has_post_thumbnail() ) { ?>

	$thumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post->ID ), 'front-page-thumbnail' ) ;

	<a href="<?php echo $thumbnail; ?>" rel="bookmark" class="post-image-container lightview"><?php the_post_thumbnail('front-page-thumbnail'); ?></a>

<?php } else { ?>

	<a href="<?php the_permalink() ?>" rel="bookmark" class="post-image-container lightview"><?php the_post_image('aflarge'); ?></a>

<?php } ?>

04/03/10 10:02am

Marie-Charlotte Pezé says:
@ Olivia : you downloaded the autofocus theme; I am using the autofocus+ theme (the new version)

@ Maxime : I can't find that line (138 or 276), either in the thematic functions, either in the autofocus functions... and when I search for
```
"<?php if ( has_post_thumbnail() ) { ?>"
```
, it can't find it, so I don't even think that line is in there!

Mmmmmm...
04/03/10 10:03am

Marie-Charlotte Pezé says:
Okay sorry I was looking in the wrong file. Got it. Will try now. Thanks!
04/03/10 10:08am

Maxime says:
Okay :) Now, the lightview *should* popup, but, for the moment, with no image inside it. Am I right ?
04/03/10 10:13am

Marie-Charlotte Pezé says:
Yes!

04/03/10 10:23am

Maxime says:

Okay, good ! Now we have to get the url of the image. Unfortunately, the_post_thumbnail('front-page-thumbnail') and the_post_image('aflarge') give us the whole HTML code <img src... and we just want to have the url.

So, hard part, try :



<?php if ( has_post_thumbnail() ) { ?>



$thumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post->ID ), 'front-page-thumbnail' ) ; 



<a href="<?php the_permalink() ?>" rel="bookmark" class="post-image-container lightview"><?php echo $thumbnail; ?></a>



<?php } else { ?>



<a href="<?php the_permalink() ?>" rel="bookmark" class="post-image-container lightview"><?php the_post_image('aflarge'); ?></a>



<?php } ?>

04/03/10 10:26am

Maxime says:

My bad, try :





<?php if ( has_post_thumbnail() ) { ?>







$thumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post->ID ), 'front-page-thumbnail' ) ; 







<a href="<?php echo $thumbnail; ?>" rel="bookmark" class="post-image-container lightview"><?php echo $thumbnail; ?></a>







<?php } else { ?>







<a href="<?php the_permalink() ?>" rel="bookmark" class="post-image-container lightview"><?php the_post_image('aflarge'); ?></a>







<?php } ?>

04/03/10 10:41am

Marie-Charlotte Pezé says:
Oups! There must be a bug. Check out my page you'll see what I mean!

04/03/10 11:19am

Maxime says:

Working solution using simplexml to pull the src-attributes value out of the get_post_thumbnail. So we get the url of the image :)

<?php $domsxe = simplexml_load_string(get_the_post_thumbnail());

$thumbnailsrc = $domsxe->attributes()->src; ?>

<a href="<?php echo $thumbnailsrc; ?>" rel="gallery[karlotta journal]" class="post-image-container lightview"><?php the_post_thumbnail('front-page-thumbnail'); ?></a>

<?php } else { ?>

<a href="<?php the_permalink() ?>" rel="bookmark" class="post-image-container lightview"><?php the_post_image('aflarge'); ?></a>

<?php } ?>