Trix: Making Images Left Align

[ktkaushik]

Hey @javan

I want to make images Left Align, like Medium.

I want to be able to write on the right hand side as well. I am having a hard time to do so. I have tried to use the insertHTML api with inline css but that doesn't seem to work.

I tried by adding HTML with inline css and also by modifying the css for figure element which is a container for the img property but it seems to not maintain the state for some reason. Everytime i start typing or add another image it undos all my changes and resetting all the work done.

Is there any work-around for this ? Is there a possibility that i can add images, resize them, remove the captions part ?

[ktkaushik]

I think the GIF below would help. This is from the Live site.

[mbeech]

I edited the default trix.css rule for trix-editor .attachment to do this.

trix-editor .attachment {
  position: relative;
  float: left;
  max-width: 100%;
  margin: 10px 10px 10px 0;
  padding: 0;
  color: #666;
  font-size: 13px;
}

I'm not sure about removing the caption other than hiding it using css.

[ktkaushik]

@mbeech thanks.

Your solution works for all the attachments. I want it for only some attachments. I give them an option after the user has clicked on the Image where or not they want the image to be left aligned.

That's the issue. I have tried adding class names using this file to whitelist them but that adds them to all attachments again.

[sstephenson]

Currently there’s no way to have attachments with different alignments in Trix.

[ktkaushik]

Thanks @sstephenson

Actually, I wanted to understand what could be done to persist the styles and add class names to customize the look and feel.

[CristinaSolana]

@ktkaushik Did you ever happen to find a solution? I was trying to use trix-selection-change to create and append buttons and then add event listeners. All looks like it is working, am able to align (by adding inline float or text-align), but doesn't persist.

[asecondwill]

@sstephenson - is this something that might be added one day? aligning images left/right/center ?

[woahdae]

The question is more than just a feature request for image alignment. It's also an ask for help about any possible direction or workarounds for persisting CSS customizations. Unfortunate to have so little direction around such an important feature.

[ktkaushik]

@woahdae That makes sense actually. I don't see this happening anytime soon.

[woahdae]

@ktkaushik I tried adding a content attachment whose content is a style tag, adding an ID to the figure of an image, and targeting the image in the style definition. Saving the record, I can see it sent correctly in the params, but seems to get scrubbed before it gets to the database... what's the point of content attachments if they can't be persisted? I must be doing it wrong.

[ktkaushik]

@woahdae I have not worked on Trix in a while man. Sorry.