[Resolved] linking a URL custom field with an image custom field

[Author]

Posts

[nicoleR-3]

Tell us what you are trying to do?
I have some icons I want to link with the relevant user-added input: website address, email address and social media link.

Is there any documentation that you are following?
I found this thread and it appears to be exactly what I'm trying to do: https://toolset.com/forums/topic/linking-a-url-custom-field-to-image-custom-field/
However, I have followed the steps as best as I could, but I am not able to insert the repeating group into my single post template (I keep getting the pop-up tutorial and can't go any further). And I also don't know the proper syntax to link the URL to the image. I've tried various things but none have worked. Thanks so much.

Is there a similar example that we can see?

What is the link to your site?
hidden link

[Beda]

I think there is an easier approach

It will depend if you want your custom logos or can work with the inbuilt ones as seen in the screenshot.
If those are sufficient you can easily add a Button Block, populate it with the Dynamic Source (for example your custom field where you eventually have the URL's saved) and add the icon, so it will result in a clickable Icon on the front end pointing to the right URL

If you instead want to use custom icons, those will be handled like images.
When inserting an Image Block by Toolset, you can also choose a dynamic link where the image should link to, see "second screenshot"
This would then produce the desired output, being the image (icon) linked to the (dynamic) URL as set on the post.

If you use this in a view or archive, the settings will pull the data from each post in the loop, hence for each post the proper details.

[nicoleR-3]

Thanks, but I am not using Toolset blocks because I prefer the WP Bakery editor and I really dislike the WP Guttenberg editor. Is there a way to do this without using blocks? Or can I use Toolset blocks and avoid having to use Guttenberg?

[Beda]

Toolset Blocks is a Plugin that adds Blocks (and satisfaction) to the Gutenberg Editor of WordPress. Gutenberg is now the default editor in WordPress.

If you prefer to not use Blocks, you can do the above with Custom HTML and using the ShortCodes Toolset offers.
You'd then classically use Views Plugin, instead of Blocks.

If you are editing the templates with a Page Builder that is supported, you'd have to design such image with link in that page builder with the page builders features.

For Custom HTML to create an image that links to a dynamic link, you could use something like below.

<a href="[types field='my-url' output='raw'][/types]"><img src="<em><u>hidden link</u></em>" width="128" height="120" class="size-full" /></a>

This would output your image (icon) linked to the URL added to the Custom Field of slug my-url.
This field, populated in each post, would then feed each icon's link.

Similarly, you could even make the image (icon) dynamic, using a Field

However, this is the classic, older way od displaying things and requires the HTML/ShortCodes if done in a classic Views editor or Content Template.

If blocks this requires more visual interaction only.

Please let me know if I can help with more details!

[nicoleR-3]

Perfect. That was much easier than I thought it was going to be. Thank you so much!!