How do I add a different blog post image for my homepage?
-
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 multiple php functions with “hard crop” but I’m not getting why it wont work. Which is why at this point I just want to make 2 images – 1 for the homepage/ 1 for the blog post. Thanks.
-
If all of the below has been tried and you’re ready to call it a day and just use two separate images, you could look at a plugin like this. I’ve not used it personally but it looks like a good place to start.
If you prefer to figure out why your original approach wasn’t working:
The usual way to achieve this would be to have two different image sizes set in your theme, then single.php displays the larger size image, and index.php or whichever template is generating your home page uses the smaller size.
add_image_size() is the function for adding a new image size and you would simply change the size parameter of the_post_thumbnail() in your different template files to display different sizes.
If this is what you’ve already tried and you’re having no luck, have you regenerated your thumbnails? WordPress doesn’t automatically resize existing uploaded images when you change the image size settings, you’ll need to install the Regenerate Thumbnails plugin and use that to quickly resize everything to your new settings.
Hope some of that is helpful!
Thanks for the help. I tried the plugin but the feature image option doesn’t work for my site hence 2 featured images don’t even show up as an option.
I don’t do html or css so everything below that was a foreign langue to me. I know basic things like if someone said to add this code in functions and then add another code in my post.
Does anyone know of a step by step guide on how to do what I originally wanted? Like what code to add where to be more specific.
What I’m trying to do is post 1 image only but the image is 600X800. I want the homepage post to only show it as 600X350/400 – Ideally a 600X350 section that would look the best like 20/30 pixels down from the top and not directly from the very top. If that’s not possible then just the first 350 height from the top. Also this is just for specific images and not for my entire site as a default.
Hopefully someone can point to a like with more info that is easy to figure out. Thanks in advance.
You could use CSS – sorry for the terminology – to create a different crop on a particular page.
Can you link to the page in question?
Thanks for the reply. My link is:
http://www.bigbrotherhoh.com/meet-big-brother-17-houseguest-audrey-middleton/
Thanks for the help.
If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin
Then use its “CSS Code” section of the dashboard to hold your CSS modifications:
Alternatively use your Child Theme style.css file to hold your CSS modifications:
.single-post .entry p:first-of-type img { height: auto; width: 200px; }
My theme is called room-34-baseline and from what I can tell it’s not a child theme. I have an Appearance – Editor section if that’s what you mean. I d/l’ed that plugin and added that code and didn’t do anything.
I didn’t think trying to do something like this would be this difficult.
I did some google searching and added this code in my functions file:
add_theme_support( 'post-thumbnails' ); add_image_size ( 'homepage', 600, 400, TRUE );
So right now my functions file has this code in total:
<?php if (function_exists('register_sidebar')) { register_sidebar(); } add_theme_support( 'post-thumbnails' ); add_image_size ( 'homepage', 600, 400, TRUE ); ?>
Am I on the right track? If so what should I put in my post to crop the image the size I want it? Thanks.
I also tried downloading the plugin “Manual Image Crop” with my codes in functions:
add_theme_support( 'post-thumbnails' ); add_image_size ( 'homepage-thumb', 600, 375, TRUE );
I tried to use the crop feature under the tab “homepage-thumb” but it’s still not showing up.
Does anyone know of anyway to crop the homepage image but have my post image full size. I’ve been trying to figure this out for the last two days but to no avail.
You need to then pull that image through into the template file
Also re-upload your image into the media library
Not sure what you mean bu pulling the image through the template file. I have deleted and re-uploaded via the media library that same image at least 8 or 9 times now after I used the new plugin.
The only thing this will do:
add_theme_support( 'post-thumbnails' ); add_image_size ( 'homepage-thumb', 600, 375, TRUE );
Is generate a 600×375 pixel thumbnail in the media library from the file you upload.
You then have to use that image in your template. The template from your theme won’t automatically pull in that new thumbnail you’re generating.
I understand that a 600X375 is made when I used the plugin in combination with the code in my functions file… Now how do I just use that image to show on my homepage for that post while the larger version shows on in the post.
Because you’re using a commercial theme, we can’t give you any theme-specific information.
No wait it’s not commercial, it’s here: https://wordpress.org/themes/room-34-baseline Yay!!
- The topic ‘How do I add a different blog post image for my homepage?’ is closed to new replies.