0

For example I have an image that's very long but want to show a cropped version of that but when people click my blog post from the homepage they see the longer version.

I tried doing using the plugin "Custom CSS Manager" with the code:

.home .post-4262 .entry p:first-of-type {
   max-height: 375px;
   overflow: hidden;
}

Which works but I can't figure out a way to crop my image to the specific 600X375 that I want. Like for some pictures I don't want it to start from the top but close to the top if that makes sense. That code is good but won't let me do that from what I understand.

Or do I need to take a simpler approach? If anyone knows how to make my homepage blog image shorter that I can control the 600X375 crop but the post page has the full image please share. I have been trying to figure this out for the last two days but with no avail. Thanks for any help.

Improve this question

2 Answers 2

Reset to default
0

Is the css clip property what you are looking for?

img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}

From CSS clip Property

Improve this answer
0

You could add a new image size with a hard crop added however it would be the same crop position for all images, setting them manually would require per image manipulation. 

add_image_size( 'blog-crop', 375, 0, array( 'left', 'top' ) );

Then reference the new image size in your blog template.

Codex reference here:

https://codex.wordpress.org/Function_Reference/add_image_size#Crop_Mode

Improve this answer
3
  • I'm a newbie to css and all that. Do I add that add_image_size code to my functions file? And how do I per image manipulation? I want the ideal image for the homepage to be 600X375 but I don't want to start it 100% at the top.
    – deanmoney
    Jun 22, 2015 at 8:17
  • Yes in your functions file then you'd need to modify your blog template file to use the new image size. You could make the image slightly taller and then use css to crop the pixels from the top.
    – Digitalchild
    Jun 22, 2015 at 8:30
  • Thanks but after 2 days trying to figure this out I'm done. You seem to be giving me good information but without actual code and what code to put where this isn't helping me. Maybe someone else can get something out of this. Thanks.
    – deanmoney
    Jun 22, 2015 at 10:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.