[Resolved] Formatting grid from classic editor view output

[Author]

Posts

[elizabethO-2]

Tell us what you are trying to do? I have merged two views into a single output using the classic editor. I don't know how to format the grid to look like my other pages.

Is there any documentation that you are following? Toolset

Is there a similar example that we can see? The menu item Trek Tourism -> Named Places is the format I would like to achieve. The menu item Trek Tourism -> Places to Visit is the combined view output; not pretty and images are distorted.

What is the link to your site? hidden link

Additionally, please check out how i am using the relationships between the Site (child) and the Event (parent for only some Sites) post types. The template for Sites displays Event information and, likewise, the template for Events displays Site information. This way the user can navigate forward and backward through the relationships.

Additionally, there is an issue with the Event DS9: S1 E1-2 Emissary. On the phone layout, the title is not in the header style as defined in the template for Events. For all of the other DS9 items, the title is in the correct format. What happened here? see Trek Tourism -> Filming Locations -> DS9: Deep Space Nine -> Season 1 E1-2 Emissary.

Additionally, the page Conventions, Conferences, Festivals will not let me edit it. What happened here?

New threads created by Waqar and linked to this one are listed below:

https://toolset.com/forums/topic/split-formatting-of-title-not-correct-for-a-single-item/

https://toolset.com/forums/topic/split-pages-are-not-editable/

[Nigel]

Hi there

It's hard to say just looking at the front end what the cause of any of the problems are. I did check the pages you referred to, and I see JavaScript errors in the browser console. I'm not sure what you mean exactly by "merged two views into a single output".

Could we get access to the back end of your site to take a look at your set up?

Let me mark your next reply as private so that we can get log-in credentials from you—you may want to create a temporary admin user for us to use that you can later delete. And be sure to have a current backup of your site.

[Waqar]

Thank you for sharing the access details.

I've made some changes to the 'Loop editor' section of the view 'CombinedPlaceView-new' so that its HTML output structure is similar to the one used on the 'Named Spaces' page:

[wpv-layout-start]
	[wpv-items-found]
	<div class="js-wpv-loop-wrapper">
		<div class="tb-grid">
		<!-- wpv-loop-start -->
		<wpv-loop>
			<div class="tb-grid-column">
				<div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode">
					[wpv-post-body view_template="loop-item-in-combinedplaceview-new"]
				</div>
			</div>
		</wpv-loop>
		<!-- wpv-loop-end -->
		</div>
	</div>
	[/wpv-items-found]
[wpv-layout-end]

In the CSS editor of the view, I've included the following custom CSS code:

.js-wpv-loop-wrapper > .tb-grid {
	grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr);
	grid-column-gap: 40px;
	grid-auto-flow: row;
}

.js-wpv-view-layout .tb-grid-column {
	box-shadow: 0 0 10px 0 rgb(0 0 0 / 23%);
	border-radius: 6px;
	margin-bottom: 20px;
	color: rgba( 0, 0, 0, 1 );
	text-align: center;
}

.js-wpv-view-layout .tb-grid-column .tb-image-caption {
	width: 75%;
	margin: 10px auto 10px;
	font-weight: bold;
	line-height: 1.4;
}

You'll note that the formatting of the two pages is similar now.

I've checked and the relationship between the 'Site' and the 'Event' post types seems to be configured and showing correctly on the respective single post pages.

For the other two questions, I've created new tickets and will follow up on them shortly. We encourage you to start a separate ticket for each question or concern.

[elizabethO-2]

Thank you!! I have struggled with this for a while.
It looks great in the desktop layout, but on the phone layout it looks like it did before. Is there a way for it to adjust to different devices? (desktop, tablet, phone)?
Attached are screenshots from my phone
note that the second image is distorted and exceeds the contained area.
Your help on this has been impressive. Thanks.

[Waqar]

Thanks for the update and glad I could help.

I noticed that the page's styles were showing differently for the logged-in and the logged-out users.

I've cleared the cache and disabled the following two options from WP Admin -> Speed Optimizer -> Frontend -> JAVASCRIPT:

-Combine JavaScript Files
- Defer Render-blocking JavaScript

Now the styles are loading correctly for all users on all screen sizes. You can clear your mobile browser's cache and then test the layout again.

[elizabethO-2]

I noticed that the page has been modified for the phone screen. However, it looks like it was modified in the wrong way. Instead of adjusting the number of columns (see Named Places on phone layout), each column was minimized and is no longer readable. I have attached the screenshots.
Thanks!

[elizabethO-2]

I was able to get this layout on the Named Places by setting the following value (see attached) for the mobile layout. How do i do this in the classic editor?

The problem is that this setting needs to be "inside the loop" in the desktop layout, and "outside the loop" in the mobile layout. Unfortunately, it will only allow one setting regardless of the layout.

Thanks.

[elizabethO-2]

I am finding the classic editor too much trouble for what I can get. I rebuilt the page using only sites so that it would present properly. If you find an answer I can use it, but otherwise I am moving on.