[Resolved] Combining HTML, CSS and Toolset

[Author]

Posts

[TimF454]

Howdy,

Please refer to the screenshot. In the title above the image, the client wants the Publisher in ( )s after the title eg : Skilled Nursing Facilities Have Strong Showing in Great Place to Work Data (Skilled Nursing News) --- italicizing the news source and linking to the original article from (Skilled Nursing News).

I have this:
{!{wpv-post-title}!} ({!{types field='publication-name'}!}{!{/types}!})

As you can see, I'm stumped on how to add the link to the original article. I have a custom field 'link-to-article' but is it even possible to combine the two? I can think of ways to italicize the text with CSS, but how would I target just the 'publication-name'?

In the bottom part, the client wants the source name at the beginning of the article eg: (Skilled Nursing News) Employers had to submit an application and have at least 5...

I have this:
{!{types field='publication-name'}!}{!{/types}!}[wpv-post-body view_template="None"]

How do I squeeze the 'publication-name' inside the post-body?

Finally, the client wants "View the Original Article" with custom field 'link-to-article.' No problem there. However, she wants
At the 'publication-name' Skilled Nursing News (under "View the original article)

I have this:
<p style="text-align: right;">{!{types field='link-to-article' title='View the original article' style='font-style:normal;' target='_blank'}!}<br/>
{!{types field='publication-name' title='at' style='font-style:italic;'}!}{!{/types}!}</p>

For some reason, the 'publication-name' is not showing up. I have "allow multiple instances" checked in the custom fields setup area.

Your help is greatly appreciated.

[Beda]

Let me explain how you can use Toolset ShortCodes.

1. Usually you will populate Fields, Terms and post data first.
2. Then, you can display that data with 2 types of ShortCodes:
- Types ShortCodes (for fields)
- Views ShortCodes (for everything else)
3. All these ShortCodes are inserted using the GUI "Fields ad Views"

Usually the ShortCodes will display the values of the type of content (field value, term, post title, etc) with a minimal styling.
Most of those ShortCodes (when inserted) have the option to output the value "as stored in the database" (or, raw)

This ensures that only the value you save is returned (for example in a URL Field, you can return just the URL, or a fully styled link).

4. Now, since we know this we can do all kind of things with Toolset ShortCodes inserted into HTML.
That HTML is then usually addressed with CSS:

So a few examples (I use Square Brackets, its the same as curly ones like you use)
Link with label

<a href="[wpv-post-url]">[wpv-post-title]</a>

Of course above ShortCodes can be replaced with anything you like

Link with label italicized

<a href="[wpv-post-url]"><em>[wpv-post-title]</em></a>

There you can use the WordPress and Toolset Editor Quicktags, we have several to use, just highlight what you want to add HTML for and click on the button, it adds it for you - same as in the WordPress editor.

Put some breaking elements in the same container or push elements around in HTML and CSS needs parent wrapping containers.
This needs all to be added manually in Toolset

<div class="[types field='dynamic-class-field'][/types]" id="[wpv-post-id]">[types field='Anyfield'][/types][wpv-post-body view_template="None" item="3"]</div>

5. Finally, when things aren't showing up, it is usually because they don't exist (not saved for that post) or wrong syntax for the ShortCode, or something else breaking the output.

I would suggest to see what the Field holds for those specific posts and try to output the field in that post.
If that works, in a Content template assigned to it it should work as well (if inserted with the GUI)

[TimF454]

Awesome! Thank you!