Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] How to make whole post div clickable in blog / archives

Home Forums Support How to make whole post div clickable in blog / archives

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #415812
    Zach

    I’m using GPP 1.5. I’m using columns for the blog, blog archives, and CPT archives:
    https://www.zachpoff.com/site/artwork/
    I want to make each article grid div clickable but I’m struggling with the CSS technique mentioned above. I thought I could select the post title link (without selecting the title of single posts too) this way:

    .entry-header .entry-title a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none;
        /* Makes sure the link doesn't get underlined */
        z-index: 10;
        /* raises anchor tag above everything else in div */
        background-color: white;
        /*workaround to make clickable in IE */
        opacity: 0;
        /*workaround to make clickable in IE */
        filter: alpha(opacity=0);
        /*workaround to make clickable in IE */
    }

    But it produces strange effects (title link disappears, links seem to overlap and cover huge areas) so I’m clearly missing something. I had better luck selecting the “read more” link, perhaps since it’s immediate parent is the div whose dimensions I want the link to fill? (The link text still disappears though, and some posts have manual excerpts so they won’t have a “read more” link.)

    Am I missing something obvious? I’m really trying to avoid JS here, but maybe there’s a hook I could use to wrap the whole div in a link since html5 allows that?

    Thanks for any insight.

    #415925
    Tom
    Lead Developer
    Lead Developer

    Totally untested, but if you want to avoid javascript, you could do this:

    add_action( 'generate_before_content', 'tu_open_block_link' );
    function tu_open_block_link() {
        if ( is_singular() || is_404() ) {
            return;
        }
    
        echo '<a class="post-block-link">';
    }
    
    add_action( 'generate_after_content', 'tu_close_block_link' );
    function tu_close_block_link() {
        if ( is_singular() || is_404() ) {
            return;
        }
    
        echo '</a>';
    }

    Then you would make your link a block element:

    .post-block-link {
        display: block;
    }

    You’ll likely need some more CSS, but that should be a good start.

    #416409
    Zach

    That markup confused browsers mightily. Even though the page source showed that each post was wrapped by the anchor, the inspectors in Safari and Firefox showed a phantom </a> before the rest of each post started. I know html5 allows
    <a><div></div></a> but I think it might not allow
    <a><div><a></a></div></a>?

    Instead, I used your hook to insert an invisible link just after the inside-article div, and used CSS to expand it to fill the whole div:

    add_action( 'generate_before_content', 'tu_open_block_link' );
    function tu_open_block_link() {
        if ( is_singular() || is_404() ) {
            return;
        }   
    echo '<a class="post-block-link" href="' . get_permalink() . '"></a>';
    }

    CSS (note that .inside-article must be relative, otherwise the absolute positioning of the link won’t work):

    .inside-article {
    	position: relative;
    }
    
    a.post-block-link {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none;
        /* Makes sure the link doesn't get underlined */
        z-index: 10;
        /* raises anchor tag above everything else in div */
        background-color: white;
        /*workaround to make clickable in IE */
        opacity: 0;
        /*workaround to make clickable in IE */
        filter: alpha(opacity=0);
        /*workaround to make clickable in IE */
    }

    Unless you think this will break something, I’m happy to mark this topic as resolved. -Zach

    #416435
    Tom
    Lead Developer
    Lead Developer

    Nice work, good solution! 🙂

    #416559
    Zach

    One more addition. I used this css so the whole div background color changes on hover. Single posts also have the .inside-article class, so these child selectors make sure our style only effects the posts in the blog index, archives, etc.

    div.generate-columns-container > article > .inside-article:hover {
    	background-color:  #ffffcc;
    }
    #1274894
    Gulshan Kumar
    add_action( 'generate_before_content', 'tu_open_block_link' );
    function tu_open_block_link() {
     if ( page_for_posts() || is_404() ) {
            return;
        }   
    echo '<a class="post-block-link" href="' . get_permalink() . '"></a>';
    }

    I have seperate page for Homepage & Blog archive in the Reading settings instead showing latest posts. This shows call to undefined function error. Please help.

    #1275185
    David
    Staff
    Customer Support

    Hi there,

    can you raise a new topic where you can share a link to your site.

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