[Resolved] Creating a Content Template

[Author]

Posts

[rickB-3]

Toolset Support qs 9-28-20

Hi Christian Cox,

We had to publish our most recent magazine issue and work on other elements of our new website — but now I m back again with my questions about fixing our new site’s CONTENT TEMPLATES.

When we are completely done updating the new site and its plugins and programs — the new site will replace the old site, which will be our publicly viewed site until then.

AA. CONTENT TEMPLATES: 4 PRIMARY PROBLEMS
Comparing a page using a Content Template on our new site —
hidden link —
with the SAME page on our old site —
hidden link —
reveals the 4 main problems to be fixed:

1. TABS for “Details, Reviews, and Contact”
I was able get this working with shortcodes, but using shortcodes created other problems. However — WPBakery, the page builder on my theme, has an element “TABS” which may work. QUESTION: Can I do that while editing with ”Toolset Blocks” — which is the recommended choice from Toolset’s tutorials?)

2. PHOTO GALLERY
The photo gallery of those pages on the new site which use one of the new site’s Content Template — shows only a sliver of each photo. (But when clicked on, the full sized photo appears and can be clicked to see all the photos. However, we are using the same Justified Image Grid coding on all non-Content Template pages of the new site — and they work fine. For example, see the bottom of hidden link

3. COLUMN WIDTH
The 2 columns of text are much narrower. (There also is an author icon on the left; I will ask Themeforest support about eliminating that.)

4. RELATED POST IMAGES
The photos “(“featured images”) on the related posts of the Content Template pages at the bottom are thumbnail size on the old — but too large on the new site. But on a page in the new site, where we have started to add featured images for the related posts, they are the correct size. (Though the image appears unfocused compared to its full-sized original.)
(ex: hidden link)

BB. SOLUTION 1 — CREATE NEW CONTENT TEMPLATES
But — in the Toolset tutorial “Creating Templates to Display Custom Posts” (https://toolset.com/course-lesson/creating-templates-to-display-custom-posts/)

.. the very first steps are ..

Go to Toolset → Dashboard and click the Create Content Template button in the row of the post type you want to design a template for.
Use the WordPress Block Editor to design your template.
Choose blocks from the Toolset section for any part of the template that displays fields (not static elements). For example, use Toolset’s Heading block for any heading that will display a field.
Enable Dynamic Sources for blocks that should display fields of the post that the template displays.

However, in “Toolset > Dashboard” — I cannot “click the Create Content Template button in the row of the post type you want to design a template for” — as you can see on the attached QUESTION: So how would I proceed?

CC. SOLUTION 2 — GET THE CORRECT FORMATTING FROM THE OLD SITE
In your last email (8-19-20) before your vacation, you noted …

“If I edit either the Venues template or Venues CF New in the Content Template editor, neither is editable. There appears to be a JavaScript error blocking the page from loading:”
hidden link

“I can grab the code for the template from the database if I make a clone of the site. I just wanted to confirm that is okay with you.”

That would be OK — in which case m-a-y-b-e I can fix the existing Content Templates in the new site without creating new Content Templates. To do that — do you need me to send the USER NAME and PASSWORD again? For both the OLD and NEW sites?

[Waqar]

Hi,

Thank you for contacting us.

As Christian is on vacation this week, I'll be following up on this ticket.

To better understand how templates are currently set up on the new and the old websites, I'll need access to their admin area.

Can you please share temporary admin login details for both these websites?

Note: Your next reply will be private and please make a complete backup copy of these websites, before sharing the access details.

I'll be in a better position to answer these questions accordingly.

regards,
Waqar

[Waqar]

Hi Rick,

Thank you for sharing these details and I apologize for the delay in getting back on this.

After reviewing your questions and performing some tests on my website, here are my findings:

1. TABS for “Details, Reviews, and Contact”

The Toolset Blocks plugin doesn't include any built-in "Tabs" block ( https://toolset.com/block-item/ ).

If you're going to use only the Toolset Blocks editor (without any third-party page builder), you have these options:

a). You can either use a third-party plugin which offers this "Tabs" feature through shortcodes or blocks inside the Gutenberg editor
OR
b). If you're comfortable with HTML code edits, you can use the tabs HTML from the Bootstrap library, inside a "Fields and Text" block:
hidden link

2. PHOTO GALLERY

The photo gallery seems to be added through the plugin "Justified Image Grid" and it loads correctly, when its shortcode is called directly, but not when it is called using the content of another field.

You can report this limitation to that plugin's author/support and so that they can share a workaround or a script that can be used to properly initialize the gallery in this case.

Is there any specific reason you're using this particular gallery plugin? In case you're open for alternatives, Toolset Blocks also offers a "Gallery" block of its own.
https://toolset.com/block-item/gallery/
https://toolset.com/course-lesson/dynamic-galleries-and-sliders-for-templates-displaying-repeating-image-fields/
https://toolset.com/course-lesson/galleries-grid-masonry-collage-of-static-images-for-pages/

