Need help? Check out our Support site, then


Images Show Too Wide(ly) For Mobile On The Hemingway Rewritten Theme?

  1. Hello,

    I do not have a mobile device to test this with but when viewing how my blog looks with the Hemingway Rewritten theme in Mobile Size using the WordPress.com Customizer and when using the Responinator.com (http://www.responsinator.com/?url=johnjronline.wordpress.com%2F), I notice that images are not being sized properly like the text so that it does not show too wide(ly)/narrow(ly), instead images are showing too wide(ly). (In the smaller/narrow mobile sizes)

    Hemingway Rewritten WordPress.com Customizer Mobile Size Screenshot:

    https://mediacru.sh/3o5NYdS_ZTY0

    Some other themes properly size the images to not show too wide(ly)/narrow(ly) (Twenty Thirteen, Able, et cetera) Twenty Thirteen WordPress.com Customizer Mobile Size Screenshot:

    https://mediacru.sh/bDco5tJF_pnO

    Is this a bug or is this how the Hemingway Rewritten theme was designed?

    Also when using the WordPress.com Customizer set to Mobile Size for the Twenty Twelve theme, I notice that images show a bit too narrow instead of sizing the images at a proper size that is not too narrow or too wide, are there plans to change this in/for the Twenty Twelve theme?

    Thank you,
    -John Jr

    The blog I need help with is johnjronline.wordpress.com.

  2. Thanks for the screenshots. I had a look on an actual iPhone and I see the same thing you're seeing using the mobile view tools, so I'll report this to our developers so they can have a look. We'll keep you posted here.

  3. You are welcome Kathrynwp, great, and thank you. :)

    -John Jr

  4. Hello Kathrynwp, did you also notice the slight narrowness of images in the mobile size for Twenty Twelve as well?

    -John Jr

  5. This is what I see on the Twenty Twelve demo on iPhone:

    https://cloudup.com/cpxbvSZ27xV

  6. I guess that it depends on the type of image (it is probably easier to see with images of animals (including humans) and probably objects) and the image size/dimensions because this is what I see on some images:

    https://mediacru.sh/u7prPVJpHfWB

    It will probably be harder to notice what I am talking about if you are using scenery images and zoomed out images like the one on the Twenty Twelve Demo, I normally use images of animals/objects/zoomed in images/et cetera, and so it is more noticeable for those types of images.

    Thank you,
    -John Jr

  7. Could you provide a link to the specific post or page where that screenshot was taken? Thanks.

  8. I added your tiger image to a post on my test site with Twenty Twelve and it's not appearing squished at iPhone size, as you can see here:

    https://cloudup.com/cjSpQXbka_j

    I tested with:

    - Resizer browser extension at iPhone 5 size - Mobile resizer icon in the Customizer - iPhone 5

    In order to really troubleshoot why your images are looking slightly squished, I think you may need to switch your theme to Twenty Twelve so I can see what's going on directly. If you'd like to do that, just let me know.

  9. Hello Kathrynwp, I have set my blog to Twenty Twelve, thank you. ;)

    -John Jr

  10. Also the image in this post looks even more narrow for me than the tiger image and so do some of the other links that I already posted, and so they are better examples ;) :

    https://johnjronline.wordpress.com/2014/04/07/4-7-2014-dream-fragment-a-library-music-class-with-b-b-king-and-a-former-job-at-an-electronics-store-and-another-south-park-the-stick-of-truth-inspired-dream/

    -John Jr

  11. I think we may have found the culprit. It looks like you're pulling in those images from another site, rather than uploading them to your Media Library. This prevents the images from being resized correctly on smaller devices. If you first upload those images to your media library and then insert them into your posts, that should work better.

    Would you like to try a test on one post and let me know how it goes?

  12. I was going to mention that as a possibility, I usually use Wikipedia/Wikimedia Commons/Wikia, and I doubt that will change because this is the way that I like to deal with images for my blog for various reasons; but here is my Temporary Test Post (which I will delete after we confirm it works):

    https://johnjronline.wordpress.com/2014/04/14/temporary-test-post/

    It worked but why does this happen in Twenty Twelve but not some other themes that I have tested like Twenty Thirteen, Able, et cetera?

    -John Jr

  13. Hi there,

    It worked but why does this happen in Twenty Twelve but not some other themes that I have tested like Twenty Thirteen, Able, et cetera?

    First off, I'm glad it worked!

    The answer to your question is in the original CSS for the theme. Some themes, such as Twenty Twelve and Hemingway Rewritten, only resize images that are added to the posts through the Media Library. They have rules like this:

    .entry-content img[class*="wp-image"] { max-width: 100%; height: auto; }

    This targets only images that are: 1) inside your posts; and 2) contain the "wp-image" classes. The "wp-image" classes are added automatically when you add images into the post through the Media Library. When you add external images, those classes aren't applied, and so the resizing does not occur.

    Themes like Able and Twenty Thirteen have more general rules that apply the image resizing to ALL images. For example, they might have CSS rules like the following:

    img { height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ max-width: 100%; /* Prevent images from overflowing their boundaries. */ }

    Since it's being applied to the "img" element, all images in the theme, even external ones, automatically are resized to fit inside their containers.

    I hope this helps clarify things! Let us know if you have any questions.

  14. Hello Michiecat,

    Thank you for explaining that, are there any plans to change the rules for Twenty Twelve and Hemingway Rewritten so that they can properly resize images not added to the Media Library?

    Thank you,
    -John Jr

  15. And if not, will enabling the Mobile Theme Option help improve this situation?

    Also, is there a way to see how your blog looks with the Mobile Theme Option enabled (http://en.support.wordpress.com/themes/mobile-themes/) (when using the WordPress.com Customizer and Responsinator.com they seem to ignore/not show the Mobile Theme, but I could be wrong because I usually only have tested this with already responsive themes with the Mobile Theme Option enabled), if not are there any plans on adding this ability/option for those of us without smart mobile devices so that we can know how our blog looks with the Mobile Theme Option enable?

    Thank you,
    -John Jr

  16. The mobile theme is an alternative stylesheet that's only normally activated by folks who are using an older, non-responsive theme, so it doesn't apply to responsive themes like Twenty Twelve, Hemingway Rewritten, etc. It uses device detection instead of reacting responsively to viewport size so the preview buttons will not be able to display it.

  17. I'll ask Michelle to take a look at your other question.

  18. Hello Kathrynwp,

    Okay, that makes sense, thank you for answering that; and thank you for passing on my other question. :)

    -John Jr

  19. Hi John Jr,

    I can't make any promises, but I'll pass this along to our team so we can take a closer look. If we end up making these changes, we'll let you know.

  20. Hello Michiecat,

    Thank you, and I would recommend that this is done for all themes because I see no reason to exclude this ability.

    Thank you for being honest, and I hope that something positive happens in the future. ;)

    Thank you very much Kathrynwp and Michiecat for taking the time to help me, and I look forward to seeing these and other issues that I have reported at the WordPress.com Forums resolved in the future. :)

    -John Jr

  21. I just wanted to share an example of the importance of changing that rule for all themes that lack it, today I made a post (http://johnjronline.wordpress.com/2014/04/15/4-15-2014-dream-fragment-two-groups-fighting-over-a-building/) with an image added by a link to a Wikia image sized at 947 x 450 (http://expendables.wikia.com/wiki/File:-2.jpg), and the image went over/through the Sidebar area in the Hemingway Rewritten theme; and so I had to switch to a link of a smaller size of the image to avoid this ugly looking bug/glitch.

    Without that rule any theme without that rule will probably have this problem/bug/glitch if a linked image is wider than the body/main area dimensions of the theme, and so that simple rule is very important to avoid things like that/this from happening.

    Thank you,
    -John Jr

  22. Another problem/bug/glitch is that if you put a link in the image caption area/et cetera that is long it sometimes goes through/over the Sidebar as well:

    https://johnjronline.wordpress.com/2014/04/19/4-19-2014-dream-fragment-a-military-training-exercise-near-a-semi-outdoor-concrete-building/

    Screenshot:

    https://mediacru.sh/jpb9ScnR46yX

    Thank you,
    -John Jr

  23. Another problem/bug/glitch is that if you put a link in the image caption area/et cetera that is long it sometimes goes through/over the Sidebar as well:

    To avoid this problem, I suggest you use a link-shortening service or put the link on some words instead of pasting the long raw link.

  24. That is one option but do they plan on adjusting/fixing this, most themes can handle links like that properly?

    Also are there any plans to adjust the second image problem that I reported (and the first one one involving the mobile problem), it is not the mobile problem exactly, but the one where any linked image larger than the maximum main column width will go through/over the sidebar if it is large enough in the Hemingway Rewritten theme?

  25. That is one option but do they plan on adjusting/fixing this, most themes can handle links like that properly?

    When you say "most themes" - could you give me one or two examples of specific themes so I can take a look?

    Also are there any plans to adjust the second image problem that I reported

    I'm not able to give you an ETA. Every week, our developers triage issues in our bug/enhancement tracking system and work on issues in order of priority.

    Instead of hotlinking to images outside of your site, you can upload images to your media library for a consistent display in all themes.

  26. Twenty Twelve, Twenty Thirteen, Twenty Fourteen, Able, Suits, Zoren, Newsworthy, Bonpress, Highwind, Singl, Responsive, et cetera.

    Okay, I have various reasons why I usually link to images instead and so I doubt that will change unless WordPress.com gets unlimited free storage or something like that, but thank you for responding Kathrynwp.

  27. I noticed you asked a question earlier about how to view the mobile theme for testing:

    Also, is there a way to see how your blog looks with the Mobile Theme Option enabled?

    One possible way to do that is to use the built in developer tools in the Safari browser. To access them, go to Safari > Preferences > Advanced and check the box in that panel that says “Show Develop menu in menu bar.” Then go to Develop > User Agent and you should see options to select iPhone or iPad.

    I checked the https://johnjronline.wordpress.com/2014/04/13/4-13-2014-dream-fragments-my-brother-gc-buys-a-white-tiger-from-a-zoo/ post using the iPhone user agent option in Safari, and the image was contained properly without getting squished. Here is a screenshot from my test: https://cloudup.com/cmb50Tkgoc4

    The mobile theme was made specifically to work as a mobile-friendly look for themes that aren't responsive or that have edge case issues with images like the one you've run into here.

    That is one option but do they plan on adjusting/fixing this, most themes can handle links like that properly?

    An change like that one is not something we plan to take the time to review and update for every single theme because it's preferable and very easy to work around it. The team tries to strike a balance between looking at issues like this and reviewing, making, and launching new themes. We try to consider each request and make a judgment call about whether it will help a majority of users. In this case, you should use link text to avoid the problem.

  28. Hello Designsimply,

    Thank you for sharing that tip for the Safari browser, I have never used that browser before, but now I know a way to see the Mobile Theme Option in action; and so thank you.

    The narrowness happens when using the Twenty Twelve theme without the Mobile Theme Option enabled when viewing in a Mobile Size, I am not currently using Twenty Twelve (I am using Hemingway Rewritten at this time), and so that is probably why you did not see the narrowness.

    I have enabled the Mobile Theme Option for the Hemingway Rewritten theme, and I will probably enable it with all the themes that I have problems like this with and hopefully that will help with some of the problems if they are not fixed.

    I disagree with the decision, I think that things like this should not be happening in any theme, but I do thank you for answering my question about the link problem in some themes.

    Thank you,
    -John Jr

  29. You also have to enter content in a recommended way to get the result you want. Not every reported issue in every theme for every case will result in a change — and there really is a balance in deciding how much time a team will spend on addressing some things which have good alternate paths that work well compared to moving forward and making new things too.

    Thank you for reporting issues and being a part of our community, and thank you respectfully disagreeing but still understanding that good content practices like using link text instead of long URLs and either using the mobile theme or uploading images to a blog instead of hotlinking are the recommended solution at this point in this case.

    I appreciate your attention to detail. As an aside, would you be interested in being a part of a beta testing group about new themes in the future? I like the idea of someone like you who is passionate about a product becoming more involved in making it better early in the process if that's something you are interested in doing.

Topic Closed

This topic has been closed to new replies.

About this Topic