Modifying Autofocus+ theme to work with Lightview WordPress
- SOLVED
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 [[LINK href="http://journal.karlotta.com"]]http://journal.karlotta.com[[/LINK]]) 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
Answers (3)
Maxime answers:
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 <em>class="post-image-container"</em> in <em>class="post-image-container lightview"</em>
---------------
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 } ?>
Marie-Charlotte Pezé comments:
@ 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...
Marie-Charlotte Pezé comments:
Okay sorry I was looking in the wrong file. Got it. Will try now. Thanks!
Maxime comments:
Okay :) Now, the lightview *should* popup, but, for the moment, with no image inside it. Am I right ?
Marie-Charlotte Pezé comments:
Yes!
Maxime comments:
Okay, good ! Now we have to get the url of the image. Unfortunately, <em>the_post_thumbnail('front-page-thumbnail')</em> and <em>the_post_image('aflarge')</em> 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 } ?>
Maxime comments:
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 } ?>
Marie-Charlotte Pezé comments:
Oups! There must be a bug. Check out my [[LINK href="http://journal.karlotta.com"]]page[[/LINK]] you'll see what I mean!
Maxime comments:
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 } ?>
Marie-Charlotte Pezé comments:
Awesome!! A million thanks!
Harris Gordon answers:
So you want to show the images after clicking instead the post, am I correct ?
Marie-Charlotte Pezé comments:
Yes!
And I want to show them using the lightview script (installed in standalone, and also now as a plugin)
Marie-Charlotte Pezé comments:
I use it on the rest of my site : [[LINK href="http://www.karlotta.com"]]http://www.karlotta.com[[/LINK]] - 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)
Olivia answers:
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!
Marie-Charlotte Pezé comments:
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.
Olivia comments:
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!
Marie-Charlotte Pezé comments:
@ 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 :)