include bootstrap image class img-responsive about c1-cms-foundation HOT 4 OPEN

Hi!

You can extend the content editor with your own styles. Please see here: http://docs.composite.net/CustomizingVisualEditor

In your case, provided the style is defined on your website, you can add another option for it in ~\Frontend\Config\VisualEditor\common.xml:

  </format>
        <format id="img-responsive" label="Responsive" image="" notes="" classes="img-responsive " selector="img">
    <select />
  </format>

The styles/options you have referred to come with the Bootstrap-based starter sites such as "Venus", and they are not part of Composite C1 itself (the core).

The starter sites are mostly provided for demo purposes but can be also used to quickly start your own website, or quickly learn how to use the CMS.

from c1-cms-foundation.

Hi wwwysocki

Thanks for the solution it almost works :-)
I can add a new style as you suggest, but if want to combine classes like making a

  </format>
        <format id="img-rounded" label="Responsive" image="" notes="" classes="img-rounded img-responsive" selector="img">
    <select />
  </format>

it ends up marking the img tags class attribute as class="img-rounded,img-responsive"

Is there any way to make it create the class attribute with out the comma separation?

from c1-cms-foundation.

Can't reproduce it :(. But I made an additional (combined) format, along with the 'img-rounded' and 'img-responsive':

  <format id="img-rounded-responsive" label="Rounded+Responsive" image="" notes="" classes="img-rounded img-responsive " selector="img">
    <select />
  </format>

No comma, just a space between the classes when applied.

<img class="img-responsive img-rounded" src="~/media(9132965e-4a0b-48f1-9585-0bfe42aacefa)" />

from c1-cms-foundation.

Hi again

Had to find some time.
Here you can see the problem I'm writing about.
http://imgclasstest.demo.composite.net/Composite/

I've modified the style "Large image to:
<format id="img-large" label="Large Image" image="" notes="" classes="large-image myClass2" selector="img"> <select /> </format>
On the front page I've inserted a photo of a phone and in the image properties selected "Large Image", this results in this html:
<img src="~/media(40ef35a6-2ed9-4daa-a5db-c47ecc13e6d6)" class="large-image,myClass2" />

here the class attribute is messed up with a comma :-(

from c1-cms-foundation.