3. COLUMN WIDTH

The active theme is applying the maximum width of 800 px to page's content area, through it's CSS file:
( file: hidden link )

.post-detail.post-detail-style2 .post-share-center-container, .post-detail.post-detail-style5 .post-share-center-container, .post-detail.post-detail-style6 .post-share-center-container, .post-detail.post-detail-style8 .post-share-center-container {
    max-width: 800px;
    margin: 0 auto;
}

You can override that by adding custom CSS code in your content template, for example:

.post-detail.post-detail-style2 .post-share-center-container, .post-detail.post-detail-style5 .post-share-center-container, .post-detail.post-detail-style6 .post-share-center-container, .post-detail.post-detail-style8 .post-share-center-container {
    max-width: 90%;
}

Note: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

4. RELATED POST IMAGES

Those images are being shown through the view named "More From MB Advertiser".

At the moment, this shortcode is being used in that view for showing the featured image:
( ref: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-featured-image )

[wpv-post-featured-image size="mb-related-post"]

You can adjust this shortcode as needed to load the featured image in a desired size, for example:

[wpv-post-featured-image size="thumbnail"]

BB. SOLUTION 1 — CREATE NEW CONTENT TEMPLATES
The instructions in the tutorial are for a website where a content template for a custom post type hasn't been create or assigned, already.

As you already have a content template "Venues CF New", it is correctly shown as assigned in the Toolset Dashboad.

You can go to WP Admin -> Toolset -> Content Templates and create a new one and when it is ready, you can unassign the existing template and assign this newly created one to this post type.

You'll find the "Usage" option in the right options pane, on the content template edit screen.
( screenshot: hidden link )

CC. SOLUTION 2 — GET THE CORRECT FORMATTING FROM THE OLD SITE
I managed to extract the code from the old website's "Venues template" content template, using the database duplicator package and will share it with you in the next reply, seperatly.

regards,
Waqar

[Waqar]

"Venues template" content template (old website):

<span><span>[shareaholic app="share_buttons" id="6817187"]</span>
<span><div class="group">

<div class="left">

[types field="featured-image-venue" width="400" height="400" align="none" resize="proportional"][/types]
<br/><br/>
 <b><font color="#C1517F">Overview</font></b>
<hr>
  [types field="vendor-overview1"][/types]<br/><br/>
Contact: [types field="vendor-contact-name"][/types]<br/>
  [types field="vendor-phone1"][/types]<br/>
  [types field="vendor-email1"][/types]<br/>
[types field="vendor-website1" target="_blank" no_protocol="true"][/types]<br/><br/></span>

<b><font color="#C1517F">Map</font></b>
<hr>
[googlemaps width="399" height="250"]
  
<b>[types field="advertiser-2"][/types]</b><br/>
[types field="vendor-street-address1"][/types]<br/> 
[types field="vendor-city"][/types], [types field="vendor-state1"][/types] [types field="vendor-zip"][/types]<br/><br/>
  
  <b><font color="#C1517F">Awards</font></b>
  <hr>
  [types field="venue-awards"][/types]<br/><br/>
  
 </div>
 
  <div class="right"> 
    [tabs]
    [tab title="Details"]
Guests (Seated Dinner) Up To: <b>[types field="seated-dinner-guests" format="FIELD_VALUE"][/types]</b><br/>
Guests (Cocktail-Style Reception) Up To: <b>[types field="cocktail-reception-guests" format="FIELD_VALUE"][/types]</b><br/>
Tented Events Available: <b>[types field="tented-events"][/types]</b><br/>
Outdoor Ceremonies: <b>[types field="outdoor-ceremonies"][/types]</b><br/>
Indoor Ceremonies: <b>[types field="indoor-ceremonies"][/types]</b><br/>
After-Party Room: <b>[types field="after-party-room"][/types]</b><br/>
On-Site Wedding Planner: <b>[types field="on-site-wedding-planner"][/types]</b><br/>
On-Site Overnight Accommodations: <b>[types field="on-site-overnight-accommodations"][/types]</b><br/>
Nearby Overnight Accommodations: <b>[types field="nearby-overnight-accommodations"][/types]</b><br/>
Wheelchair Accessibility: <b>[types field="wheelchair-accessibility"][/types]</b><br/>
Reception Price Per Person (may vary by day, month, menu, guest count): <b>[types field="venue-price-range-unique"][/types]</b><br/>
Ambiance: <b>[types field="tagline"][/types]</b>[/tab]
    [tab title="Reviews"][RICH_REVIEWS_SHOW category="page" num="all"][RICH_REVIEWS_FORM][RICH_REVIEWS_SNIPPET category="page"][/tab]
    [tab title="Contact [types field="advertiser-2"][/types]"][types field="contact-form-2"][/types][/tab][/tabs]<br/><br/>
    
    <b><font color="#C1517F">Gallery</font></b>
