Responsive Images in Content Block

Permalink
Hi folks,

I'm having an issue with images in the content block imported via redactor, when you import the image everything is good and it looks the way it should but as soon as you press save in redactor the images goes to it's full size.

I have went throughhttps://www.concrete5.org/documentation/developers/5.7/designing-for...

my page_theme file looks like this:

<?php
namespace Application\Theme\Evergreen;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme {
   protected $pThemeGridFrameworkHandle = 'bootstrap3';
   public function registerAssets()
   {
      $this->providesAsset('javascript', 'bootstrap/*');
        $this->providesAsset('css', 'bootstrap/*');
        $this->providesAsset('css', 'blocks/form*');
        $this->providesAsset('css', 'core/frontend/*');
        $this->requireAsset('javascript', 'jquery');
        $this->requireAsset('javascript', 'picturefill');
   }
   public function getThemeBlockClasses()


I have the corresponding thumbnails types created.

Anyone have any ideas?

gavthompson
 
gavthompson replied on at Permalink Reply
gavthompson
Any ideas?
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi gavthompson,

Do you have the problem when you switch to the Elemental theme?
gavthompson replied on at Permalink Reply
gavthompson
Hi KD,

The responsiveness works as intended with the Elemental Theme.
gavthompson replied on at Permalink Reply
gavthompson
Any help would be super, still haven't figured this one out yet.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Have you tried the standard steps like uninstalling and reinstalling the theme, making sure caching is turned off, and clearing the cache?

If you want to zip up your theme and attach it to your reply, I will take a look at it.
gavthompson replied on at Permalink Reply 1 Attachment
gavthompson
Yea done that standard stuff.
The inserted images do seem to switch between the different thumbnail sizes as you resize the window but not in a scaling manner.

I've attached the theme, very much appreciate your time.
MrKDilkington replied on at Permalink Reply
MrKDilkington
If the images are switching as you resize the window, then responsive images using the picture element/Picturefill are working.

Image scaling is controlled by CSS. Here is the responsive image CSS that Bootstrap uses.
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

Images with this class will fill the available space of the parent element.
gavthompson replied on at Permalink Reply
gavthompson
If that code is cooked into Bootstrap shouldn't it be working ? what am I missing here >.<
tonyswaby replied on at Permalink Reply
Did you resolve this?

We're having the same problem image are not contained within the parent column
gavthompson replied on at Permalink Reply
gavthompson
I didn't resolve it nope :(
pvernaglia replied on at Permalink Best Answer Reply
pvernaglia
Add to your CSS file:

div.ccm-page img {
max-width: 100%;
}

redactor doesn't add the img-responsive class to the images
gavthompson replied on at Permalink Reply
gavthompson
Hi pvernaglia,

That did fix the responsiveness (YAY!).

Thanks!

EDIT:
div.ccm-page img {
max-width: 100%;
height: auto;
 }


height: auto also needed to to keep the aspect.