Is Plone 5 Theme responsive

1

I've seen theming discussion related to portlets, availability, etc. However, I couldn't find anything that talked about auto resizing of images.

I am not a themer. It doesn't appear to me that the Plone default theme is truly responsive, as I understand it. I'm trying to understand Plone theme and how it handles responsive behavior related to images. the plone.org page tells us the Plone default theme is responsive.

My understanding of responsive, when related to images, is that images auto resize based on the size of your device. (https://www.w3schools.com/html/html_responsive.aspa)

As a test, I put the identical image in for the logo and in the hero section
(here: http://mckennariley.info/). However, the images display different sizes; and, the top one does not resize as I thought it would because the horizontal bar dispalys on the desktop browser. finally, when viewed on a phone, it again does not resize.

I looked here: https://www.w3schools.com/html/html_responsive.asp to try to understand a little of what makes a theme responsive and found "viewport" . I looked in the Plone theme and found the "viewport" is included.

Is there anything I have to do to change my image to make it responsive?

Am I understanding correctly what is meant by responsive?

Thanks for any ideas or help me see what I'm missing

2

Hey @rileydog

Plone 5.x does auto resize images (at least their width and height, not their absolute density) and 8 out of 10 times it gets this right. Plone 5.1 will introduce support for "srcset" which is closer to "truly" responsive images. This makes it possible to specify specific images for specific screen sizes.

See the note in the Plone 5.1 upgrade guide about HiDPI images.

So the infrastructure will be there in 5.1. There will still need to be work done to get to sensible default implementations.

3

Thanks David,

However, if you look at the links, I don't agree that images are re-sized.

if you look at the mckennariley.info - the images are wacky. Shouldn't the images size to fit, in my case the iphone plus?

4

Interesting, when images are placed in the content area they should work. It looks like we've been caught with a scenario where the images are in the header.

There's supposed to be a css rule with something like

img{max-width:100%}

For some reason, it isn't being activated (maybe a bug in the implementation).

5

here: https://www.w3schools.com/html/html_responsive.asp
it talks about setting the viewport.

that's all I know. ;(

Any one else have an idea?
should i file a bug?

6

The viewport meta data is set (check the source with e.g. Google Chrome: view-source:http://mckennariley.info/).

The rule @pigeonflight brought up is correct, and seems to be missing in Barceloneta.

There is btw a mixin which sets this for the class .img-responsive but it's not used at all: https://github.com/plone/plonetheme.barceloneta/blob/master/plonetheme/barceloneta/theme/less/mixin.images.plone.less

I would define some CSS like this:

.responsive-img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

img {
  max-width: 100%;
}

You could then add a new format for TinyMCE in the control panel (Advanced tab, other settings):

{
    "style_formats": [
      {
        "title": "Responsive Image",
        "selector": "img",
        "attributes": {
          "class": "responsive-img"
        }
      }
    ],
    "style_formats_merge": "True",
    "style_formats_autohide": "True"
  }
7

should I report this as a bug and point back to this discussion?