silverstripe / tinymce - stop automatic resize - silverstripe

Using Silverstripe CMS (v3.4) when I upload an image using the tinymce editor it automatically sets the width/height on the image. This causes problems such as breaking animated gifs so they don't play and also reduces the quality of static images.
How do I turn this feature off completely so that no resizing is done on upload?

You can modify the insert width of the images instead of them being resized to 600px wide.
mysite/_config.yml
HtmlEditorField:
insert_width:
1200
You can also override the width / height attributes on the image tag with css.
.typography img {
width: 100%;
max-width: 100%;
height: auto;
}
Its not great but its the only work around which I know.
As for animated gifs, these are always going to break if they are resized with php.

HTMLEditorField updates img tags in it's saveInto function. Inside the saveInto function is a processImage extension hook that allows us to manipulate images inserted using TinyMCE.
First we create a CustomHTMLEditorField extension with a processImage function. If the image is a gif we set the img src back to the original image path.
SilverStripe 3
class CustomHTMLEditorField extends Extension
{
public function processImage($image, $img)
{
if ($image->getExtension() == 'gif') {
$img->setAttribute('src', $image->getRelativePath());
}
}
}
Next we add the extension to HtmlEditorField in our config.yml file:
HtmlEditorField:
extensions:
- CustomHTMLEditorField

Don't add images in TinyMCE… it doesn't properly support hi-dpi images and it's really hard to control the resulting layout.
Better use something like a content-block module or just use separate image-upload fields. You could also use something like the shortcodable module to insert media such as images via custom shortcodes.

Related

In CSS, can I style an image only if it actually displays (is not showing alt text)?

I am writing some CSS to style some images on a website. Some of the styles I am applying, though they look good on the images, would be problematic if for whatever reason the image didn't load and the site displayed the alt text. For example, I mirror some of the images with transforms.
Is there some way I can target an image in my CSS only if the image is actually loaded and displaying, but not if it has fallen back to the alt text?
As an additional note, the reason I am using CSS to style the images, rather than just actually modifying the images themselves, is that I am using the same image multiple times on the page as an icon for a list, and just want to add a little variety to each instance. I'd rather not have 6 different versions of the same image on the page.
You could do something like this:
.image-not-loaded-yet {
/* your css for when the image has not yet loaded */
}
and then
<img onload="this.classList.remove('image-not-loaded-yet')" class="image-not-loaded-yet" src="path/to/image.jpg" />
or the opposite, add the class only when the image has finished loading:
.image-ready {
/* your css for when the image has fully loaded */
}
and then
<img onload="this.classList.add('image-ready')" src="path/to/image.jpg" />
If you want to apply this to all images on a page, you can add an event listener to each img like this:
document.addEventListener('DOMContentLoaded', () => {
for (const img of document.querySelectorAll('img')) {
img.addEventListener('load', () => img.classList.add('image-ready'))
}
});

Adjust Height of Map in Divi

