Making images the right/same size for portfolio – Sketch theme
-
Hi, I’m trying to set up my homepage to look like the Sketch demo (except my images are portrait). How do I get the images to look the same size? I have tried editing the size in the WordPress programme, and in a separate programme, so they match the recommended pixel size, but nothing seems to work. They still all look different, some too small, and some too big so you can’t see all of the image. Thank you very much. :)
The blog I need help with is: (visible only to logged in users)
-
Hi there!
I checked through all the featured images that have been added to posts on your home page and can see that the original images themselves all vary in size. For example, I found one of the images uploaded was 217px by 346px and another that was 1450px by 2000px.
For portrait images, Sketch will crop larger images to be 800px by 1067px. Smaller images will remain as they are.
Please can you try re-uploading your featured images in accordance with the guidelines from Sketch to keep your images at the same size?
Let me know if I can help in any way.
-
Hello :) Thanks so much for replying to my query. My problem is that I have tried resizing my images to match the Sketch specs – both in the WordPress programme after uploading them, and in a separate programme before uploading them. But this doesn’t seem to make any difference and I’m not sure what I’m doing wrong.
-
Hi,
Would you be able to provide a link to one of your posts that has a featured image matching Sketch’s recommendations?
I can see that the featured image for this post, for example, is 306px by 435px, which is why it displays as relatively small on the home page:
https://bennisonbooks.com/portfolio/contemporary-classics-2/
If you can give me a specific example of a post that doesn’t display correctly despite having a featured image with the recommended specifications, I’ll be happy to take a closer look.
-
Hello. Thanks so much for replying again. I know it’s something I’m doing wrong, but I can’t fathom what. So, here is an example: on the homepage, top left, I have used my logo. I tried to resize it to exactly 800 x 1067 as required by Sketch. However, the scaling would only me to do 713 x 1067. So that’s the size of the featured image. But it is still too big for the allocated space with a section missing from the bottom of the image. Thank you :)
-
Hi @bennisonbooks,
Where was it that you resized the image? I ask because it is showing at exactly 713px by 1067px in the Media Library for me:
https://bennisonbooks.wordpress.com/wp-admin/upload.php?item=1417
Some software will automatically scale your image according to its original dimensions. So, even if you choose a height of 1067px, the width may be set to a specific value in order to keep the image to scale.
It’s also worth noting that, by default, the featured images are intended to be decorative or abstract background images that can handle this type of cropping. It’s for this reason that the home page isn’t currently working with your more detailed images.
If you’re unable to get the images the exact size needed, you could possibly use some custom CSS to force each the images to take up 100% of the available space on the home page.
If you’re not familiar with CSS, it’s a coding language that’s used across the web to change the appearance of websites. Here at WordPress.com, it’s possible to add CSS to change certain parts of a theme’s design if you have a WordPress.com Premium or Business plan.
You can preview CSS changes for free via the Custom Design panel of the Customizer. Select the button to Try Now and then paste the following snippet into the CSS panel:
@media screen and (min-width: 50em) { .project-navigation-wrapper .entry-thumbnail img, .page-template-portfolio-page-php .entry-thumbnail img, body[class*="jetpack-portfolio"].archive .entry-thumbnail img { height: 100%; width: 100%; } }Let me know how you decide to move forward on this, I’ll be happy to help further.
-
Hello again :) Yes, that is the size of the image, and I thought it would display OK as it is within the parameters prescribed by Sketch. Thanks so much for all your help. I think I will have to look at an alternative theme. If you have any suggestions that would be great. I’m happy to use a free or a paid theme and have been looking for sometime for one that would show all the different book covers on the home page while looking ‘clean’ and modern, and that would also have a clear link to the blog posts.
-
Hi – I see you’ve recommended Rosalie elsewhere – might that work for me? Is it tricky to set up? Thanks :)
-
Hi @bennisonbooks,
Ah, I see! An option is to stick with Sketch but upgrade to WordPress.com Premium and then resize your images using the custom CSS I provided. A lot of our themes do crop images in a similar way to Sketch, so it may be tough to find one that doesn’t.
If you let me know a little about your vision for your site, I’ll be happy to offer some suggestions for a theme.
Rosalie is one of my personal favourites and, as you liked Sketch, you could filter other portfolio themes in our repository here:
https://wordpress.com/themes/filter/portfolio/
Thanks!
-
Thank you, I do appreciate your help. This is the kind of thing I want:
I completely understand that my blog will not look as sophisticated as this, but it’s the clean look that I’m after and the way the books are highlighted first as the most important thing. I like the idea of having other things on the homepage too (as with this Penguin site when you scroll down) but thought that might not be possible with a portfolio theme like Sketch. But perhaps it might be possible with another theme?
-
Thank you for that example! I think I have a sense of what you’re trying to achieve.
It’s worth noting that if your featured images are different sizes to each other then, without using CSS, they will be all cropped at different sizes with most themes. I recommend trying to upload images intended for the home page at one uniform height.
With that in mind, I have come up with a few suggestions:
- Radiate has a nice featured slider along the top, three featured pages beneath it, and then latest blog posts beneath that. The three featured images near the top are cropped at 750px by 500px.
- Sela is a popular theme with a clean design. The images on the home page have been added via a Text widget, which would give you a little more control over the size that they’re displayed at.
- Ampersand is a portfolio theme. You could add your books as portfolio items and feature them in the top slider.The images in the slider are cropped at 700px by 525px.
Would any of them work for you? Let me know if there’s features you do/don’t like about each of those themes.
-
Thank you so much. I will be able to investigate all of these this evening. Much appreciated. :)
-
-
Hi – I am going to try Radiate. Thank you so much for all your help which I really appreciate. :)
-
Nice choice! :) If you have extra questions, feel free to either post back to these forums are talk privately with a Happiness Engineer via our contact form:
https://wordpress.com/help/contact
Thanks!
-
Hello again :) I’m just wondering if you might have any more theme suggestions? I’m not sure that Radiate will work for me as although I love the slider, I don’t have enough quality landscape images to fill the space. I’m limited by portrait book covers for the most part. Also, there is only one additional column you can add so you have to scroll down a long way to see all the book covers. Thank you so much.
-
Hi there. :)
It’s not absolutely necessary for you to make use Radiate’s slider if it doesn’t work for you. You can either leave it un-active so it doesn’t appear at the top or only enter text to it.
Perhaps you could place the images of your book in the footer rather than the sidebar, also?
In terms of other themes, Sela is the one that stands out in my mind as offering widget areas that takes up a few columns on its home page. Did you take a look at that theme?
Periodical and Rosalie are similar in terms of layout to Radiate but also have large footer areas that you could add widgets to.
Theme choice is very much down to personal preference and so I encourage you to have a browse about our repository and preview different themes to get a feel for them:
We’re here if extra questions come up.
-
Thank you for all your help – above and beyond the call of duty! I don’t think Radiate will be right, but thanks to all your suggestions I think I will be able to find something suitable now. Very much appreciated. :)
-
You’re most welcome! You know where to find us if you’d like any extra advice or have any questions. :)
- The topic ‘Making images the right/same size for portfolio – Sketch theme’ is closed to new replies.
WordPress.com Forums 