How do you align images in C1?

Topics: Visual editor
Aug 1, 2011 at 10:13 AM
Edited Aug 1, 2011 at 10:31 AM

I'm just evaluating C1 and I can't seem to find a way to change the image alignment of an inserted image using the GUI. It seems you can only do this from the HTML?  I'm using the Starter website at the moment.  Is there somewhere you can configure which options display in the editor or does C1 not actually have this function yet?


I've just realised that the button images aren't loading. In the DOM inspector network tab, they all come up as 404.  Is there any reason why this might be happening on a new install of 2.1.1?  It seems to be trying to load the images from a folder above the root folder.

Root folder is http://localhost/compositeC1/website/

..but it's trying to load some of the images from:

http://localhost/frontendc1/website/composite/ which above the root folder.  Does C1 not support being run from a virtual directory?

See screenshot:

Aug 1, 2011 at 10:41 AM


C1 Visual editor has two buttons "Align right" and "Align left" which can be used to align images - see screenshot here

If you apply this button to the image and then switch to the Source view, you will see that IMG tag has class="right" or class="left". These style rules are specified in file ~\Frontend\Styles\VisualEditor.common.css . These buttons in Visual editor are specified here - \Frontend\Config\VisualEditor\common.xml  - the file which is used to customize Visual editor:

      <format id="alignleft" label="Left" image="" notes="Align left" classes="left" selector="img,table">
        <button label="" image="images/left.png" />
      <format id="alignright" label="Right" image="" notes="Align right" classes="right" selector="img,table">
        <button label="" image="images/right.png" />

For more information how to customize Visual editor read this article -

Aug 1, 2011 at 10:51 AM

Thanks Inna - I can see the buttons are supposed to be there, but there seems to be some kind of problem with the current version which causes them to not display (see my screenshot above). The path of the images referenced in the HTML source code is invalid.  I'm not sure if somehow I've messed something up, but it's a new installation I've only just created so I don't think I have.

Aug 1, 2011 at 11:24 AM
Edited Aug 1, 2011 at 11:24 AM

I've just installed a fresh install via the Web Platform installer, and it seems this version works OK due to it's different folder configuration after the install.  I'm wondering perhaps if the "Visual Studio" download, is a different build or installation layout to the one installed via the Web Platform installer as it doesn't seem to have the same problem. For instance the WPI version does not put the website in a "Website" subfolder and it doesn't include the SLN file.

Aug 1, 2011 at 12:59 PM
Edited Aug 1, 2011 at 12:59 PM

@nmg196 right click on the project in Visual Studio, and check the "Web" tab. It's possible that you have a url like "/Frontendc1/web/composite" hard-coded somewhere there

Aug 1, 2011 at 1:10 PM

I'm not sure what you mean by the "Web" tab.  

I've done some more experimenting and have discovered the images all load if I use Visual Studio's own webserver.  They don't load though, if you try and run the application using "real" IIS as the paths referenced are incorrect when running the site in a virtual directory (ie where you right click the folder in IIS, and choose "Convert to Application").  Any idea if this is fixable? 


Aug 1, 2011 at 1:17 PM

I am guessing here, but seems like the client JavaScript that build up the toolbar constructs the image path by replacing 'composite' with 'frontend' - a strategy that breaks down, if 'Composite' if part of the virtual directory path.

Composite C1 should run just fine in virtual directories, but seems there is a bug here which require that the path to it does not contain 'composite'.

Try renaming your base path 'compo-site' or something and see if things become ok.

Aug 1, 2011 at 1:23 PM

You guessed correctly!  I've renamed the folder from compositec1 to something else and it now works correctly!

Seems odd that the app doesn't work if you put it in the folder bearing the name of the app!  This should probably be fixed.. :)

Thanks! :)