Natual Image Size

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

Status: resolved
  • This topic has 24 replies, 3 voices, and was last updated 4 y, 9 mo by  Erick.
Viewing 22 reply threads
  • Author
    Posts
    • #7225

      Erick
      Member

      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

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

      Login | Register | Forgot Password?

    • #7260

      Erick
      Member

      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

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

      Login | Register | Forgot Password?

    • #7270

      Erick
      Member

      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 5 y, 7 mo by  Erick.
      • This reply was modified 5 y, 7 mo by  Erick.
    • #7276

      Erick
      Member

      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

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

      Login | Register | Forgot Password?

    • #7289

      Erick
      Member

      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

      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

      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

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

      Login | Register | Forgot Password?

    • #7319

      Erick
      Member

      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

      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

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

      Login | Register | Forgot Password?

    • #7397

      Erick
      Member

      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

      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

      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

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

      Login | Register | Forgot Password?

    • #7630

      Erick
      Member

      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

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

      Login | Register | Forgot Password?

    • #12298

      Erick
      Member

      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

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

      Login | Register | Forgot Password?

    • #12537

      Erick
      Member

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

    • #7224

      Erick
      Member

      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

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

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

Viewing 22 reply threads
  • You must be logged in to reply to this topic.

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

© Copyright 2020 by wpthms.com. All Rights Reserved.