Linking thumbnail to pdf file by editing template and using %TITLE-LINK%?

Hello greendolphin, let me see if I get what you are trying to achieve.

I go to CataBlog >> Library and edit an image. Under Fields >> Link I enter a relative or absolute web address to create a hyperlink on the item. If for example your pdf file is located under https://www.yourwebsite.com/location1/location2/tst.pdf. I will enter that URL in the Link to create an absolute link to the pdf file.

When I click on the image from your website it will link to the above URL, which is the pdf file using the following shortcode.

[catablog template="gallery"]

Let me know if that helps you.

Kind regards

I’m now trying

<a href="%TITLE-LINK%" class="catablog-image" %LINK-TARGET% %LINK-REL%>
      <img src="%IMAGE-THUMBNAIL%" alt="" />

but getting access forbidden and the output produced is

`https://localhost/fgh.com/%3Ca%20href=’/wp-content/uploads/2012/11/RAVEN.pdf’%20target=’_blank’%20rel=’next,%20prev,’%3EDUAL%20RAVEN%3C/a%3E’

is there a fix for this?

Hi greendolphin, are you using a template? If you are can you post here the template code?

For example in my example above I used the gallery template, see the code below.

<div class="catablog-row catablog-gallery">
	<a href="%LINK%" class="catablog-image" %LINK-TARGET% %LINK-REL%>
		<img src="%IMAGE-THUMBNAIL%" alt="" />
		<strong class="catablog-title">%TITLE%</strong>
	</a>
	<div class="catablog-description">%DESCRIPTION%</div>
</div>

When you are designing a custom template it should be similar to the code above.

Let me know if this helps you.

Kind regards

Did you use a full URL path including the protocol (https://) like mbrsolutions suggested above.

example

https://www.mysite.com/wp-content/uploads/2012/11/RAVEN.pdf

not

/wp-content/uploads/2012/11/RAVEN.pdf

Can you access the PDF by typing the full path manually into your web browser? If you cannot then the link will never work. If you can, copy the full url and paste it into the link field. Good luck

mbrsolution,

sorry I did not see your post earlier. Yes, I think you understand correctly that I am trying to use the link entry to have the thumbnail launch a pdf file when clicked instead of the original image. I am using the default template and I’m trying to customize. You were able to achieve the same result using the Gallery Template. So “%LINK%” will actually reference the correct URL? I think part of my problem is that %TITLE-LINK% field is not just a url, it produces code that produces a link with a reference to a url and that is why it is not working. I believe in computer programming lingo I am assigning the wrong type to a variable. So am I correct that you were able to produce the desired result with the gallery template? Thanks for your help!!

GreenDolphin

Hi greendolphin, yes that is correct. You will achieve the results by using the gallery template. As I stated above when you click on an image while using the gallery template the image will be linked to your pdf file as long as you enter the correct URL as stated by @macguru2000.

If you have any more questions please let us know.

If this resolves your issues can you please close this ticket thank you kindly.

Kind regards

Yes, you are correct, you should use %LINK% and not %TITLE-LINK%, since title link is not just the link.

You should also read this article, it explains exactly what each token is, just scroll down a bit to see the complete list of token you may use in your catablog templates.

https://catablog.illproductions.com/documentation/making-custom-templates/

Thanks macguru2000 and mbrsolution, the pdf file is now launched by clicking on the thumbnail. I am really grateful for your help. Catablog is a great plugin!!

Here is my new default template. I recently switched from pdf files to gif and found they actually displayed better in a wordpress page. Results varied in browsers and sometimes the image had to be enlarged in order to read the type in the image. I found putting the image in a wordpage to be a huge help. Also have the option of adding more text and using more formatting options from the Weaver ii theme. I’m including the code below in case anyone else finds it useful.

‘<div class=’catablog-row %CATEGORY-SLUGS%’>
<div class=”catablog-images-column”>

<img src=”%IMAGE-THUMBNAIL%” alt=”” />
</div>
<h3 class=’catablog-title’>%TITLE-LINK%</h3>
<div class=”catablog-description”>
<p>%DESCRIPTION%</p>
%BUY-NOW-BUTTON%
</div>

</div>’