Sridhar Katakam

Genesis and WordPress Tutorials

Clickable images with centered titles on a CPT archive in Genesis

by 9 Comments

In the members-only forum a user wrote:

On this page: http://avports.wpengine.com/airports/
I created a custom archive page for a CPT (used Pods plugin).

The page looks as I want it to, with overlay and text color change on hover. However, the overlay hover is set with the title, so the photo itself is not a link – the title/words have to be clicked for the link to work. I am interested in converting this to a flex box layout, as I had to create several responsive breakpoints.

Can you advise how to code this to make it work better?
Thanks!

Here is what I have:
...

In this tutorial we shall display entries of a Portfolio Custom Post Type (this tutorial can be applied to any CPT) in a grid of images with the titles overlayed in the middle in Genesis. The entire image area (vs just the title) will be linking to entry's permalink. We shall set a fallback image to be shown in case an entry does not have a featured image.

Also as long as the featured images are having the same dimensions 600px x 343px used in this example or in that aspect ratio or close, the entries will appear uniformly without having to use Flexbox or a jQuery script for equalizing heights.

We will add media queries to change the display from 3 columns to 2 columns and eventually to 1 per row as the screen size is reduced.

Screenshot:

genesis-portfolio-grid-titles-overlay

Screencast:

Step 1

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar,

    This is working perfectly but I need to modify 2 parts.

    How can I add the Author Name after Title? ( just print name no link required)
    How can I limit the archive to 6 posts and display a random image instead of featured image as background using 6 images like:
    childtheme/images/image1.jpg
    childtheme/images/image2.jpg
    childtheme/images/image3.jpg
    childtheme/images/image4.jpg
    childtheme/images/image5.jpg
    childtheme/images/image6.jpg

    Thank you!

    Reply

  • Hi Sridhar,

    I have resolved part of my comment above, have the random images working.

    Still trying to print author name below post title on image, just print, no link.

    Thank you!

    Reply

    • Hi Bob,

      The code in this tutorial has been written to make the entire image clickable to its permalink. So even if we print the author name below the entry title, everything is going to be hyperlink.

      That said, here are the code changes to accomplish this:

      1) In archive-portfolio.php change

      printf( '<a href="%s" rel="bookmark"><div class="portfolio-archive-image"><img src="%s" alt="%s" />%s</div></a>', get_permalink(), $image, the_title_attribute( 'echo=0' ), sk_return_post_title_archives() );

      to

      printf( '<a href="%s" rel="bookmark"><div class="portfolio-archive-image"><img src="%s" alt="%s" /><span class="portfolio-content">%s%s</span></div></a>', get_permalink(), $image, the_title_attribute( 'echo=0' ), sk_return_post_title_archives(), get_the_author() );

      2) In style.css change

      .portfolio-archive .content .entry-title {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px #666;
    text-transform: uppercase;
    font-size: 24px;
}

      to

      .portfolio-content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px #666;
    text-transform: uppercase;
    padding: 20px;
}

.portfolio-content .entry-title {
    font-size: 24px;
}

      Reply

  • Hi Sridhar really useful, works well. One thing the page does not display a title. Within the portfolio categories options there is Archive Title and Archive description. Is it possible to get these to display? Many thanks

    Reply
    • >