Create a button and display an ACF Link

Loops & Logic
1

Hello,
I am trying to get the correct syntax for getting my ACF Link to display as a button using L&L.
This is what I have so far, but nothing displays:

<div><Loop acf_file=cad_drawing>
  <a class="button_canflex" target="_blank" href="{Field edit_post_link}" rel="noopener"><Field title /></a>
</Loop></div>

I’m just trying to have the link I put into the ACF field show as a clickable button.

Thanks!

2

Hey @tiabradford

Can you try href="{Field url}" instead of href="{Field edit_post_link}"?

Thank you

3

Hello,
I had already tried this solution, but unfortunately, nothing displayed either.

<div><Loop acf_file=cad_drawing>
  <a class="button_canflex" target="_blank" href="{Field url}" rel="noopener"><Field title /></a>
</Loop></div>

I checked the inspector to make sure nothing was preventing it from displaying or that the class was the issue. It does not show the div in the inspector either.

I originally had the field as an upload, which worked great, but had to change to a link as I needed to make sure that the most current version of the PDF was accessible through the link provided.

4

Hey @tiabradford, are you using this on a page or post also what type of file are you trying to attach to the ACF field?

5

I am using it on a post. I am linking to an external site’s PDF.

6

Hey @tiabradford if you are using an external PDF link then you can try using a Link instead of a File. Here is the documentation for it.

You could try this block of code after you have changed your ACF field to a Link instead

<div>
  <Loop acf_link=cad_drawing>
    <a class="button_canflex" target="_blank" href="{Field url}" rel="noopener"><Field title /></a>  
  </Loop>
</div>
7

I think I’m getting closer. Thanks, I was missing the acf_link in the code. After I had changed it from upload to link, I needed to update. I used the code block provided, but it still does not display. I’m trying it two different ways:

<div>
  <Loop acf_link=cad_drawing>
    <a class="button_canflex" target="_blank" href="{Field url}" rel="noopener"><Field title /></a>  
  </Loop>
</div>
<div>
  <Loop acf_link=cad_drawing>
    <a class="button_canflex" target="_blank" href="{Field url}" rel="noopener"><Field acf_link=cad_drawing field=url /></a>  
  </Loop>
</div>
8

That is good news @tiabradford! Can you tell me what is the name you have set for your acf_link?

You could also try using the tag <Field /> to help you debug what you are trying to show. It should display a json format(you can checkout json format here) of the data where the left side of the colon is the field and the right side of the colon is the value. (you can refer to the image below as an example) We use < Field title /> :
5aa4241c-7e0e-47e8-a4a8-2ecaec216123

9

cad_drawing is the name I have for the acf_link field in ACF

11

I’ve tested this out myself using the exact code and I’m able to work with ACF link fields no problem. Maybe there’s some other unique configuration on your site that we’re missing.

Is it possible to ask for access to your website? You can dm me the credentials.

12

Yes, I was just replying. I will DM the creds.

1 Like
13

Hey @tiabradford

Found out what’s causing your issue. First, you are using a URL ACF Field, not a Link or a File. So what you need is to use <Field cad_drawing />

image
image1125×391 13.6 KB

We suggest doing this instead:

<div>
  <a class="button_canflex" target="_blank" href="{Field cad_drawing}" rel="noopener"> Download PDF</a>
</div>

Since you are using a URL Field and it does not have a Title so you should probably add the “Download PDF” text as a title for the link.

14

Thank you so much! My issue is resolved. I appreciate you taking time out to help me with my problem. I will be sure to keep studying the plugin to understand it fully. :smile:

2 Likes