F8 Lite Theme stretches thumbnail post images (24 posts)

  1. srdx
    Posted 5 years ago #

    I wonder if anyone can help figure this out? I looked but could not see a simple setting fix.

    When I create a post, inserting a .JPG image into the post, I can choose the size of the image 'Small; Medium; Large; Full size' and the display is correct within the post itself - however for display on the front page, the F8 Lite Theme decides to *shrink* the image down to 150 x 150 px - and then, *stretch* the image horizontally.

    See my site: http://www.simonredux.com/

    Why would it do that? I have resized the image to every conceivable size that might make the theme adjust it with no artificial stretching, nothing doing!

    I'm slightly mystified why they would enforce this coding stretch on images. Cropping within the settings makes no difference.

    Thanks if you can assist.

  2. srdx
    Posted 5 years ago #


  3. donaldwood
    Posted 5 years ago #

    This may help.

    Go to Settings->Media

    Uncheck box "Crop thumbnail to exact dimensions" if checked.

  4. srdx
    Posted 5 years ago #

    Thanks Donald, I had done that. Doesn't make any difference. If i crop the image and select all three options when in the Media > Library.

    (There in the Thumbnail settings there is a choice of 'All image sizes', 'Thumbnail', and 'All sizes except thumbnail'.

    None of these selections, or the ensuing crop itself make any difference to the home page display of the image - this theme still introduces artificial stretching. It is pretty frustrating spending time creating a page - only for a really unpleasant code to ruin it. This is a visual theme, you would expect there to be some ability to control the stretch.

    Looks like I'll have to scratch this theme and find another, unless there is a way to show a image that hasn't had it's pixels stretched. Thanks.

  5. srdx
    Posted 5 years ago #

    Man this is frustrating, the people that produce the F8 Lite theme do not offer any type of unpaid support, and this forum seems very light, in terms of active problem solvers. I'm dumfounded. Does anyone else have the problem of thumbnail images on posts, being horiontally stretched when displaying on the front page?? Why would they make the code do this?

    I have 2 posts on the front page of http://www.simonredux.com/

  6. srdx
    Posted 5 years ago #

    Another user had suggested this workaround:

    1) Check that your thumbnail images are 310x150px in size, or are of a size that will squeeze to those dimensions in proportion, ie 620x300px - the thumbnails need to be this size to work.

    On my page http://www.simonredux.com/ I posted a blog about the WWD conference, I used an image of the iPhone 4, and created the thumbnail image to *exactly* 310x150px, when I cropped in the media library tool, it looked great, I saved it...hoping this would be it, went back to my home page and what happened? A stretched version! 100x48 in size.

    Do the theme makers ever respond in these forums?

  7. cprofilet85
    Posted 5 years ago #

    I had been having the same problem... I tried this and it seems to be working:

    1) Ensure that your image is 310x150px
    2) Set up your default image and thumbnail sizes: Click Settings - Media and set your thumbnail size to 310px wide by 150px tall. I also unchecked "Crop thumbnail to exact dimensions," although I'm not sure this does anything.
    3) Set your medium size images to 590px wide. Do not set a height.
    4) Set your large size images to 950px wide. Do not set a height.

    Now give it a try... Hope that works!

  8. srdx
    Posted 5 years ago #

    cprofilet85 - thank you, actually this helps for 2 of my post thumbnail images, but not for the iphone 4 image. really bizarre.

    graphpaper press were good enough to get back to me with this link: http://demo.graphpaperpress.com/f8-lite/wp-content/themes/f8-lite/instructions.html which pretty much is as your post.

    I downloaded the regenerate thumbnail plugins and have activated it on these 3 images, 2 of which took hold, however every time I try to crop the thumbnail for the iphone image, as soon as I apply the change it defaults from my selected crop - to the full size image....basically it won't let me crop it! :/

    Sometimes I think it might be worth learning to hand code, just to have full control! It would probably only take marginally longer than tinkering with themes that don't do what it says on the tin.

    Thanks for your post though :)

  9. Ramzi Komati
    Posted 4 years ago #

    Go to and edit the file /html_public/wp-content/themes/f8-lite/home.php

    On the 7th line you should find the following code:

    <?php get_the_image( array( 'custom_key' => array( 'thumbnail' ), 'default_size' => 'thumbnail', 'width' => '310', 'height' => '150' ) ); ?>

    Replace thumbnail with post-thumbnail, you should have something like this:

    <?php get_the_image( array( 'custom_key' => array( 'post-thumbnail' ), 'default_size' => 'post-thumbnail', 'width' => '310', 'height' => '150' ) ); ?>

    Problem solved for new post and old post entries :) check out artissus.com to see how it works :)

    Kind Regards,
    Ramzi Komati

  10. Ramzi Komati
    Posted 4 years ago #

    You can also access /html_public/wp-content/themes/f8-lite/home.php by logging in into your WordPress admin room, go to Appearance > Editor and click on home.php :)

    Kind Regards,
    Ramzi Komati

  11. aujus
    Posted 4 years ago #

    Thanks, Ramzi Komati!! I just started using F8 Lite and came upon this dilemma. Your solution worked like a charm and instantly. Thank you again for sharing!

  12. lovesongphoto
    Posted 4 years ago #

    Thanks Ramzi! This solution helped to make my thumbnail images look less stretched.

    I've noticed that the images look a bit off. Could you check it out and tell me if I'm just going crazy or not? http://www.blog.lovesongphoto.com.

    They do look better than they did before I implemented your code...



  13. Ramzi Komati
    Posted 4 years ago #

    You are both welcome, I'm glad it worked well.

    Concerning your case, Krista, it is perfectly normal to lose a bit of your image (more precisely the top and bottom of your image) and I don't see your images being stretched at all.

    The post-thumbnail resize the image by its width to 310px without changing the original image ratio (preventing it to stretch or squash). The image is than cropped from its middle to 310x150px, that's what causes you to loose a bit of your image.

    Kind regards,
    Ramzi Komati

  14. marterekaa
    Posted 4 years ago #

    Thank you for this! Very helpful!

    I have another question along the same line.

    1)How can I prevent the featured image in the header to stretch?
    I know I can choose single image header, but I like the slideshow.

    2) Also, is there a way of reviewing which images you have set as featured image?

    Thanks again!

    Best regards,

  15. Ramzi Komati
    Posted 4 years ago #

    WordPress doesn't resize your image to 950x425. You should hire a programmer to do that.

    If you want to feature certain pictures on other. I recommend you to create a new post category (let's call it featured), and assign it as a secondary category on posts you want to add in the featured box.

    Than go to Post > Categories and click on featured. Check out the link in your browser address bar you should find something like that:


    Notice tag_ID=5, it means your category ID is 5.

    Now go to Appearance > Theme Options, and write down in the Slideshow Categories the category ID of the features category (in our case it's 5).

    Kind regards,
    Ramzi Komati

  16. pablarribas
    Posted 4 years ago #


    I seem to have both problems. Images won't resize, and they slideshow doesn't work!

    Ramzi, regarding the slideshow, I followed your instructions, the standard ones, and it doesn't seem to work. It shows no image at all.

    Anyone has any idea on how to make the header slideshow work?

    Thanks a lot for your help!

  17. aseid
    Posted 4 years ago #

    this may be a dumb question but does anyone know how to only on the first page of my site remove the header image? or at least make it seem like it is not there perhaps by replacing it with a small image the same color fo the background so the posts immediately come right up to near the underside of the first "underline"

    im getting the sense i need to setup some php language to check if its the first page and if it it is "do something" just not completely sure what that something is, im not too HTML/CSS/PHP savvy..................yet!

  18. KazzaG
    Posted 4 years ago #

    aseid - you may have already found it but it is an option in the 'Theme Options' section - it's a dropdown under Slideshow Options - none.

  19. KazzaG
    Posted 4 years ago #

    I have related question - my featured image has started behaving oddly. For some reason, now I can't seem to get the featured image to be 950 x 425, whearas a few months ago I could get it that size fine - now it just seems to ignore my crop and choose it's own, thereby stretching the image or giving me an undesireable crop.

    I have worked out the crop ratio to be 2.25 x 1 for the featured image. I have sized it as this for all but the thumbnail to no avail. The media preview seems to be the correct ratio but the actual featured image on my website is not correct. Any ideas?

    Thanks in advance.

  20. aseid
    Posted 4 years ago #

    thanks, that leaves me with a blank image and an "x" in the upper left hand corner, at this point i would not mind doing one of two things

    getting rid of the entire slideshow header, which i tried to comment out in the header file, got close......

    have a different header image for all of my posts so it can be specific to the actual post content but not the thumbnail that shows up on my main page

  21. KazzaG
    Posted 4 years ago #

    I'm no expert but I'm pretty sure you could do either of those things.. to remove the slideshow, wouldn't you just remove this section in the header:

    	$slideshow = $options['selectinput'];
    	// Only show this is the Single Header Image is selected or if no option is set
    	if ( $slideshow == 1 || !$slideshow ) {
    		// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    		if ( is_singular() &&
    				has_post_thumbnail( $post->ID ) &&
    				( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( '950', '425' ) ) ) &&
    				$image[1] >= HEADER_IMAGE_WIDTH ) :
    			// Houston, we have a new header image!
    			echo get_the_post_thumbnail( $post->ID, '950x425' );
    		else : ?>
    			<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="<?php bloginfo('name'); ?>" class="headerimg" />
    	<?php endif;
    	} // End only show if Single Header Image is selected

    I haven't tried it but it may be worth a shot.

    And to set the header image for the post, I thought that was where you set the feature image within the post (this is what I am having trouble creating a correctly proportioned and cropped image size for)- this can be different to the thumbnail for the post.

  22. KazzaG
    Posted 4 years ago #

    Other people seem to have been having similar problems to me in getting the feature image to work properly with thumbnail sizes etc. I have been working on this for a while now and have come up with a working solution, so I thought I'd share in case it helps other people.

    1. The first and obvious thing to do is to set all the sizes as recommended in the instruction file that came with the theme. I have done this with a few modifications (I have quite heavily modified my theme)
    2. set the thumbnail for your post by using an image contained in the post (worth reading the instructions to see what order wordpress uses to create a thumbnail image)
    3. (the fun part) try as I might I could not get the same image to work as the featured image no matter how I cropped it within wordpress's media function. So I ended up using photoshop to crop my image to the exact size for the header image and uploaded it directly to the featured image in the post. It's an extra step but less time consuming than working out a fix. Of course you could use any image editing programme to crop to size. And so far it has worked fine!

    It's worth just saying that I of have the theme set to 'minimalist slideshow' in the theme settings, and I have edited the number of slides I want to be shown (this note is contained within the instructions: The slideshow on the homepage queries the last 5 posts with images and displays them in a slideshow. You can increase or decrease this number by editing line 9 and 20 of slideshow.php.)

    Hope that helps someone. You can see my site here: http://www.mypow.net

  23. aseid
    Posted 4 years ago #

    KazzaG, your site is very much "heavily modified" looks like youve really got a handle on things. looks great!

  24. KazzaG
    Posted 4 years ago #

    Thanks aseid!

Topic Closed

This topic has been closed to new replies.

About this Topic