Tagged: 

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • January 29, 2014 at 8:53 am #216254
    Jasmer

    When I attempt to resize an existing image in layout builder it doesn’t work.

    1. I select the image
    2. Click the image icon
    3. Make the edit
    4. Click update
    5. Click save
    6. Clear my cache (tried several browsers)
    7. The image does not resize. Why?

    Here are some screenshots with the current settings.
    http://goo.gl/jfbH5T
    http://goo.gl/krVUuZ
    http://goo.gl/bsThdN

    Thank you for your time, Jas

    January 29, 2014 at 7:36 pm #216580
    Josue

    Hi,

    Can you post the link to the actual Page please?

    Regards,
    Josue

    January 29, 2014 at 10:14 pm #216648
    Jasmer
    This reply has been marked as private.
    January 29, 2014 at 10:36 pm #216655
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .wp-image-2791 {
    width: 144px;
    height: 58px;
}

    Cheers! 
    Josue

    January 29, 2014 at 10:39 pm #216657
    Jasmer

    Hi Josue,

    Thank you for getting back to me so quickly.

    1. The CSS distorted the image dimensions. I’m not sure why because I check the dimensions in Photoshop and they are proportionally correct. I even changed it to another proportionally correct dimension 200×80 and the same problem occurs.

    2. Why would I have to add Quick CSS? Every time I am going to make an image change I need to add Quick CSS? Is there a way to get it to work the way it is designed to work in the layout builder? Is something interfering with it working correctly without CSS?

    Thanks, Jas

    • This reply was modified 10 years, 9 months ago by Jasmer.
    January 29, 2014 at 11:59 pm #216678
    Josue

    Hey!

    Yes, there is something interfering, a style declared by the theme, but you can disable it if you want, open css/base.css and look for the images section, around line 147:

    	img, a img {
		border:none;
		padding: 0;
		margin:0;
		display:inline-block;
		max-width: 100%;
		height:auto;
		width:auto;
		image-rendering: optimizeQuality;
	}

    Change it to:

    	img, a img {
		border:none;
		padding: 0;
		margin:0;
		display:inline-block;
		max-width: 100%;
		image-rendering: optimizeQuality;
	}

    Regards,
    Josue

    January 30, 2014 at 1:44 am #216726
    Jasmer

    Thanks Josue,

    It did not work. I did a find and replace in Dreamweaver. Very simple then uploaded the file via FTP and replaced the old file. Then I cleared my cache and cleared my web host cache. Still doesn’t work. Should I put !important at the end? so..

    img, a img {
		border:none;
		padding: 0;
		margin:0;
		display:inline-block;
		max-width: 100%;
		image-rendering: optimizeQuality!important;
	}
    January 30, 2014 at 2:23 am #216736
    Josue

    Hi!

    The base file still has those two lines (width: auto and height: auto).

    Regards,
    Josue

    • This reply was modified 10 years, 9 months ago by Josue.
    January 30, 2014 at 2:26 am #216737
    Jasmer

    I changed it back because it didn’t work. I wasn’t sure what else to do. Will you make that link private in your post please? Any idea how to solve it? I think I’m just going to upload a different size image. that seems easier right?

    January 30, 2014 at 3:41 am #216744
    Jasmer

    Hi Josue,

    In order to avoid the problem I attempted to upload another image.

    As you can see I saved it at 180×72 @ 326ppi. I did this because I want it to be a retina image. The iPhone 5S is 326ppi and the Macbook Pro Retina is 227ppi. For some reason it still appears pixelated. Do you have any idea why?

    Also, would mind deleting that link to my site in your comment please.

    Thank you, Jas

    January 30, 2014 at 6:53 am #216812
    Ismael

    Hey!

    Please upload the image with twice the size then specify the height and width via CSS:

    .aligncenter.size-full.wp-image-2893 {
width: 180px;
height: 72px;
}

    It should be retina ready. Increasing PPIs or dots per inch won’t do it. You need to serve an image with twice the size at least then specify the width and height via CSS.

    Regards,
    Ismael

    January 30, 2014 at 6:57 am #216813
    Jasmer

    Hi Ismael,

    I can do twice the dimensions at 360×144, but wouldn’t the resolution come into play at some point? The iPhone 5 is 326ppi and the Macbook Pro Retina is 227ppi. So should I do 360×144 at 326ppi to ensure the crispest image or is that overkill?

    Gracias! Jas

    • This reply was modified 10 years, 9 months ago by Jasmer.
    January 30, 2014 at 2:42 pm #216958
    Ismael

    Hey!

    Please do try that one. I’m sure serving an image with twice the size will make a difference on retina display. You need to specify half the size of the actual image size via CSS.

    Regards,
    Ismael

    January 30, 2014 at 2:43 pm #216959
    Jasmer

    Ok I’ll try it and get back to you. Thank you!

    January 31, 2014 at 1:35 pm #217416
    Jasmer

    Hey Ismael,

    Just ran across a plugin that should do the trick. It’s called WP Retina 2x. There is an article on his blog that might be helpful to others. I’ll get back to you with the results.

    http://www.totorotimes.com/news/retina-display-wordpress-plugin

    Thanks, Jas

    January 31, 2014 at 8:46 pm #217642
    Josue

    We looking forward to hearing from you :)

    Regards,

    Josue

    February 2, 2014 at 2:10 am #218329
    Jasmer
    This reply has been marked as private.
    February 2, 2014 at 3:43 am #218343
    Josue

    Done, those replies are now private.

    Cheers!
    Josue

    February 6, 2014 at 2:39 pm #220453
    Jasmer

    Haven’t forgotten. I’ll get back to you with the results!

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Layout Builder Image Resize Problem’ is closed to new replies.