I hope you are very well today and, after a little explanation, may be able to offer some suggestions that will save me some effort or solve this problem completely.
I'm trying to add some custom fields to pages in an existing site. A lot of the page layout is handled by Visual Composer. I've tried creating custom fields with CustomPress, ACF and Piklist with similar results using the shortcode for the custom field or equivalent PHP in the Visual Composer elements.
The fields are for URLs to offsite eBook pages. It varies for each book, but there should be max 7 fields each with a URL for a different eBook seller (Amazon has 4 for different regions). There may also be an additional four fields with URLs for audiobooks, but so far that's only a couple of titles.
I would like to display an icon for each eBook site with the custom field providing the URL, at bit like this:
<a href="[bookstore URL='amazon_us']"> <img src="http://www.louisebay.com/wp-content/uploads/2016/12/Kindle-for-PC-logo.png" alt="Amazon US"> </a>
It should be possible to put a snippet like this into a VC Raw HTML element so that VC handles the layout. The custom field provides the URL to link the image to the store. I've tried it with shortcodes and PHP tags with no success. In every attempt the PHP is removed (which may be a WP security measure) or the quotes/variables in the shortcode are mangled in some way that makes them unusable (I've tried escaping quotes but not sure I've done it correctly).
To avoid the problems of trying to insert a custom field value into HTML, I find myself looking at making one big shortcode that will created the block of bookstore icons, which should look like the eBooks block here:
This is a lot more work than putting some HTML with a shortcode into a VC element. I'm looking for any suggestions for how I can avoid this and do it more quickly/efficiently.
I'm openminded about how to do the custom fields. CustomPress seems solid, with opportunities to expand to a full Book CPT. ACF is well documented and has lots of features. Piklist sees best for custom shortcodes but may require a bit of learning.
I had hoped that using custom fields for these URL would enable the site owner to do more updates on her own and create a more uniform result across publications.