Archived topic
How to make multiple smaller profile pictures?
5 replies · Started by Heath on April 2, 2022
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.
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.
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?
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! :)
Thanks
You’re welcome Heath! Glad to be of assistance! :)
