Voog has built in methods for images and videos to solve mobile issues like fluid scaling of content and serving smaller image sizes based on device screen size.
Images are now based on the new picture tag specification. Voog automatically generates smaller sizes of user uploaded images and the picture tag make sure that only suitable size images are served to the viewers of the page using smaller screens and mobile devices. From coding point of view - you should add the{% sitejs_include %}
tag in every layout and Voog will polyfill older browsers to support the modern picture tag syntax..edy-texteditor-container.
This not only allows the objects to downscale automatically, while preserving aspect ratio if wrapping content gets smaller than the media, but also gives user the ability to crop all content to desired aspect ratio..edy-texteditor-container
element should be targeted with these styles:.edy-texteditor-container {
border: 10px solid black;
margin: 10px;
}
Also for your convenience in styling, classes describing the positioning of media are added to the container..edy-texteditor-container-wrapper
. Position defining classes are as follows: .edy-texteditor-container-wrapper, .edy-texteditor-container {
margin-bottom: 1em;
}
.edy-texteditor-container-wrapper .edy-texteditor-container {
margin-bottom: 0;
}
.edy-texteditor-container-wrapper-left, .edy-texteditor-container-left {
margin-right: 1em;
}
.edy-texteditor-container-wrapper-right, .edy-texteditor-container-right {
margin-left: 1em;
}
.edy-image-container-with-title:after {
display: block;
padding: 5px 0;
font-size: 0.9em;
content: attr(data-title);
}