Forums

Linking pdf file/internal page link to an image

Permalink
Hi! I am trying to link a pdf file to an image, and also trying to link an image to another page in a website where i use concrete 5, but it does not work.What i want is that When someone places the cursor on the image then they would be able to get a pdf file by clicking on that image. Please give me a solution! Thanks in advance.
 
robersonkl replied on at Permalink Reply 3 Attachments
To make sure I am correct, you want to link an image to a .PDF file that you have uploaded to your website?

While you are editing the Content block: (See the attached image ['editcontent.jpg'] if you need to know where I am talking about.)
1. Click the "Add Image" link to add your image.
2. Next, click the "Add File" button.
Alright, so you've got the information that you will need for the next bit.
3. Click the "HTML" link (On the attached image - it is located beneath the arrow with the number 3 on top of it.). This will take you to the HTML code for the block (which will look something like the second attached file - 'editHTML.jpg').

Code before you change it:
<p><img src="/index.php/download_file/view_inline/480/" alt="colors.png" width="48" height="48" /><a href="/index.php/download_file/view/481/">entry_packet_2011-12.pdf</a></p>


4. Cut this part of the code from the HTML:
"
<a href="/index.php/download_file/view/481/">
" and...Paste it in front of the img tag (
<img src="/index.php/download_file/view_inline/480/" alt="colors.png" width="48" height="48" />
) and don't forget to delete the extra text after the image...[ie.- "entry_packet_2011-12.pdf" in my example] that is the final code should look something like the following...

<p>
<a href="/index.php/download_file/view/481/">
<img src="/index.php/download_file/view_inline/480/" alt="colors.png" width="48" height="48" />
</a>
</p>


See the third attached image (finalHTML) for final look.

5. Don't forget to click the 'Update' button to update the block and then save your page edits.

SAMPLE code
---------------------------------------------------------
<p>
<a href="[Place the URL to your PDF file here and take off the brackets]">
<img title="Link to PDF!" src="[Place the URL to your image file here and take off the brackets]" />
</a>
</p>

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

PS- I hope this helps and isn't too confusing...I apologize if it is. Let me know. Thanks!
justind replied on at Permalink Reply
justind
This was extremely helpful to me too, thanks robersonki!
kranthi20 replied on at Permalink Reply
kranthi20
Yes, it's simple solution but very useful.
synthia replied on at Permalink Reply
Hi robersonkl!
Thank you so much. It worked well and I am so happy now:) I am grateful to you and thanks again for quick response to my problem:)
robersonkl replied on at Permalink Reply
Glad I could help. :) If you ever have any more questions, let me know and I will see what I can do!
ppisoban replied on at Permalink Reply
ppisoban
I might have missed something, but this method seems overly complicated. I just click the image once when I have loaded it into the Content block then click Add File and the file is automatically linked to the image. You can see more detailed instructions here:http://www.concrete5.org/community/forums/usage/how-to-insert-a-pdf...
robersonkl replied on at Permalink Reply
That's cool...I didn't realize you could do that. That is definitely easier.