zpBootstrap - graphics within Zenpage not responsive.

tplowe56

Vincent - is this something would be easy to fix? Images/graphics inserted into zenpages are not responsive on mobile. (they do not resize to fit screen)

acrylian

That is easy to fix. The general theme css (or a specific content classjust needs a define like:

img {
  display: block; (or display: inline-block should do as well)
  max-width: 100%;
  height: auto;
}

tplowe56

Thx!

vincent3569

hi
zpBoostrap supports responsive images in news/pages.

so, more simple: have a look on the tip on the bottom of this page:
https://www.vincentbourganel.fr/pages/zpbootstrap-2.2

acrylian

I think a general CSS define as I noted above should generally be in the theme (any new theme I will create will do). It should not be necessary to edit any files. It does not harm any image to have that. But the benefit is any image's width will size to its parent element's width automatically.

vincent3569

I agree and desagree.

My theme generally manages responsive images as you describe above.
But it doesn't manage content provided by users (news or pages content). As example, personnal content may set width or eight on images, that breaks responsive behavior.

So, with my theme, each image should have 2 classes : img-responsive (class to be responsive, with the same css rules than yours) and remove-attributes (for jquery cleaning of unnecessary and unwanted attributes).

Of course, gallery content automatically add these classes, but they should be added manually for each personnal content that user want to be responsive (my theme doesn't know if user want its content to be responsive or not).

So, with these 2 classes, my theme is robust, with pictures managed by zenphoto (thumbnails and other sized pictures) and pictures added by users in news/pages contents.

acrylian

As example, personnal content may set width or eight on images, that breaks responsive behavior.

Only if it set that via style on the image itself which generally should not be done as style is to be avoided for such reasons. (And setting the height is something you should never do in responsive sites as that will naturally not work as expected).

Unless I am remembering wrong offhand even tinyZenpage for example sets such a size if on the parent wrapper element and not on the image itself.

But of course it's your theme. I would not do it this way but I also wouldn't use bootstrap ;-)

vincent3569

of course it should not be done. but it can be done by users :-)
so my theme manages all cases (responsive images or not, with unwanted attributes or not).

unfortunatly, in the same way, to have responsive content in news/pages, users may have to edit their content to add tags/classes requested by Boostrap.

I create a page (provided with my theme in theme description) to explain how to design personnal content to be responsive using Boostrap framework:
https://www.vincentbourganel.fr/themes/zpBootstrap/bootstrap_grid_system.htm

my theme can't add them in user contents and users have to edit their contents to make it responsive.
it probably will be the same for your own responsive themes.

acrylian

Any custom site theme I do or did just has the above defines and if someone sets any styles as not supposed to it will have side effects. The recommended way to add images to Zenpage is tinyZenpage (which perhaps will use a content macro in the future to better cover outdated or non existing images etc). A theme cannot cover all possible usages so some "education" or "learning" from users is always needed I fear ;-)

tplowe56

Removing the size attributes of images after inserting in a ZenPage makes the image responsive. Something I didn't investigate. Thanks for all the advice.