Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Maja B.
12,984 PointsWordPress - How to wrap an image in an <a> tag?
Hi, I have a WordPress page. I have a custom post and an image inside of it. I would like have this functionality:
A user clicks on the image and that gets him to the image page Something similar that happens in this video:
http://teamtreehouse.com/library/jquery-basics/creating-a-simple-lightbox/preparation
Here is the code that I'm working on:
<a href="WHAT SHOULD I WRITE HERE?"><img src="<?php the_field( 'image' ); ?>" alt="<?php the_title(); ?>"></a>
The image was added through Dachborad/Add media and it lives in the wp-content/uploads/....... folder.
Does anyone know how to call that href?
If I open the image in the library, the URL I need is there. For example: http://localhost/myproject/wp-content/uploads/2014/09/hello.jpg
But how to call that URL?
3 Answers
Danny Nicolas
3,762 PointsI'm guessing this is for a Wordpress or other php template.
Use the same code that grabs the image location.
<a href="<?php the_field( 'image' ); ?>">
<img src="<?php the_field( 'image' ); ?>" alt="<?php the_title(); ?>">
</a>
If
<?php the_field( 'image' ); ?>
Returns
http://localhost/myproject/wp-content/uploads/2014/09/hello.jpg
Then when executed, the source will look like:
<a href="http://localhost/myproject/wp-content/uploads/2014/09/hello.jpg">
<img src="http://localhost/myproject/wp-content/uploads/2014/09/hello.jpg" alt="<?php the_title(); ?>">
</a>
Rich Bagley
25,869 PointsHi Maja,
Hope I have understood this correctly. When you add an image to a post/page you have the option to link to:
- a media file (the image itself)
- an attachment page (a page containing the image)
- a customer url (e.g. http://www.example.com/)
- or none
You can do this from the post of page by clicking on Add Media > Choosing the image > Selecting one of the above options from the Attachment Display Settings on the right hand side. You would then insert it into your page or post to see the image with or without the link.
Thanks
-Rich
Maja B.
12,984 PointsThanks ...
Yes I would like to have the first option ... I would like to link my image to itself.
But I need to do it with the code ... not in the Dashborad because I have several images and each one of them has its own url (like http://localhost/myproject/wp-content/uploads/2014/09/hello.jpg)
So, when I call the image I call it like that:
<img src="<?php the_field( 'image' ); ?>" alt="<?php the_title(); ?>">
but this of curse does not link it to anything. If I want to link it to itself I guess I have to wrap it into <a> tag like this:
<a href="??????">
<img src="<?php the_field( 'image' ); ?>" alt="<?php the_title(); ?>">
</a>
What I don't know is what to write in the href to get the particular url of that image.
Can you help?
Rich Bagley
25,869 PointsHi Maja,
Yes the above should do the trick. Simply change the href to the path of the image you currently have in the image src and it will link to that image.
Is that what you mean?
Thanks
-Rich
Maja B.
12,984 PointsYes that's what I want to do. But I cannot just write in the url of that particular image because I need a dynamic functionality. If I click that image I would need that link... if I click some other image I would need the url of that image and so on. The link should not be linked to just one image it should wok for any image I click.
You know what I mean?
Rich Bagley
25,869 PointsHi Maja,
The dynamic image path would depend on how you are retrieving this information, e.g. using PHP and a database, so I'm not sure that I could advise on this I'm afraid. There are ways to reference the path dynamically but you would still need to manually enter the image name and extension manually.
WordPress obviously handles this for you via the dashboard as you insert the image in to a post or page.
Sorry I couldn't be more help and hope you manage to resolve this.
-Rich
Maja B.
12,984 PointsOk, thanks. At least I know I'm somehow on the right track ... Cheers, Maja
Maja B.
12,984 Points:)))))))))
It's simply:
<a href="<?php the_field( 'image' ); ?>">
<img src="<?php the_field( 'image' ); ?>" alt="<?php the_title(); ?>">
</a>
because the_field( 'image' ) gets the url of the image - the url I wanted to have.
Cheers, Maja (an absolute beginner)
Rich Bagley
25,869 PointsHi Maja,
Glad you got it sorted...although I thought that's what I had put in the above post?
"Simply change the href to the path of the image you currently have in the image src and it will link to that image."
I should have been clearer that the PHP code could also be copied :)
Thanks
-Rich
Maja B.
12,984 PointsI see now yes ... but at that time it did not mean anything to me ... sorry. M
Rich Bagley
25,869 PointsNo it's fine. It's my fault for not including the code snippet.
Thanks
-Rich
Muhammad Mohsen
Courses Plus Student 10,843 PointsHi Maja,
You can use wp_get_attachment_image_src() Or wp_get_attachment_url() to get the url dynamically
http://codex.wordpress.org/Function_Reference/wp_get_attachment_url http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
basic example:
<?php
$image = get_field( 'image' );
/*
* receive: the attachment ID
*
* Result : http://wp.dev/wp-content/uploads/2014/08/176610601.jpg
*/
wp_get_attachment_url($image['id']);
Important thing to mention: Make sure that you're returning an object from Advanced custom fields plugin in order to be able to get the attachment id.