Was hoping to increase the height of the google map module in Divi but my CSS code is not working and do not understand why. I am pasting the following code within Advanced > Custom CSS > Main Element of the Map Module
.et_pb_map {
height: 440px;
}
Any suggestions would be very useful!
Absolute Map for Divi Theme
Add the following CSS in the Row Settings/ Custom CSS/ Column "1" Main Element (column number is where you will put the map):
position:relative;
Add a Class to Map Module. In this example the CSS Class is absolute_map
Add the following CSS in the Custom CSS box:
.absolute_map .et_pb_map {
position: absolute;
overflow:visible;
height: 100%;
}
Be happy!
Try to add padding instead of an explicit increase of height.
#map ,#map .et_pb_map {padding-bottom: 56.25%}
You might have to adjust the selector. Usually #map is enough though.
and adjust the padding percentage to modify the aspect ratio. This is responsive.
The reason why this might work is because padding creates more space for the background - map in the case of this iframe - to be painted thus expanding it.
Read more on this here
Working demo on JSFiddle
If you're customizing through that section (Advanced > Custom CSS > Main Element) of the Divi Builder, just add the property declaration not the entire CSS rule.
height: 440px;
no need to add css class in the advanced > custom css. just add the property value 440px.
use !important for overnight css
.et_pb_map {
height: 440px !important;
}
Just add !important to your css
.et_pb_map {
height: 440px !important;
}
Use below code.
Please use your google API key here in this js file.
If you wanted to increased/decreased height of map then do changes in #div_gmap.
#div_gmap {
height: 440px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<div id="div_gmap"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('div_gmap'), {
center: {lat: 22.3039, lng: 70.8022},
zoom: 12
});
}
</script>
If this thing is not working well then might need to check some of the css or any other framework causing this issue.
The best way to test out why the css dimension code doesnt work is to use chrome dev tool.
Press Shift+ Ctrl + I (or cmd + alt + I if you are safari user) and open up the web dev tool bar. Go to the Elements section and you will see styles controller. In the styles controller, you click on the elements you wanna check on the DOM side, in your case, it's probably <div class="et_pb_map">...</div>, or you can press ctrl+f to search et_pb_map.
After you have done that, you can go to the box viewer in the style tab and see why it doesnt work out.
I would say sometimes if you use padding/margin and didnt set overflow property well, it will crop out your elements. Or maybe your class is being overlapped by other class. You can use embed style to override that <div class="et_pb_map" style="...">...</div>, or simply put your class as the last class in the class attributes.
Example on using chrome web dev tool bar
Go to Appearance -> Customize -> Additional CSS and paste this code
.et_pb_map iframe {height: 400px !important; }
This will help you Check this jsfiddle
This is the only solution that worked for me. Assign a class to your map module i.e. .map-height and target it like this:
.map-height .et_pb_map {
overflow:visible;
height: 500px!important;
}
The simple approach is:
Go to Divi Theme Options
Scroll down to Custom CSS
Enter .et_pb_map {height:500px;}
Click Save Changes (the map will now change to 500px height)

Redactor image upload set inline style

I am using Redactor v10.0.9 to allow users to create some custom posts for my web app. These posts are rendered in an iframe in a modal, and I need images that are uploaded to have a max-width of 100%. I have tried to maintain an outside stylesheet that I append to the iFrame that contains
img {
max-width: 100% !important; } }
But that doesn't seem to be working at all. I would like to just add style="max-width: 100%" inline style to the img tag when it's inserted, but I can't seem to find where the image is inserted into the post after an image upload.
Any ideas on how to force these images in an iFrame to be max-width: 100%? Thanks
Edit 1:
I am using the imagemanager plugin to upload images to Redactor. Forgot to mention that.
Edit 2:
The content contained in the iFrame is dynamically created HTML, not content from another domain.
Figured out how to do this!
Instead of appending any sort of style to the img tag on insertion, when I render the custom posts I am retrieving all of the images in the iFrame in JavaScript, and then applying a CSS attr of "max-width: 100%" on each one.

Sharre Social Media Plugin Style Issue

Im working on implementing this Social Medial Plugin called Sharre:
http://sharrre.com
For example 5:
http://sharrre.com/example5.html
I cant determine how to style these buttons or tracking boxes so that they will fit on my page. I would like to reduce the width and height for both.
http://jsfiddle.net/NinjaSk8ter/uhhwt/
For example, I have tried to modify the width of the .button which doesnt seem to work:
#example5{
float:left;
margin:28px 0 0 10px;
}
.sharrre .button{
float:left;
width:60px;
}
I have also seen in the docs that:
twitter: { //http://twitter.com/about/resources/tweetbutton
url: '', //if you need to personalize url button
Does this imply that I would need to modify the size of the Image?
The plugin utilizes <iframe> elements and background-image to display the icons. You won't be able to modify them without cutting off part of the images. If you need to change the size of the icon, I would recommend resizing it via your favorite graphics program, uploading it to your server, and calling it via the custom parameter url that you mentioned.

Set default image style in CKEditor

I'm using CKEditor with CKFinder in a custom CMS. Users upload and insert photos in articles and that works almost beautifully. The downside is that the default image style is margin/padding:0px, so the images appear crowded when left or right aligned.
Is there a way to set up a default image style in CKEditor, so that when a user inserts an image (whether through CKFinder or entering direct HTML/Source), a padding:10px attribute is added as a style?
You can set the styles within the editor here
CKEditor 3.x Styles
Personally, I use the contentsCss configuration option to provide a stylesheet reference, like so:
CKEDITOR.editorConfig = function(config) {
config.contentsCss = ['styles.css'];
};
And inside styles.css you could do:
img { margin: 10px; }
or whatever you want to do for images.

Resources