- This topic has 11 replies, 2 voices, and was last updated 5 years, 11 months ago by
.
Hi – I have recently switch over to the Jevelin theme, and struggling with my blog feature images.
In my previous theme all my images are in a 3:2 ratio. Having ported across to Jevelin the preview on the main blog page grid looks perfect (see screenshot below).
However, if I click into the actual blog post the image is stretched – see second sceenshot. So I am at a bit of a loss as to how best to size my blog feature images to showcase these appropriately.
Note that all other images within the blog (also in 3:2 ratio) displays perfectly. It is just the main feature image.
link to my blog: http://www.bernardpretorius.com/blog
Please advise.
Thanks
Hi @photobernard,
I hope you are well today and thank you for your question.
You can try achieving this by regenerating thumbnails using following plugin.
https://wordpress.org/plugins/force-regenerate-thumbnails/
If you still face the issue then could you please tell me exactly how you want the images to display?
You can also see how the theme displays images on this blog template by vising following theme demo site.
https://jevelin.shufflehound.com/blog1/from-side-to-side/
Best regards,
Shufflehound teamHi,
This has not resolved the issue – i just want the main header images for my blog posts just to appear as they have been uploaded. But as per the example above they are stretched.
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.single-post .post-meta-thumb img { max-width: 1000px !important; min-width: 1px !important; margin: 0 auto; }Thanks. That doesn’t work either, as now the feature image is not wide enough to fit the rest of the post.
The problem with the feature image is, that it is used in different sizes across various components, e.g:
- As the Blog header it is in a ratio of 1.777777
- Using the blog content box minimalist it is in a ratio of 1.6
- I use the “Mix” layout of the page where it is in a ratio of 1.36
That makes it really hard to correctly position a logo on my images without it looking unprofessional in some shape or form.
The only way around this I can see is to re-visit every single previous blog post, re-export a header image without a watermark / logo (which I am not really keen on) and changing it over. This much effort really makes me regret switching over to this theme 🙁
Is there a way in which I can force the header image for the individual blog posts to be in a 3:2 ratio? That is how I shoot all my images.
I have manage to fix the issue where it is stretching the header images, but because of the different ratio it is cutting off part of my logo – see the two screenshots below.
I have manage to fix the issue where it is stretching the header images, but because of the different ratio it is cutting off part of my logo – see the two screenshots below.
Could you please try using below custom CSS code to resolve the issue?
.page-template-page-blog .sh-ratio-content { background-position: center; background-size: contain; background-repeat: no-repeat; }Hi,
Thank you. This has worked on the main blog page, however not for the featured image of the individual blog post. Screenshot attached.
Also – is there a way to get the blog text preview box (on the main page) to then be the same height has the image? Screenshot attached.
Thank you. This has worked on the main blog page, however not for the featured image of the individual blog post. Screenshot attached.
To make it work on single blog post page, use the attached small plugin that contains the following code.
The already used images are not resized automatically to the new sizes, you have to use the following plugin to regenerate the images with new sizes.
https://wordpress.org/plugins/force-regenerate-thumbnails/
Also – is there a way to get the blog text preview box (on the main page) to then be the same height has the image? Screenshot attached.
Try using below CSS code to achieve this.
@media (min-width: 992px){ .masonry2 .post-item:not(.format-quote):not(.format-link) .post-content-container{ height: 420px; } }To make it work on single blog post page, use the attached small plugin that contains the following code.
The already used images are not resized automatically to the new sizes, you have to use the following plugin to regenerate the images with new sizes.
Thanks – this is fairly cumbersome, but has worked.
Try using below CSS code to achieve this.
This has worked to a degree as the image is the right size and now lines up at the bottom with the white text block, however the white text block is still bigger at the top.
For the individual blog posts, is it possible to also amend the dimensions for the header images, as they are still cutting off the bottom part of the photo. I would want these to also be in a 3:2 ratio.
To achieve this, you have to develop custom code in the child theme of Jevelin theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
