Okay
  Public Ticket #1985069
CSS Porftolio Layout
Closed

Comments

  •  4
    Vincent started the conversation

    Hi,

    I have a question regarding the layout of the following website we are setting up with Kalium: https://www.fullscalearchitecten.be/wip/

    We have made an easy css addition to have a zigzag portfolio layout based on even and uneven data-portfolio-item-id.

    However I would also like to change the width of the image in relation to the format: 

    • If an image is landscape = 100% width
    • If an image is portrait = 70% width

    You can see an example here: https://redarchitecture.co.nz/

    Can you help me with this?

    Thanks in advance.

    Best regards,
    Vincent


  • [deleted] replied

    Hi Vincent,

    I need more information regarding what you want to achieve here. So are you saying that items that have "portrait" featured image should have 70% of the width, while other images remain at their current width:

    medium
    (view large image)

    Because I am not sure where exactly you want to apply the width for portrait images.

  •  4
    Vincent replied

    Hi Arlind,

    Yes, that's the idea, if portrait, we would like to reduce the width to 70%. 

    Vincent

  • [deleted] replied

    HI Vincent,

    You can add this custom PHP code:

    function filter_add_portrait_class_to_portfolio_items( $classes ) {
        global $post;
        if ( 'portfolio' === $post->post_type && ! is_singular( 'portfolio' ) && has_post_thumbnail() ) {
            $image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'original' );
            if ( $image && isset( $image[1] ) && isset( $image[2] ) ) {
                $width = $image[1];
                $height = $image[2];
                if ( $width < $height ) {
                    $classes[] = 'portfolio-featured-image-portrait';
                }
            }
        }
        return $classes;
    }
    add_filter( 'post_class', 'filter_add_portrait_class_to_portfolio_items' );
    
    So when a portfolio item featured image is portrait it will assign "portfolio-featured-image-portrait" class, by this you can adjust the width of the portfolio item, as it'll be added in the div container element for that portfolio item.

  •  4
    Vincent replied

    Hi Arlind,

    That's working great! 
    Thank you so much for helping me out with this.

    You can find the (work in progress) result here: https://www.fullscalearchitecten.be/wip/

    One little thing, I would like to disable the hover text animation on the portfolio items, I tried canceling the slide-up for the text animation with css but I coudn't find it, probably it's a script or setting within the theme ? 

    Thx.

  • [deleted] replied

    Hi Vincent,

    I am glad that it worked for you. Your site looks very good, congrats on your work!

    As for slide up animation for portfolio text, please apply this CSS:

    .hover-state.hover-eff-fade-slide .info h3 {
        transform: translateY(0);
        opacity: 1;
    }
    
    So it will work as fade only on hover. If you wish to completely disable the fade animation, also add this CSS:

    .portfolio-holder .item-box .thumb .hover-state,
    .portfolio-holder .item-box .thumb .hover-state * {
    transition: none;
    }

  •  4
    Vincent replied

    Great, that works! 

    Thank you very much for the support!

    Best regards,
    Vincent

  •  4
    Vincent replied

    Hi Arlind, 

    I have one little specific question. You may find that I added a :focus class for disabled users to scroll with TAB key through the website, so they can see where they are with a line above.

    However, when the TAB hits the menu "PROJECTEN" which containts a submenu, i would like the submenu to expand as well, like on hover. 

    Is this doable with css?

  • [deleted] replied

    Hi Vincent,

    I'm happy to hear thatsmile.png

    As for your last question: Sorry but I don't know how to make this possible.

    If you're looking for professional help in this matter, there's always someone available for such tasks on the WP Kraken or Codeable. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.

    Thanks for your understanding!

  •  4
    Vincent replied

    Hi Arlind,

    No problem, I'll try to have a look into that.
    Thx for the support!

    Best regards,

    Vincent