[stefanpt]

Hi All!

Iv got what may be a unique (maybe even impossible) situation with WP.

Here’s the goal:

Iv got a custom post type with 4 images. Roughly 40 posts.

A user has to be able to select ANY TWO ‘posts’ and compare the images from both, side by side.

Using straight PHP or JS this would be possible, but im worried about this makes everything too static, IE future updates will be a nightmare.

Is there a way to do this with ACF or PODS or really anything else??

Starting to think its a pipe dream!

Thanks!

[warm__tape]

You could use url parameters to store/retrieve the two IDs? ?left=xxx&right=yyy, then your template uses those ids to grab titles/content/images…

[MostlyAUsername]

As an alternative to the above URL solution, you could do it with a form. Loop all the post titles into checkboxes which has post IDs in a data attribute and Only allow 2 selections, then on submission of the form load the images of those selected using the post IDs. Any new posts will automatically be added to the loop.

It’d be a big form though with 40 checkboxes lol.

[rodeBaksteen]

The URL parameter is smart. Another option could be to query all the CPT contents, and show/hide with simple JS based on a dropdown/select of the two pages. If you use lazyload it could only load the required fields and not the images until they are shown. This also makes it future proof if you add more pages.

You could probably also do this with AJAX requests but I’m a hammer/nail guy and don’t know any AJAX 🙂

[flooronthefour]

You could do this with JavaScript and the rest API. This is the kind of situating that reactive programming was built for. Of course, React is the OG Reactive JavaScript library, but there are others out there too.

Vue is good and much easier to learn than react.

Svelte is my favorite and gaining traction in the JS world. (Here is a short talk about Reactive programming by the author of Svelte: https://www.youtube.com/watch?v=AdNJ3fydeao)

Here is the process on how I would do it:

Create a custom rest endpoint to deliver the post titles, IDs. https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/

Create another custom endpoint the deliver the image URLS and any data that is paired with the images. You could load all 40 posts if you really needed to but I would try and target just the posts you wanted using the post IDs.

Create a small svelte application to embed on the WordPress page to handle the reactive job of displaying the images. Use Fetch() to grab the data from the endpoints.

The application would be really simple. You would just need to define objects for SIDE A and SIDE B, then let the code react to which object is loaded into each side.

This honestly seems like a perfect project to dive into the world of reactive JS.

[stefanpt]

So after days and days of hair pulling Iv got a working solution. Perhaps someone has a similar case. Here it is

1. Form submission passes custom post ids via GET REQUEST

2. Get custom post field value (image url) using “get_the_field( ‘field_name’, $post_ID)”

3. Echo out image urls into either a slider or ‘before-after’ slider

Let me know your thoughts 🙂

[aamfk]

Sounds like woocommerce to me. And turn off the add to cart button.

[Author]

Posts