<hr>
  [types field="gallery-2"][/types]<br/>

<b><font color="#C1517F">More</font></b>
<hr>
  
[wpv-view name="More From MB Advertiser" advertiser='[types field="advertiser-2" output="raw"][/types]']
<br/>
    
  </div>
</div>

<br/><br/>

[rickB-3]

Hi Waqar,

Thanks os much for your 2 replies! I will review them carefully and get back to you if I have any questions.

[Waqar]

You're very welcome and I'll wait to hear back from you.

[rickB-3]

I had to handle other issues these past few days. I will be reviewing your very thorough and much appreciated comments this weekend -- and try to implement all your suggestions by Monday or Tuesday -- and then get back to you with any further questions. Thanks again!

[Waqar]

Glad I could help and please let me know if you have any follow-up questions.

For a new question or concern, you're welcome to start a new ticket.

[rickB-3]

There were some family issues this past week related to the pandemic that prevented me spending the time needed on this. I am hoping to review get back to you today or tomorrow. Thank you for your patience.

[rickB-3]

Hi Waqar,

Below are my questions based on you recent response. Thanks again! Rick

1. TABS for "Details, Reviews, and Contact"

The Toolset Blocks plugin doesn't include any built-in "Tabs" block ( https://toolset.com/block-item/ ).

If you're going to use only the Toolset Blocks editor (without any third-party page builder), you have these options:

a). You can either use a third-party plugin which offers this "Tabs" feature through shortcodes or blocks inside the Gutenberg editor

>> QUESTION — I went to Gutenberg Editor, clicking on the large + sign at left, got Blocks, searched for “Tabs” and got no results. I did get an alternate from my Gutenberg search: “Tableau Public Viz Block” which is … “A Gutenberg Embed Block to embed Tableau Public Vizualizations into a WordPress page with basic options. Provides options to hide tabs, hide toolbar, set device and set dimensions of the…” Waqar, Is that what you suggested I use?

OR
b). If you're comfortable with HTML code edits, you can use the tabs HTML from the Bootstrap library, inside a "Fields and Text" block:
hidden link

>> I DID USE SHORTCODES before to create tabs, and it worked. But I lost the Views for “More From MB Advertiser.” When asked about it, Christian Cox said, “The Classic Editor seems to be the source of the problem here. It just does not support nested Types fields inside View shortcodes. When it breaks, you see the error message about the missing View.”

>> SO I AM RELUCTANT to use any shortcodes. And right now, for example, as also noted below … the View “More From MB Advertiser” when clicked on, says “This item does not exist anymore,” in both the Venue and Vendor Content Templates.

2. PHOTO GALLERY

The photo gallery seems to be added through the plugin "Justified Image Grid" and it loads correctly, when its shortcode is called directly, but not when it is called using the content of another field.

You can report this limitation to that plugin's author/support and so that they can share a workaround or a script that can be used to properly initialize the gallery in this case.

Is there any specific reason you're using this particular gallery plugin? In case you're open for alternatives, Toolset Blocks also offers a "Gallery" block of its own.
https://toolset.com/block-item/gallery/
https://toolset.com/course-lesson/dynamic-galleries-and-sliders-for-templates-displaying-repeating-image-fields/
https://toolset.com/course-lesson/galleries-grid-masonry-collage-of-static-images-for-pages/

>> I WILL REPORT this limitation to Justified Image Grid.

>> QUESTION — Re: the Gallery Block … However, the Content Template provides a “Gallery” field in which to insert a line of code, which is easily created with the Justified Image Grid. The Gallery Block in Toolset instead opens a multi-tabbed window with fields to fill in for “General” … “Styling” … and “Design Options”

>> HOW CAN I SOMEHOW insert that gallery block into the Content Template, such that in editing a page created with that Content Template, those fields permit me to add the images, styling, and design options in the “edit page” format?

>> ALSO, THE MULTI-TABBED WINDOW in the Gallery Bloc, as in most other WPBakery blocks, is perfect tfor the tabs we need in our Content Templates. Can I recreate that?

3. COLUMN WIDTH

The active theme is applying the maximum width of 800 px to page's content area, through it's CSS file:
( file: hidden link )

.post-detail.post-detail-style2 .post-share-center-container, .post-detail.post-detail-style5 .post-share-center-container, .post-detail.post-detail-style6 .post-share-center-container, .post-detail.post-detail-style8 .post-share-center-container {
max-width: 800px;
margin: 0 auto;
}

You can override that by adding custom CSS code in your content template, for example:

