Adjusting my thumbnail size

Hi there,
I need to adjust the thumbnail size that my theme is displaying and I don't know how to do that! I'm running a self hosted wordpress blog at http://www.vellumvoyages.com
Please feel free to visit it and have a look as you can see the book covers are getting cut off due to the size. I think it will have something to do with the CSS? but unsure what else to do to adjust!

Thanks!

VV

  • Kris Tomczyk

    Hi vellumvoyages,

    Hope you are good today.

    The part of the code that was created in your theme refers to the smallest picture generated by WordPress: thumbnail.

    In WordPress we have 5 thumbnail sizes:

    the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard cropped)
    the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
    the_post_thumbnail( 'medium_large' );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
    the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
    the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)

    In your case you use the first one with the difference that in your SETTINGS -> MEDIA -> Thumbnail size 175 x 175.

    In many cases to fix that, users need to find a file which is responsible for displaying the thumbnail (should be some php file in /wp-content/themes/theme_name/ folder). But in your case I see that you add your images directly in the description field (i see this in source of your site).

    Of course there is probability that theme is built like this.

    It would be wise not to add a photo to the entry in the description field. The most convenient method is to use the "featured image" option. Then you have more options from the css level on what is happening with the displayed image.

    I advise you to find the index.php file in /wp-content/themes/vellum-voyages/ folder, then find the code responsible for the loop of entries.

    Add a code:

    <div class="vellumvoyages_post_thumbnail">
    				<a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {
    					the_post_thumbnail('full');
    				}  ?></a>
    				</div>

    After that by using some Custom CSS plugin https://pl.wordpress.org/plugins/simple-custom-css/ add this code:

    .vellumvoyages_post_thumbnail {
    	float:left;
    	width:175px;
    	margin:0 25px 15px 0;
    	overflow:hidden;
    }
    .vellumvoyages_post_thumbnail img {
    	width:175px;
    }

    You can see on screenshot that is work great.

    Kind Regards,
    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.