Theme is forcing images to display at reduced resolution

  • Unknown's avatar
    miltonparc · Member ·

    I’m using the Structure theme and I’ve modified the home page of my site by eliminating the left sidebar and increasing the width of the main column to fill the space.

    I’ve set the CSS so that the photos fill the space which is 620px wide – but the image quality is poor because the theme is automatically reducing the width of each image to 440px.

    Is there any way to prevent the theme from shrinking images that are on the home page?

    Here’s the html code that is causing the problem for the picture of the man with two dogs:

    <img width="440" height="240" src="https://miltonparc.files.wordpress.com/2017/07/andywithdogs.jpg?w=440&h=240&crop=1" class="attachment-structure-small size-structure-small wp-post-image" alt="" srcset="https://miltonparc.files.wordpress.com/2017/07/andywithdogs.jpg?w=440&h=240&crop=1 440w, https://miltonparc.files.wordpress.com/2017/07/andywithdogs.jpg?w=150&h=82&crop=1 150w, https://miltonparc.files.wordpress.com/2017/07/andywithdogs.jpg?w=600&h=327&crop=1 600w" sizes="(max-width: 440px) 100vw, 440px" data-attachment-id="1684" data-permalink="https://ccmp-mpcc.com/andywithdogs/" data-orig-file="https://miltonparc.files.wordpress.com/2017/07/andywithdogs.jpg" data-orig-size="620,380" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="AndyWithDogs" data-image-description="" data-medium-file="https://miltonparc.files.wordpress.com/2017/07/andywithdogs.jpg?w=587" data-large-file="https://miltonparc.files.wordpress.com/2017/07/andywithdogs.jpg?w=620" />

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    lastfarthing · Member ·

    Hi miltonparc,
    I’ve listed the suspicious classes and id’s below. I would start with modifying the css for homepagemid and see what happens.

    .homepagemid {
	float: left;
	display: block;
	width: 440px;
	margin: 0px;
	padding: 0px; }

.homepagethumb {
	width: 440px;
	margin: 0px;
	padding: 0px;
	overflow: hidden; }

#contentarchive .postarea {
	width: 440px;
	margin: 0px;
	padding: 0px; }

    440px is explicitly declared in all of these and then nowhere else in the stylesheet.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, instead of modifying the image HTML to set a width of 620px, what you want to do is to set a Media Width at Customize > CSS (below CSS entry area). You want to set that to 620px. Without that change, the software will use the original width when it creates the images to use.

    First off, add that 620 to the Media Width field and save. Then, remove the following from your custom CSS 

    .homepagecontent {
 width:580px;
}
.homepagethumb {
 width:620px;
}
.homepagethumb a img {
 width:620px;
}
.attachment-structure-small {
 width:620px;
 height:380px;
}

    and replace it with this. 

    .homepagemid, .homepagethumb {
  width: 620px;
}
.homepagethumb img {
  width: 100%;
  height: auto;
}

    If you have edited the image code in your posts to adjust the width and height, delete those images from the post and reinsert them at “full-width”. I think the issue will then be solved for you.

  • Unknown's avatar
    miltonparc · Member ·

    Guys, you’re not appreciating the depth of the problem.

    The theme is presenting an image that has been cropped down from 620px to 440px. No messing with CSS will change that problem. I’ve set the CSS to expand the image back up to 620px, but the image looks bad because it’s been shrunk before being expanded back to 620px.

    I’m beginning to think that this problem cannot be fixed.

  • Unknown's avatar
    thesacredpath · Member ·

    Hmmm, I think I see what is going on. when we hide the one sidebar with CSS, it is still figuring that the width is with that sidebar when it comes to the featured images and is not paying attention to the 620px width in the Media Width field. I’m discussing this with one of our developers right now.

  • Unknown's avatar
    thesacredpath · Member ·

    @miltonparc, this would require some changes to the theme PHP script files themselves, and given that Structure is retired, this change will not be made. I wish there was a way to fix this for you with CSS, but it just isn’t something that can be done.

  • Unknown's avatar
    miltonparc · Member ·

    Just found the solution. Use the ID for each separate post. Move the low-res image to the right and set the original full-res image as the background. Here’s the CSS:

    #post-1661 img{
	 display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://miltonparc.files.wordpress.com/2017/07/andywithdogs.jpg);
  width: 620px; /* Width of new image */
  height: 380px; /* Height of new image */
  padding-left: 620px; /* Equal to width of new image */
}
  • Unknown's avatar
    thesacredpath · Member ·

    Glad you found a solution that works for you. That had occurred to me, but it does require you to write a CSS rule for each and every post you have with a featured image, which is a lot of work. If you write a lot of posts, it will also make your custom CSS file grow quite large, which could affect page loading times.

  • The topic ‘Theme is forcing images to display at reduced resolution’ is closed to new replies.