[Resolved] How to make multiple smaller profile pictures?

Home Forums Support [Resolved] How to make multiple smaller profile pictures?

Home Forums Support How to make multiple smaller profile pictures?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2176072
    Heath

    I have a roster type post that I am making for multiple teams and I’d like to have a smaller profile picture for each player right and then their name right beside it with the stats right underneath. How do I make a smaller picture rather then the large images?

    I have included a screen shot where I’d like to place the photos and moving the names to the right of the photos.

    #2176232
    David
    Staff
    Customer Support

    Hi there,

    add as Image Block before the Player name and give it an Advanced > Addtional CSS Class of player-photo
    Once thats in place – share a link to the site where i can see the image, player name etc. and ill work on the CSS to align them how you need.

    #2176742
    Heath

    I added a photo. I also added the link in the private information.

    Would there also be s way to remove the caption under the pictures on this post only?

    #2176946
    Fernando
    Customer Support

    Hi Heath,

    Kindly leave this blank to remove the caption of the image: https://share.getcloudapp.com/jkuv4YO7

    With regards to the look you’re going for, this can easily be achieved through a Grid Block with GenerateBlocks plugin: https://share.getcloudapp.com/YEurOQ4B

    Kindly see: https://share.getcloudapp.com/DOu4BoP0

    Also see: https://share.getcloudapp.com/DOu4BoP0

    Alternatively, if you add CSS class player-photo: https://share.getcloudapp.com/bLuKq05Q, you may also try this code:

    figure.wp-block-image.player-photo {
        float: left;
        width: 15%;
        margin-right: 20px;
    }

    Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

    Adding this through additional CSS should work.

    On mobile and tablet, it would look different, and we would need to use media queries to achieve a better look like:

    @media (max-width: 768px) {
        /* CSS in here for mobile only */
        figure.wp-block-image.player-photo {
        float: left;
        width: 40%;
        margin-right: 20px;
    }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
        /* CSS in here for tablet only */
        /* CSS in here for mobile only */
        figure.wp-block-image.player-photo{
        float: left;
        width: 25%;
        margin-right: 20px;
    }
    }
    @media (min-width: 1025px) {
        /* CSS in here for desktop only */
        figure.wp-block-image.player-photo {
        float: left;
        width: 15%;
        margin-right: 20px;
    }
    }

    If you use the code as opposed to GenereateBlocks, kindly replace the values to your preference.

    Hope this helps! 🙂

    #2194138
    Heath

    Thanks

    #2194200
    Fernando
    Customer Support

    You’re welcome Heath! Glad to be of assistance! 🙂

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