Hexagonal Posts Grid in Oxygen

le 26/10/2021
JAG

This members-only tutorial provides the steps to display a responsive grid of featured images with post titles appearing on hover on the Posts page in Oxygenwhere each item is a hexagon.
The items will be set to link to their respective post’s permalinks.
We are going to use the CSS Grid version of the code present here.

When hovered:

We shall
assign a Page as Posts page.register a custom image size for the images on the Posts page.use pre_get_posts action hook to set the number of posts that should appear on the Posts page.in the Oxygen Template for the Posts page, use a Code Block component to place a custom loop.add pagination code below the posts grid by utilizing the default query of the page.
Step 1
Install and activate Code Snippets plugin.
a) Go to Snippets > Add New.
Title: Register custom image sizes
Code:
add_image_size( 'hex_image', 500, 500, true );
Save changes and activate.
Regenerate thumbnails if the featured images are already present for the blog posts.
b) Add another snippet.
Title: Set number of posts per page on Blog
Code:
add_action( 'pre_get_posts', 'sk_change_blog_posts_per_page' );
/**
* Change Posts Per Page for Posts page.
*
* @author Bill Erickson
* @link http://www.billerickson.net/customize-the-wordpress-query/
* @param object $query data
*
*/
function sk_change_blog_posts_per_page( $query ) {

if ( $query->is_main_query() && ! is_admin() && is_home() ) {
$query->set( 'posts_per_page', '21' );
}
}
Save changes and activate.
Step 2
Create a Page titled say, Blog and set it as Posts page at Settings > Reading.
Create a new Oxygen Template like so:

Edit it with Oxygen.
Add a Code Block component.
Set Width to 100%.
PHP & HTML:

';
while ( have_posts() ) {
the_post();

// get the alt text of featured image.
$thumb_id = get_post_thumbnail_id( get_the_ID() );
$alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );

// if no alt text is present for featured image, set it to entry title.
if ( '' === $alt ) {
$alt = the_title_attribute( 'echo=0' );
}

printf(
'

  • ',
    get_the_permalink(),
    wp_get_attachment_image_url( get_post_thumbnail_id(), 'hex_image' ),
    $alt,
    get_the_title()
    );
    }
    echo '

    ';
    } else {
    // no posts found.
    }

    // Restore original Post Data.
    wp_reset_postdata();
    ?>

    str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var( 'paged' ) ),
    'total' => $query->max_num_pages,
    ) );
    ?>

    CSS:
    #hexGrid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(8, 1fr);
    margin: 0;
    font-size: 15px;
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    }

    .hex {
    grid-column-end: span 2;
    position: relative;
    visibility: hidden;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
    }

    .hex::after {
    content:'';
    display: block;
    padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */
    }

    .hexIn {
    position: absolute;
    width: 100%;
    padding-bottom: 115.470%; /* = width / sin(60) */
    overflow: hidden;
    visibility: hidden;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    }

    .hexIn * {
    position: absolute;
    visibility: visible;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
    }
    .hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
    -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
    transform: skewY(-30deg) rotate3d(0,0,1,60deg);
    }

    /*** HEX CONTENT **********************************************************************/

    .hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
    -webkit-transform: rotate3d(0,0,0,0deg);
    -ms-transform: rotate3d(0,0,0,0deg);
    transform: rotate3d(0,0,0,0deg);
    }

    .hex h1,
    .hex p {
    width: 100%;
    padding: 5%;
    box-sizing: border-box;
    background-color: rgba(0, 128, 128, 0.8);
    font-weight: 300;
    -webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
    transition: transform .2s ease-out, opacity .3s ease-out;
    }
    .hex h1 {
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    z-index: 1;
    -webkit-transform: translate3d(0,-100%,0);
    -ms-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
    }

    .hex-posts .oxy-easy-posts-pages {
    margin-top: 40px;
    }

    /*** HOVER EFFECT **********************************************************************/

    .hexLink:hover h1,
    .hexLink:focus h1,
    .hexLink:hover p,
    .hexLink:focus p {
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    /*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/

    @media (min-width: 1201px) { /* <- 4-3 hexagons per row */ #hexGrid{ padding-bottom: 7.7%; } .hex:nth-child(7n+5) { /* first hexagon of even rows */ grid-column-start: 2; } } @media (max-width: 1200px) and (min-width: 601px) { /* <- 3-2 hexagons per row */ #hexGrid { grid-template-columns: repeat(6, 1fr); padding-bottom: 11%; } .hex:nth-child(5n+4) { /* first hexagon of even rows */ grid-column-start: 2; } } @media (max-width: 600px) { /* <- 2-1 hexagons per row */ #hexGrid{ grid-template-columns: repeat(4, 1fr); padding-bottom: 14.3%; grid-gap: 5px; } .hex:nth-child(3n+3) { /* first hexagon of even rows */ grid-column-start: 2; } } @media (max-width: 400px) { #hexGrid { font-size: 13px; } } References: /plugins/oxygen/component-framework/components/classes/easy-posts.class.php. https://wordpress.stackexchange.com/a/220624/14380

    Nos experts se tiennent à votre disposition
    pour répondre à vos questions et vous conseiller
    dans votre projet digital.

    Vous souhaitez développer une application ?

    Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
    En savoir plus

    Recevez notre newsletter

    La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
    © 2022 JAG Consulting, sas. Tous droits réservés.
    © 2022 JAG Consulting, sas. Tous droits réservés.
    4.8
    Lire les 51 avis
    google
    Brieuc Pauly
    08/09/2022

    Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

    google
    Amaury Tardier
    08/09/2022

    Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

    Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

    Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

    Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

    Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

    Charger plus
    listarrow-right
    Julien

    Julien

    Votre conseiller

    I will be back soon

    Une question ?

    Julien
    Bonjour ! Je suis Julien.
    Comment puis-je vous aider?
    Démarrer la conversation:
    chat Live Chat