Natual Image Size

This topic is: Resolved

This is a PRIVATE forum for verified users only, to view the replies/answers, you must be logged in!

This topic contains 24 replies, has 3 voices, and was last updated by  Erick 11 months, 3 weeks ago.

  • Author
    Posts
  • #7225

    Erick
    Member
    Post count: 1018

    Hey guys, As you know I have done a lot of modifications to Sparkles, specially the size of the images.

    Now All my images are 830px by 400px and somehow the natural image is 710px by 403px. I am not sure but this can’t be a good thing. Specially since the defined template for the images is 830px by 400px. I designed it like that so that all images would fit like a glove.

    Here, you can see what I am talking about.

    https://www.dropbox.com/s/f57dfs1xeutqeot/Screenshot%202015-02-27%20at%2012.png?dl=0

    single post same

    https://www.dropbox.com/s/xj1c77irs8zc5ua/Screenshot%202015-02-27%20at%2012.17.27%20AM.png?dl=0

    This is an issue in both homepage and single page.

    What CSS or PHP do I need to override this.

    Thank you so much!

  • #7246

    Jacob
    Staff
    Post count: 2312

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #7260

    Erick
    Member
    Post count: 1018

    Added it though I am not sure it did anything. I also uploaded new images in case that was the problem but even new images still have the natural dimensions of before.

    Image attributes still the same

    img[Attributes Style] {
    width: 710px;
    height: 402px;
    }
  • #7265

    Max
    Staff
    Post count: 3150

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #7270

    Erick
    Member
    Post count: 1018

    Tried both and nothing changed, then I tried using one at a time and nothing. Then I went to my test website and I noticed something really strange. The images show exactly how I want them to show.

    here is the link: http://urbanpunch.com/

    I also took some screenshots

    Here is how my website looks
    https://www.dropbox.com/s/w9q1pibx57qr5w0/Screenshot%202015-02-27%20at%205.05.22%20PM.png?dl=0

    here is how the test site looks
    https://www.dropbox.com/s/5i4xtw7df5sle49/Screenshot%202015-02-27%20at%205.05.24%20PM.png?dl=0

    So after I realize that everything was working the way I wanted in the test site, I went ahead and assumed there was something different in css or child theme files. I did a side by side comparison, and made them look exactly the same. I also made sure that the media settings where the same. And as you can guess, nothing! How come 2 websites with exactly the same code display images so differently? Maybe is a plugin? I deactivated the only plugin I have that affects images and that is regenerate images plugin and nothing change.

    Also another thing. There is something that is also affecting how the hero banner displays the images. And I believe is related.

    Here so you guys can see what I am talking about

    This is how it looks in ultrabodymind right now
    https://www.dropbox.com/s/8xyzeloflc1xeud/Screenshot%202015-02-27%20at%205.28.34%20PM.png?dl=0

    THis is how the test website looks
    https://www.dropbox.com/s/0l9jp0duo17lgps/Screenshot%202015-02-27%20at%205.28.49%20PM.png?dl=0

    I was wondering if its possible to keep the way the hero banner looks in ultrabodymind while at the same time changing the other images.

    Thanks in advance guys. I really tried to fix this one myself but I can’t make any progress after hours of trying.

    PS: I also made a couple of test and I notice something.

    In the test site, this is what I get as error in every page especially in the home page

    http://urbanpunch.com/wp-content/uploads/2015/02/bowl-of-happiness2.jpg2-e1425064392287.jpg is resized in HTML or CSS from 828×399 to 617×297.

    you can see the test here: http://gtmetrix.com/reports/urbanpunch.com/UXexa7HM

    how come is being resized from 830 by 400 to 617px by 297?

    and this is what I get in UBM

    http://ubm1.ultrabodymind.netdna-cdn.com/wp-content/uploads/2015/02/bowl-of-veggies-e1424997258883-710×401.jpg is resized in HTML or CSS from 710×401 to 617×348. Serving a scaled image could save 17.7KiB (25% reduction).

    you can see the test here:
    http://gtmetrix.com/reports/ultrabodymind.com/B1Olk9jp

    It seems to me that somehow the image is being cropped to 710px by 401px instead of using the natural image that I upload that has 830px by 400px and then resizing it to 617, instead of just showing it at 830 by 400. it so complex i dont even understand it.

    • This reply was modified 1 year, 9 months ago by  Erick.
    • This reply was modified 1 year, 9 months ago by  Erick.
  • #7276

    Erick
    Member
    Post count: 1018

    I think I might have written way more than I needed and perhaps was not as clear as I could be.

    Basically just in a few sentences. I want to show the images in the main article (.site-content[role=”main”]>article.post:first-child) as they are without scaling them or cropping them, and without affecting the way the hero banner and the thumnails in the widgets look. Just keeping them as they are. Thats it.

  • #7284

    Jacob
    Staff
    Post count: 2312

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #7289

    Erick
    Member
    Post count: 1018

    You are right on money. Gtmetrix is using a smaller screen size to test the website. No wonder is using a scale image.

    And I want the image size to show exactly like it shows on the test site. 830px by 400. Did you check it? How it has the same code but it shows images different. So weird. I wonder what is causing that

  • #7290

    Erick
    Member
    Post count: 1018

    This is the only difference in code that i see.

    ultrabodymind

    img[Attributes Style] {
    width: 710px;
    height: 402px;
    }

    test site

    img[Attributes Style] {
    width: 850px;
    height: 400px;
    }
  • #7304

    Erick
    Member
    Post count: 1018

    I found the solution to the size problem. Basically the test website had the “Overwrite default media size automatically” off and ultrabodymind had it on.

    Now my question is, if I switch it off, is there a way to maintain the size of the images in the hero banner? perhaps use another size to be shown in the hero banner? I know sparkles uses 2 from the media settings, the thumbnail size and medium size, but can we configure the large size to be shown in hero banner? or is there an easier way where instead of turning off the overwrite we can use some css or div to change the image in the main articles?

    thanks

  • #7313

    Jacob
    Staff
    Post count: 2312

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #7319

    Erick
    Member
    Post count: 1018

    there are like 5 of those, do you have to change all of them

    <?php if ( has_post_thumbnail() && get_the_post_thumbnail() && ! post_password_required() ) : ?>
    		<p class="entry-thumbnail margin-bottom-30">
    			<a href="<?php echo esc_attr( get_permalink() ); ?>" rel="bookmark" title="<?php echo esc_attr( get_the_title() ); ?>"><?php the_post_thumbnail( 'post-thumbnail'); ?></a>
    		</p>
    		<?php endif; ?>

    also What is this going to affect? the hero banner or the main article post?

    Cuz if I can only affect the “.site-content[role=”main”]>article.post”

    that would be the easiest, btw I still have the overwrite image size activated. does it need to be deactivated for this to work?

  • #7320

    Erick
    Member
    Post count: 1018

    Update: I changed all of them to ‘830,400’ inside ( ‘post-thumbnail’)

    and activated overwrite image option and everything seem to be working like I want. The hero banner stayed like I wanted and the articles in the main are 830 by 400

    My question is if I needed to change all of them ( ‘post-thumbnail’)?

  • #7368

    Max
    Staff
    Post count: 3150

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #7397

    Erick
    Member
    Post count: 1018

    That is weird since it has been working so far. Nevertheless I changed it to ‘full’, and found out it is the same as 830,400. Nothing changed.

  • #7402

    Erick
    Member
    Post count: 1018

    Btw I forgot to thank you maxxi! 😛

    Ps: The images look the way I want them to look but I was wondering if there is a way to use the large image generated by wordpress, set the Large images settings in media to 620 by 300 and use those images for screen size below 1200px? that way I’ll stop serving scale images. thank you 🙂

  • #7595

    Erick
    Member
    Post count: 1018

    maxxi what is the proper syntax so that I can specify the dimensions I want? I dont want to put full since the images i want are really flat and that will affect the hero banner making it weirdly shaped

    thank you

  • #7627

    Jacob
    Staff
    Post count: 2312

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #7630

    Erick
    Member
    Post count: 1018

    I put the code you gave me in custom functions php as you gave it to me and this is what I got

    Parse error: syntax error, unexpected ”;’ (T_ENCAPSED_AND_WHITESPACE) in /home3/dperezr/public_html/urbanpunch.com/wp-content/themes/sparkle-childtheme/custom-functions.php on line 117

    then i tried without the ” like this

    add_filter( ‘post_thumbnail_size’, ‘filter_post_thumbnail_size_jan132014′ );
    function filter_post_thumbnail_size_jan132014( $size ){
    if( is_home() && in_the_loop() )
    $size = full;
    return $size;
    }

    and that stop the problem but I was wondering what is the correct syntax to apply this dimensions ‘810px by 380px’

    I tried
    $size = ‘810, 380’;
    $size = ( array(810, 380) );
    $size = 810px, 380px;

    but all broke the website

  • #7742

    Max
    Staff
    Post count: 3150

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #12298

    Erick
    Member
    Post count: 1018

    This was working with sparkles 1 but with the new sparkles the images are set to a hard 700 by something else. Is there a way to set it back the way it used to be?

  • #12311

    Jacob
    Staff
    Post count: 2312

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #12537

    Erick
    Member
    Post count: 1018

    the reply system works a little weird. Its hard to tell since it mixes old an new replies.

  • #7224

    Erick
    Member
    Post count: 1018

    Hey guys, As you know I have done a lot of modifications to Sparkles, specially the size of the images.

    Now All my images are 830px by 400px and somehow the natural image is 710px by 403px. I am not sure but this can’t be a good thing. Specially since the “frame” are 830px by 400px. I design them like that so that They will fit like a glove.

    Here, you can see what I am talking about.

    https://www.dropbox.com/s/f57dfs1xeutqeot/Screenshot%202015-02-27%20at%2012.png?dl=0

    single post same

    https://www.dropbox.com/s/xj1c77irs8zc5ua/Screenshot%202015-02-27%20at%2012.17.27%20AM.png?dl=0

    This is an issue in both homepage and single page.

    What CSS or PHP do I need to override this.

    Thank you so much!

  • #7226

    Erick
    Member
    Post count: 1018

    I edited this post but somehow I created a duplicate. Refer here for the edit text

    http://wpthms.com/support/topic/natual-image-size-2/

You must be logged in to reply to this topic.

This is a PRIVATE forum for verified users only, to view the replies/answers, you must be logged in!