Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

CPT Archive in Table

  • Hi,
    I have tried multiple methods to try this, but seem to be hitting a wall on each attempt.
    I have a CPT – created with ACF.
    The post type is ‘Riders’
    The CPT has several custom fields (no editor content), just fields.
    I need to output them to a table – one row for each ‘rider’

    I have tried creating a custom block for use in a page – it fails to show.
    Tried Copying over archive.php to the child theme, and adding the table there, fails.
    Tried setting up a page with a query loop – but the Query Parameters only allow me to select Posts or Pages. Not Riders.

    Which approach would work best to achieve this?
    If it helps, the event last year had around 250 riders – so there’s a lot of posts to call with this one.

    Any help / pointers would be gratefully received.

    Thanks, Mark

  • Hi there,

    in your ACF CPTs Advanced Settings, is the Show in REST API checked >
    As that should then show the CPT in the Query Loops Post Type parameter.

  • Hi David,
    Yes – Show in REST API is ‘on’

    Base URL – is empty
    Namespace Route – wp/v2
    Controller Class – WP_REST_Posts_Controller

    They should be the default settings I believe.

  • Found the issue for it not showing in the Query Loop parameter…
    In ACF post type, URL’s ‘Publicly Queryable’ was off.
    Turned it on, and now it shows in the Query Loop parameter.

    Adding a link in the Private Info
    That is a link to a previous (HTML / Wix) layout for the page.
    I need to replicate a similar layout using GP/GB
    Any thoughts how to best approach this?
    The table will have 11 columns, with probably 250+ rows.

  • Oh ok, that would do it.
    Hmmm… so the original example is outputting a HTML Table, is that markup required ?

  • It’s not required, but it’s what they have used over the last number of years – it’s what they are used to.
    Obviously looking to improve with the new site, where possible.

    If I opted for row & grid, It’s getting a consistent width for each column.
    And then of course there’s small screens to consider.
    With 11 columns – eight are fairly narrow, but three are wider – names & addresses.

    Anything has to be better than the HTML table used previously.

  • Anything has to be better than the HTML table used previously.

    I wholeheartedly agree in all areas , especially when it comes to responsiveness, but tables are real good at one thing and that is providing consistent column widths.

    If you wanted to do this using GB, you can. but it will have its fare share of issues, and would require some CSS I reckon.

    1, Add a GB Query Loop block and set the params accordiingly.
    2. select the Post Template block, and set its Layout to Display Flex, Flex-direction: Row
    2.1. on Mobile set the Flex Wrap to Wrap.

    3. inside the Query Loop add a Container Block, apply the border styles and the little amount Spacing > Padding it needs to make a fake table cell.
    3.1 its Layout > Flex Child set the Basis to a Pixel value that suits the width of that column. eg. 100px
    3.2 Alternatives to using fixed widths is to use the Flex Grow property. With this you can set the fractional amount of the overall row width.
    So if you have 11 containers and they all have a Flex Shrink of 0 ( meaning won’t shrink ) and all have a Flex Grow of 1 they will all occupy 1 / 11th of the row width.
    If you set two columns to Flex Grow 2 those would both occupy 2 / 13ths of the overall width etc…

    4. Inside the Container add a Headline block and set its Dynamic Data to the Post Title or the Post Meta and your required Field Name.
    4.1 Tweak 3.1 accordinlgly.

    5. Repeat 3 for each column.

    For the Table header, you would have to add a separate container before the query loop using the same flex layout.

    The table numbers would need some CSS and counter pseudo element.

    If you feel like giving that a shot, let us know if you get stuck πŸ™‚

  • Thanks David!
    This is going to take some time to try… a very large coffee is going to be required!

    In 3.1 you mention a pixel value.
    I was thinking of doing the narrow columns (8 of) at 8%
    And the wider columns (3 of) at 12%.
    (8×8) = 64 (3×12) = 36 : 64+36 gives me the 100%.
    Will try both approaches, see what tests better – will take some trial & error.

    CSS isn’t a problem.
    The order_by will have to be set by the custom field ‘leg_number’ to keep the routes/legs in order.

    Thanks for help!

  • Yeah you can use % instead of px
    I prefer using the flex basis fractions option.

    Note: The thing with flex box is the children can grow and occupy more space then your specify if their siblings let them. This can happens because the child contains text and thats happy to fill more space. Setting the Flex Shrink to 0. is a good way to stop that whatever method you use.

  • Hi @David,
    I got this all sorted just after our last messages.
    Thought I would drop a link in, so you can see how it came together.
    I have added the details to the Private info.

    Once logged in, view the front-end then go to the Timetable page.

    Thanks for your help on this one!

    Mark

  • Ooh i am intrigued… but the login won’t allow me to view the pages, it just shows me the Coming Soon πŸ™

  • Two ticks, must need admin access – not editor

  • Try it now – it was the settings in the ‘Coming Soon’ plugin was restricting access to the front-end for ‘Admin’ only.

  • Oh wow – now thats what i call a responsive table!
    Awesome work, and thanks for sharing this with us – its really great to see whats possible

  • Cheers David – you tried it on smaller screens then?

    The site is still in development – awaiting content & images etc.

    A bit of a change to the previous version!

  • Yeah i played with the responsiveness πŸ™‚
    Really, really nice job with building that layout.
    The load more was an extra surprise too.

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.