I am trying to: Display a randomly-selected set of Custom Post Types called GY Cards. These posts are sot of a "Tarot Card" that has a front and back image. The back is always the same and the front is a different image each time, just like a typical playing card.
I already have a Post template set up that displays an individual card using a Beaver Builder Flip Box (actually a 3rd party module from PowerPack). It's a JQuery script I'm sure. Example of an individual post: hidden link
I am NOT using this template in my view of 3 cards... I'm simply trying to mimic the code in the view, but it's not working: I must be missing something, whether a class name or div ID or something.
Link to a page where the issue can be seen:
hidden link
I expected to see: The three card side-by-side with the "flip" behavior. I have manually dragged 2 test modules via the page builder so you see that those work, and also maybe examine the way they are placed vs the way the View (below) is placing them.
Instead, I got:
You can see that the 3 posts are not exhibiting the "flip" behavior but seem to have the front and back images stacked on top of each other.
There must be something I am doing wrong in my Loop template, maybe?
Loop Template:
<div class="fl-module-pp-flipbox">
<div class="fl-module-content fl-node-content">
<div class="pp-flipbox">
<div class="pp-flipbox-wrap">
<div class="pp-flipbox-container">
<div class="pp-flipbox pp-flipbox-front" style="height: 536px;">
<div class="pp-flipbox-inner">
<div class="pp-flipbox-title">
<h3 class="pp-flipbox-front-title">Click on the card to flip</h3>
</div>
<div class="pp-flipbox-description">
<p><img class="alignnone size-full" src="hidden link" alt="" srcset="hidden link 563w, hidden link 196w, hidden link 391w" sizes="(max-width: 563px) 100vw, 563px" width="563" height="863"></p> </div>
</div>
</div>
<div class="pp-flipbox pp-flipbox-back">
<div class="pp-flipbox-inner">
<div class="pp-flipbox-title">
<h3 class="pp-flipbox-back-title">[wpv-post-title]</h3>
</div>
<div class="pp-flipbox-description">
<p><img class="alignnone size-full" src="[types field='card-front' size='full' url='true'][/types]" alt="" srcset="[types field='card-front' size='full' url='true'][/types] 1125w, [types field='card-front' size='full' url='true'][/types] 196w, [types field='card-front' size='full' url='true'][/types] 768w, [types field='card-front' size='full' url='true'][/types] 668w, [types field='card-front' size='full' url='true'][/types] 391w" sizes="(max-width: 1125px) 100vw, 1125px" width="1125" height="1725"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Well, I cannot really help with this.
It is not Toolset Code that is not working, if you insert this HTML in any WordPress page editor even disabling Toolset, it will also not work.
The issue is (as far I saw from a fast analysis) that Beaver Builder generates random identifiers for the HTML classes (see screenshot) and, I think there are also a few typos in the new HTML?
I see differences on the source as for example:
pp-flip-box (BB) became pp-flipbox (your code)
I see several of these differences in the code.
Eventually adjusting them can help.
I suggest to review the HTML that you copied over, and I cannot guarantee this will work, because as said, Beaver Builder seems to use dynamic classes.
I fixed the typos and got a little close but it seems the key is somewhere in this code that is 2 divs above the working modules:
<div data-node="5a63f83bf1023" class="fl-module fl-module-pp-flipbox fl-node-5a63f83bf1023">
If I remove the data-node and fl-node-[numbers] attributes then the existing flipboxes also stop working and display in the same way that my broken view does. So the JQuery must be using this data to identify the flip boxes. I'm wondering if I could programmatically insert a random number attribute like this in my view code.
You can create a Custom ShortCode which returns what you code in it's callback function, and use that in the View Loop as the HTML attribute value.
function mimic_unique_id(){
$unique_id = your_magic_function_to_create_the_id();
return $unique_id;
}
add_shortcode('mimicid', 'mimic_unique_id');
I do not know how they generate that value thou.
Eventually this is bound to the post ID, or similar, then you could use our existing shortcode.
It needs to be discussed with the creators of these scripts.
This is not an issue that is bound to Toolset - the problem would persist even without Toolset.
It is required to know how this script generates the HTML, and then that needs to be adapted in form of ShortCodes or custom HTML/scripts.
I think I may have a solution but I need to create my view differently...
Right now I am randomly picking THREE posts which are all names "Principle [x] Card [xx]" where the x's are numbers.
There are 12 Principles and each has 6 or 7 cards.
Is there a way to filter my view using the TITLE so that I am only displaying ONE card from only one of the FIRST THREE principles? In other words just sets from Principle 1, 2 and 3 would be available. I realize I could have done this using categories but someone else created the posts and now I'd like to find a simpler solution before having to go through editing all the cards posts again.
Basically I'm looking for a filter like "Principle 1" OR "Principle 2" OR Principle 3, but I can't figure how to do it because Views only seems to take ONE text filter.
I am not sure if those are 2 different post types, or how else the content is classified in your website?
You cannot query filter by the Post Title either way, so that is out of scope in Views.
The initial request of this ticket was to adapt HTML to Views, the issue with the Query, and how to setup proper queries for your goal, would be topic of a new Ticket.
I can split this very ticket here, you would not need to open a new one, no worry.
But I would need more information, what you try to achieve and how things are setup.
I would need to know the relationship between Principles and Cards.
If you plan to display only 3 posts with a force title or slug or ID, you do not need a View.
You can simply call the 3 Posts with static URL addresses.
This is much faster than querying the entire database so to get just 3 posts which we already know the ID or title of.
Please let me know the details so eventually we can split the ticket.
Hi. Sounds good. I'll try to explain exactly what I need.
I am using only one Post Type, which is called GY Cards. There are 79 total GY Cards, divided into "Principles" of between 6-8 cards. So, for example there is "Priciple 1, Card 1", "Priciple 3, Card 2" etc. These mimic actual cards, so there is a front and back. Like a typical card the back is always the same and the front is what's different. I am using the "Featured Image" field to contain the universal card back, and a custom image field to hold the card front. The Principles are designated both in the Post Title, ie "Principle 1, card 3", and in the custom category "Card Group", ie "Principle 2".
My client wanted to create a game where a random set of cards is presented to the visitor. But there is a "preview" verson of the game where only a SUBSET of cards is presented: 3 cards would be displayed and these cards were randomly selected from ONLY the first 3 cards of any set. So only "Principle X, Card 1, 2 or 3" could be shown.
I tried to create a view to randomly pick 3 cards from the first 3 of any Principle but I had problems setting up the query, and also getting the FlipBox behaviors properly working.
My alternative is to create THREE views. Each view would select a random card and only return the front of the card, which I could slug into the FlipBox. So instead of putting the FlipBox inside the view I put the view inside the FlipBox. My issue is just how to select randomly from the cards as I need to above, and also prevent duplicated cards in any one game.
Well, this does not work like this.
You have one post type, and Views will randomly choose 3 of it.
It does not matter how the Post Title or taxonomy is, if this is not queried.
Now, to restrict the View you can apply Query Filters to taxonomy (hence, in your case exclude or include taxonomy terms), or by a Custom Field, or similar.
But you need to classify your content more. Otherwise it will not be easy to filter what you want with Views.
There are several ways, from using simple fields up to post relationships, on how you could classify and filter this content.
I suggest to simply add a checkbox field to the posts and the ones you want to have in your preview will be checked.
If you need to narrow this to one group only you can add the query filter for the taxonomy (group) and then with above checkbox you can filter only the posts to be shown (preview).
This then even obsoletes a limit/offset.
OK. Looks like I may need to add taxomomies or a custom field. But just to clarify: you are saying there is NO way to create a query that says, in effect, "Choose ONE card randomly where [Category is "Principle One" OR "Principle 2" OR "Principle 3"] ?
Well, you cannot add a Query filter by post title like that, no.
Hence it's not possible to filter those posts like this.
But you can test if a taxonomy fits the needs.
Then, you would just update those posts which need to appear over all.
