Welcome! To use this support forum, please Login or Join Today!

   

Working with images in Element Theme

{name}
Rank

Total Posts: 9

Joined 2012-10-18

PM

 

How do you deal with images in a responsive theme like Element.

I understand the fluid container and not using absolute values. So how do I put images on the site that look good both to the desktop user and the mobile user. For example if I need to display a map image I would normally upload to post or page a 600 by 600 px image for detail. That looks great on desktop screen size. But when I do this the image for mobile doesn’t resize on my Android or iPhone.  Here is an example.

http://mcbridelibrary.org/new/test-page-1/

So how do you do this with a responsive theme like Element?

What am I missing?

How do you work with images with a responsive template?

I read a reply in this forum about using a logo and header and some code about media styles - does this mean every time I want to use an image I have to put in code to make it show correctly on desktop and mobile. This seems to defeat the whole reason I bought this theme. Am I not understanding about responsive themes? I thought the images were supposed to resize to fit the device.

I know how to create a mobile site and how to create a desktop site, been doing that for years, also using Wordpress for several years but I don’t see how images resize using this theme. I don’t see any instructions on how to do it here.

Could you please give details or post a tutorial on how you use images in a responsive theme that resize to the device size. Maybe I just don’t understand responsive design but I thought that was the
whole point of using a responsive theme.

Am I wrong?

Thank you

Charles

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

If you want an image to scale with the grid, just give it a class of “scale-with-grid”.

The CSS rule can be found in style.css:

/* #Images
================================================== */

img.scale-with-grid { 
 max-width: 100%;
 height: auto;
}

If you want all images in the main content area to inherit this functionality, just change the above rule to:

 
/* #Images
================================================== */

img.scale-with-grid,
#content img { 
 max-width: 100%;
 height: auto;
}

{name}
Rank

Total Posts: 9

Joined 2012-10-18

PM

 
Casey - 20 October 2012 12:43 AM

If you want an image to scale with the grid, just give it a class of “scale-with-grid”.

The CSS rule can be found in style.css:

/* #Images
================================================== */

img.scale-with-grid { 
 max-width: 100%;
 height: auto;
}

If you want all images in the main content area to inherit this functionality, just change the above rule to:

 
/* #Images
================================================== */

img.scale-with-grid,
#content img { 
 max-width: 100%;
 height: auto;
}

Ok, Thanks for the information. But could Simple Themes provide some instruction on how you actually do this. I have no idea on how to do this correclty. I have looked through all your site - and I could not find instructions on how to do what you stated to do.

I used this code

<img class="scale-with-grid" src="http://mcbridelibrary.org/new/wp-content/uploads/2012/10/600by600.png" alt="" width="600" height="600" /> 

  in HTML mode and then went back and edited image to align to left and resized so the text would wrap and got the following code.

<img class="scale-with-grid alignleft" src="http://mcbridelibrary.org/new/wp-content/uploads/2012/10/600by600.png" alt="" width="420" height="420" /> 

Is this what I need to do for every image in the site? This seems a sketchy way to do this. Is there a more streamlined technique?

Obviously, I am going to want every image on the entire site including the header logo to do this so how do I enable this for all images.There is no logical reason to build a responsive web site if my images don’t resize for the mobile user.

I have emailed my friends and they said they just inserted the images in their responsive themes and they automatically are resized to fit a mobile site,  Am I missing something here? Is this really not a true responsive design?  Or is the image resize capability not in the theme? Or do I just not know what I am doing?

Thank you

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

If you want all images in the main content area to inherit this functionality, just change the above rule to:

/* #Images
================================================== */
 
img.scale-with-grid,
#content img { 
 max-width: 100%;
 height: auto;
}

To add this, just go to Appearance → Editor → style.css or style{x}.css (e.g; style2.css - whichever style preset you are using). As for width and height attributes, for now you need to remove them. I’ll look and see if there’s a way that I can just make this default functionality in the next update.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Ok, I’ve just added default responsive image support to the theme. You should be able to resolve this just by updating.
http://www.simplethemes.com/wordpress-themes/changelog/element

This fix applies to post thumbnails (featured images) as well as images inserted through the editor.

Note: This function simply removes the width and height image attributes when inserted from the WP editor. Images that were inserted prior to this release will not automatically inherit these properties. (You’ll need to remove the width and height tags manually or reinsert the image).

I’ve also added the CSS fix mentioned above, which applies the rules to all images within the main content area.

 

{name}
Rank

Total Posts: 9

Joined 2012-10-18

PM

 
Casey - 20 October 2012 05:00 PM

Ok, I’ve just added default responsive image support to the theme. You should be able to resolve this just by updating.
http://www.simplethemes.com/wordpress-themes/changelog/element

This fix applies to post thumbnails (featured images) as well as images inserted through the editor.

Note: This function simply removes the width and height image attributes when inserted from the WP editor. Images that were inserted prior to this release will not automatically inherit these properties. (You’ll need to remove the width and height tags manually or reinsert the image).

I’ve also added the CSS fix mentioned above, which applies the rules to all images within the main content area.

Hello Casey,

Thank you, thank you. I was working with the theme and I noticed an update notice I clicked update and it updated the parent theme. I came back here and wow - I found this problem was fixed.

I must say I am very very impressed and grateful for you fixing this for everyone who uses the theme. This will be a big help in having the graphics rendered correctly.  This is simply superb customer service and I am blown away. You have a customer for life. I had been using other themes produced by one of your competitors and I had been trying to get them to fix a bug for about two months. They normally took about 5 to 7 days just to respond to a ticket. So even though I have a lot of money and time invested in them I am going to abandon them and buy your themes. I plan to buy more and switch all my sites for my clients to Simple Themes. In this day of such horrible customer service you stand out like a bright light and night. I have read through the forum and I am very impressed how you seem to put up with grouchy people like me and help everyone.

Thanks again
Charles

{name}
Rank

Total Posts: 15

Joined 2012-12-07

PM

 

I agree. Support here was my reason for selecting SimpleThemes. No joke.