.post-detail.post-detail-style2 .post-share-center-container, .post-detail.post-detail-style5 .post-share-center-container, .post-detail.post-detail-style6 .post-share-center-container, .post-detail.post-detail-style8 .post-share-center-container {
max-width: 90%;
}

>> QUESTION 1 — Where in the Content Template would I insert this “override code”?

>> QUESTION 2 — in looking at the Source Code for one of our pages created with the Vendors Content Template, there are 45 instances of “max-width:” where the specified width for the first one is 780 the next 36 instances are each 740 px; the 38th is 1000 px, then the 39th-45th is 100%, 600 px, none important, 782 px

>> THEN, IN LOOKING at the Source Code within the Vendors Content Template, there are 288 instances of “max-width:” where among the first 20 widths specified, the widths include 1000 px, 1400 px, 1600 px, 983 px, 980 px, 1280 px, and 2000 px. BUT, there is no “max width: 800 px”

>> SO, OF THE 288 instances of max width in the Content Template… which would be changed? And how owuld I change it so it would be permanent?

Note: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

4. RELATED POST IMAGES

Those images are being shown through the view named "More From MB Advertiser”

At the moment, this shortcode is being used in that view for showing the featured image:
( ref: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-featured-image )

[wpv-post-featured-image size="mb-related-post"]

You can adjust this shortcode as needed to load the featured image in a desired size, for example:

[wpv-post-featured-image size=“thumbnail"]

>> PROBLEM — the View “More From MB Advertiser” when clicked on, says “This item does not exist anymore.” In the Venue and Vendor Content Templates. So how would I change the size via the code line — [wpv-post-featured-image size="thumbnail"]

BB. SOLUTION 1 — CREATE NEW CONTENT TEMPLATES
The instructions in the tutorial are for a website where a content template for a custom post type hasn't been created or assigned, already.

As you already have a content template "Venues CF New", it is correctly shown as assigned in the Toolset Dashboad.

You can go to WP Admin -> Toolset -> Content Templates and create a new one and when it is ready, you can unassign the existing template and assign this newly created one to this post type.

You'll find the "Usage" option in the right options pane, on the content template edit screen.
( screenshot: hidden link )

>> TO CREATE THE NEW TEMPLATE, I would have to use the elements as noted above, which are problematic.

CC. SOLUTION 2 — GET THE CORRECT FORMATTING FROM THE OLD SITE
I managed to extract the code from the old website's "Venues template" content template, using the database duplicator package and will share it with you in the next reply, separately.

>> QUESTION — Could I just copy and paste this, and thereby use this code for a new Content Template?

regards,
Waqar

[Waqar]

Hi Rick,

1. TABS for "Details, Reviews, and Contact"

If you didn't find any relevant blocks from the search within the blocks editor, you can check out these articles that review some of the popular tabs plugins:
hidden link
hidden link

For the views nested in the tab shortcodes not showing, I'll recommend starting a new ticket, with an example page where the issue can be seen and I'll be in a better position to suggest some workaround. This thread has become too long and generalized for a single issue's investigation.

2. PHOTO GALLERY

It is important to understand that the goal of this discussion should be to have a clear picture of what built-in options and limitations you'll have if you'll choose from the available editor options like the Toolset's classic editor, Toolset Blocks editor, or the WP Bakery builder.

Based on that, you should be picking one of them to build your content template and mixing content created using them with each other is never recommended, as it eventually results in compatibility issues.

You can create a list of built-in features that you prefer from each editor, to pick the one that hits the most checkmarks.

3. COLUMN WIDTH

Sorry about the confusion and I just pointed out the CSS file from the theme, so that you had a better idea of what is affecting the page styles. Theme files from shouldn't be edited directly, as any changes added in these files will be lost with the next update.

The right way is to use custom CSS code in the content template to override the default styles.

In classic editor, it is available as a tab below the content section.
( screenshot: hidden link )

In the Blocks editor, it is available in the right options pane.
( screenshot: hidden link )

4. RELATED POST IMAGES

You can edit this "More From MB Advertiser" view (and others) directly by going to WP Admin - > Toolset -> Views and you'll see the shortcode for the images in "Loop Editor" section.

>> TO CREATE THE NEW TEMPLATE, I would have to use the elements as noted above, which are problematic.

- Again, I would reiterate that each editor (classic, blocks and WP Bakery) would bring it's own set of features and Pros and Cons.

You should first be evaluating and decide, which is the one that gives you the best results out-of-the-box, closest to your requirements, and then for any remaining features or bits, customizations and workarounds will need to be incorporated.

>> QUESTION — Could I just copy and paste this, and thereby use this code for a new Content Template?

- Yes, that code was extracted from a content template created using the classic editor and if you're working with a classic editor for your new template, you can paste it as it is.

This may well be pasted into other editors too, but as they'll process the content in their own way, there can be some differences, in the final output.

I hope this makes sense.

regards,
Waqar