Comments (5)
Thanks for your advice. I solved my problem a little differently.
And thank you again for your wonderful app
from contenttools.
Hi @vovainua1992 - so I can hazard a guess that this is something I still occasionally fall over on new sites.
Basically CT converts images to div tags while editing them and so there are some styles in place for images provided by the editor during edit mode. When you stop editing the page these classes are removed (as they are only for editing and shouldn't pollute your page) but this means if there are no base styles in place for images in place your images can appear out of wack.
The following is some basic SCSS we commonly apply to images and iframes (as the same is true for embedded videos) within formatted content sections (which we define as say <div class="formatted">...</div>
. This helps to normalize the behaviour between the edit and view mode.
/**
* IMAGES
* --
* Provides the image styling of child elements within the formatted class.
*/
> img,
> a > img,
> .ce-element--type-image,
> a > .ce-element--type-image,
> iframe,
> .ce-element--type-video {
display: block;
margin: 32px auto 24px;
max-width: 100%;
}
// Alignment
> .align-left {
@include breakpoint($medium, up) {
clear: left;
float: left;
margin-top: 0;
margin-right: 40px;
}
& > *,
& + * {
margin-top: 0 !important;
}
}
> .align-right {
@include breakpoint($medium, up) {
clear: right;
float: right;
margin-top: 0;
margin-left: 40px;
}
& > *,
& + * {
margin-top: 0 !important;
}
}
> img,
> a > img,
> .ce-element--type-image,
> a > .ce-element--type-image {
height: auto;
}
Hope this helps, let me know if it's something else.
from contenttools.
Unfortunately it didn't help me ...
In edit mode - <div class = "align-right ce-element ce-element - type-image" ...
In view mode - <img class = "align-right" ...
If this helps, here is a link to a repository with JS and CSS code
https://github.com/vovainua1992/freedom
from contenttools.
@vovainua1992 the ce-...
classes should only be present in edit mode. The SCSS above should mean the same styles are applied to all images with or without the classes applied. If this isn't the case can you check in the browser console and make sure the relevant CSS is being applied to image elements? Will take a look at your CSS now to see if I can spot anything obvious.
from contenttools.
OK looking at your CSS as your not applying the formatted class I mentioned you need to modify it like so:
img,
a > img,
.ce-element--type-image,
a > .ce-element--type-image,
iframe,
.ce-element--type-video {
display: block;
margin: 32px auto 24px;
max-width: 100%;
}
.align-left > *,
.align-left + * {
margin-top: 0 !important;
}
.align-right > *,
.align-right + * {
margin-top: 0 !important;
}
img,
a > img,
.ce-element--type-image,
a > .ce-element--type-image {
height: auto;
}
Keep in mind this isn't ideal as the CSS will apply globally and not just the content within the editable area. At some point you probably want to consider a class to scope the CSS.
from contenttools.
Related Issues (20)
- Save issue - saves fine, but won't allow a second "save" HOT 5
- Making CT compatible with CSP style-src set to 'self'
- Can't edit files that were included or read by php HOT 17
- Edit multiple paragraphs at once. HOT 2
- Is there a way to change the default tag output for normal html tags HOT 2
- Missing translation in /src/scripts/ui/dialogs/table.coffee
- Build files to use dynamic import in pure javascript HOT 1
- How to use assign ? HOT 2
- Hot to keep style attributes on save.
- Support for Sass >= 1.33 HOT 11
- npm install failed HOT 2
- Feature: Support drag & drop of images
- The image uploader HOT 2
- Inspector bar doesn't show embedded HTML elements when wrapped with paragraph HOT 1
- Line breaks not saving
- Add class to a link
- Lazy loading of images
- Source code edit? Insert <script> tag HOT 3
- The part in italics is not the right one HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from contenttools.