Link to page with filter – first item not linking correctly

  • If I am on my projects page and select a filter it works perfectly. But when linking to the page with a filter in place – If I copy and paste the URL with a filter selected (like in example link – Mechanical) the first item on the page does not link correctly. When clicked it goes to a different project. It’s like other project are showing up hidden on top of the first item. Wondering if anyone has a solution or a better way to link to a page with a filter in place.

    • This topic was modified 3 years, 12 months ago by tevanduyne.
    • This topic was modified 3 years, 12 months ago by tevanduyne.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi, @tevanduyne! There are some hidden elements on top of the first item on the page:
    Screen Shot 2021 03 25 at 11 20 37 AM

    Are you using any themes or plugins?

    Thread Starter tevanduyne

    (@tevanduyne)

    This was a custom theme. I’m not sure why there are hidden elements only when I copy the link with a filter in place. There aren’t any plugins for the projects page.

    Here is the code below the filters:

    ?>
    <div class=”media-box <?php echo $project_region; ?> <?php echo $project_types; ?> <?php echo $project_services; ?> <?php echo $project_cats; ?> “>
    <div class=”media-box-image”>
    <div data-width=”268″ data-height=”268″ data-thumbnail=”<?php echo the_post_thumbnail_url( $post->ID, ‘project-landing-thumb’ ); ?>”></div>
    </div>

    <div class=”media-box-content”>
    <div class=”media-box-title”>“><?php the_title(); ?></div>
    <?php if(get_field(‘project_location’)) { ?>
    <div class=”media-box-date”>
    <?php the_field(‘project_location’); ?>
    </div>
    <?php } ?>
    <?php if(get_field(‘project_owner’)) { ?>
    <div class=”media-box-date”>
    <?php the_field(‘project_owner’); ?>
    </div>
    <?php } ?>
    </div>
    </div>

    <?php
    $countTwo++; }

    wp_reset_postdata();
    } else {
    // no posts found
    }
    ?>

    @tevanduyne! I looked a bit more into your website styles. When you select an option from the filter, the filtered-out posts get a hidden-media-boxes-by-filter class added to them. This class is probably then used in JavaScript to add inline styles, including display: none;. I suspect that this script doesn’t run on page load, so the display: none is not added inline to those posts. They still have other styles added to them, including opacity:0 and some absolute positioning, which place them on top of the first post, and make them invisible.

    I would probably add a global CSS rule like .hidden-media-boxes-by-filter {display:none;} to make sure that those media-boxes don’t interfere with your page.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Link to page with filter – first item not linking correctly’ is closed to new replies.