Day 4 – Some fun successes with JetProductGallery and a CPT

I have been able to have some fun today, and I believe a light bulb went off in my head about the templating features. I will try to summarize what I have found.

As I talk about today’s findings, I started off wanting to make an artist portfolio system. So first I used jetengine to create a new CPT (custom post type), called artworks. These are the records that will hold a title and featured image of a painting, followed by some meta fields I created called price, description, notes, and so on. I did not use the content field or area of the default post, just the title and featured image. I also used one of the special media field that allows you to upload multiple images into one field. You will see how I use this later.

So far I have found 3 main crocoblock things related to templates. The first is the Jetengine – Listings, which are really templates. In the context of the grid listing features, you first create a listing item. This looks like you are on a page or post, with gutenberg and all its blocks and features. But this “page” is actually a template. I made one for a test called Artwork listing template.

So I then added a regular WP page called portfolio, and I edited that in gutenberg. I pulled in the jetengine block called listing grid. This is then set to the template I made above and magically all my artworks appear – each following the layout I did above. Very cool and easy.

Since I want to also allow the user to click on any artwork image and go to a single page with all the fields of data displayed, I needed to make a single page template just for this. This is where the crocoblock menu item in the admin dashboard comes in – it has 2 theme related sub menus. They botgh sort of work together. They are theme builder and theme templates. I used the theme templates sub menu item to add what is called a theme part. In my case I am creating a single. This will end up displaying the layout for any of the artwork cpt single pages. I won’t go into details here, but you create the layout in gutenberg, with any blocks including the dynamic blocks supplied by crocoblock.

You also have to use the theme builder menu item to create a full template – one that allows (optionally) to change the header, body, and footer of any page. In my case I set the condition to be singular, cpt single – artwork. And I left the header and footer untouched, since my portfolio page is part of the rest of the WP site. In other words, I am using the theme templates laid out above in the middle body part only. Works!

Now comes the crocoblock magic! I want the single cpt – artwork template to also use the cool features of the JetProductGallery plugin. It can make a page look like some cool interactive product page – with image gallery, sliders, zoom, sharing, you name it! I dropped the block called gallery modern (there are others too), and I set it to use that meta field in my CPT where I upload multiple images. It also had a cool setting that allowed me to also use the featured image in with the rest. It looked 1000% better than anything I have made before.

In summary, just having worked on this for a few days, I have already learned enough to make an artwork porfolio system that would have taken me a LONG time using code and PODS. So far so good. No code needed yet 🙂