A client asked me to look into a problem he is having on his WP site.
When adding an external image into a post, with an original size of 800x640.
You can resize the image via the Wordpress wysiwyg editor to, say 400x320.
the html part will look something like this when inspecing the element with firebug on front end or in the text tab of the editor:
<img class="" src="http://xxx.nl/images/externalimage.jpg" alt="" width="400" height="320" />
But on the front end the image is shown at its original 800x640 size.
When inspecting the element with firebug it shows:
img {
height: auto;
max-width: 100%;
vertical-align: top;
width: auto;
}
If I disable the 'width' line in firebug
The image resizes to 400x320.
How can I resolve this issue, so that the client can just do his thing with the images in the editor.
I can solve it myself on a individual case basis by adding a width to the containing span/p tag, but the client doesn't know css or html and I can't manually edit all the widths of the containing tags every time he posts something new.
The images will always be inside the 'post' wrap container, which has its own class. But apart from auto, I only set it to 'inherit' but this yields the same result as auto. (I guess it will inherit -> auto from the img {})
I don't know what I'm doing wrong here, seems quite an easy question.
Related
I have a really strange problem, may be i don't understand or not able to see something obvious, but in my opinion really strange things happen.
I have a list of elements, each of them has a child tag which has static 80px width set inside its css class. Sometimes, random of those images are loaded like this (screenshot):
https://res.cloudinary.com/leninsdo/image/upload/v1562003304/Screenshot_2_thnczb.png
They have a width 35px and some margin instead of having 80px width as they expected to be and as most of them are in most cases. And this is really random, happens from time to time, cannot even debug this in any way.
But what is more intresting to me, when I click "Select an element in the page to inspect it" in the chrome inspector:
https://res.cloudinary.com/leninsdo/image/upload/v1562003333/Screenshot_3_sk0zrz.png
All images immediately resize to normal 80px as they expected to be:
https://res.cloudinary.com/leninsdo/image/upload/v1562003588/Screenshot_4_wp5d7m.png
Why this can happen?
UPDATE
The code exact excerpt from source code, which you asked for:
<div className="doc-attachment">
<img src={attach.imageSrc} />
<div>
<div>{attach.name}</div>
<div>{"Дата загрузки: " + getFormattedDate(attach.date)}</div>
</div>
</div>
css:
.doc-attachment img {
height: 100%;
width: 80px;
margin-right: 20px;
}
I have a bunch of server-side generated images with the following HTML tags:
<img width="75" height="75" src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1">
The problem is that the images show the default "blank document" (or "missing image") icon and a border while they are loading. It looks like this:
After images are loaded, the icon of course disappears, and the broder gets set to the one I specified in my CSS.
I don't want to create fancy preloaders and what not, but I would like to make this "blank document" icon and the default border to go away. Although the user sees it for a less than a second, still that's not good because it creates an impression that something is wrong with my images.
How do I make that icon not to show up while images are being loaded?
One idea was to set background for images, but I cannot do that because images have transparent areas, and then some parts of the background will be visible after the image has been loaded.
UPDATE WITH A WORKAROUND
I noticed that if I do not specify width and height, the default missing icon and border is not shown while the image is loading. As a workaround I did the following:
<div class="imgholder"><img src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1"></div>
and style the image holder as follows:
.imgholder {
border: 2px solid #ddd;
margin: 2px;
padding: 2px;
width: 75px; /* fixed dimensions - should match image sizes to avoid cropping */
height: 75px;
overflow: hidden; /* never show scrollbar */
float: left;
}
Still, it would be great to have some way to style the loading image itself and get rid of that image holder <div>.
Does the broken icon show on every browser? Either way, have you tried this jquery plugin: Imagesloaded ? It may help in your case.
You can use alternate text property.
One question how you are loading images? Loading using async calls or loading these images while page loads?
$("img").on({load:function(){},
error:function(){
$(this).attr("src","blank.png")
});
I'm create a custom wysiwyg editor, with custom variables which are filled in from PHP after the content is saved.
For example {image} is a placeholder, which will be filled from PHP after the content saved.
In this case my content template in the HTML code looks like this
<img src="{image}" />
As this is some kind of drag and drop system, I should be able to drag this item on the wysiwyg canvas, but as that {image} placeholder can't be filled with javascript, the browser won't be able to load any image. As I know in this some old Internet explorer versions give some default "image broken" image into those img's, but modern browsers simply doesn't display it.
So is there any way to make those unloaded images visible(by giving some width and height value and some magic)?
I would like to make this with simple CSS rules without using javascript.
One solution what I have found is to give alt attribute to the images and then that text gives with and height for that element.
You should use onerror.. so the image will fail to load, but you can then display a 'holding image' to show the end-user that it will be replaced with their real image when published..
<img src="{image}" onerror="this.src='http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg';" width="100" height="100" />
Change the URL to yours.. so something like
<img src="{image}" onerror="this.src='/images/temp_image.jpg';" width="100" height="100 />
Example: http://jsfiddle.net/7FtfX/
Setting the width and height attributes directly on the img element to some modest placeholder size is probably the way to go. You can also do it CSS, i.e:
.wsyiwyg img {
width: 100px;
height: 100px;
background-color: #787878;
margin: 5px;
}
Another idea which might be better is to use JS to check on all img elements and parse the src attribute, then replace any with the {image} format with a placeholder image src (but save the original data and switch it back on save/submit).
Use width, height properties and background. Look at sample
I use this wonderful tool, tinyMCE, for editing pages at my website.
But i have a problem with the resizing of images.
Is it possible to change the way tinyMCE changes the size of the image?
Now the software changes the width and height inside the ..
<img src="..." width="..." height="..." />
But this setting gets overridden by the CSS.
(I have some general img settings in the CSS, width, height:auto, and centering on page.)
If the users define a size for the image, i want this new size to override the general css.
But with the img parameter width & height. this is notpossible. CSS override their value.
So.
I want tinyMCE to change the size of the image by CSS. Is this possible?
ex:
<img src="..." style="width:...;height...;" />
(The size is set by draging the corner of an image to the size you want.. and not edited in html html code.)
Thanks for reading.
Matte
I bypassed this by adding a plugin in the project that handles the re-size event.
Just going to post it here in case someone ever needs it.
tinymce.PluginManager.add('imageresizing', function(editor, url) {
editor.on('ObjectResizeStart', function(e) {
if (e.target.nodeName == 'IMG') {
var selectedImage = tinymce.activeEditor.selection.getNode();
tinymce.activeEditor.dom.setStyle(selectedImage,'width', e.width);
tinymce.activeEditor.dom.setStyle(selectedImage,'height', e.height);
selectedImage.removeAttribute('width');
selectedImage.removeAttribute('height');
}
});
});
Of course you need to add the plugin to tinyMCE which is beyond the scope of this question, but it's not hard at all.
To solve the problem of getting the default image insert size to fit the container, i used
content_style: 'img {max-width: 100%;}'
Inside the tinymce.init({
It doesn't appear to be currently possible to easily change the way TinyMCE adds width and height tags to the img element. There is a feature request open to add this functionality Stop Prepopulating Image Dimensions.
$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("height", "150");
$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("width", "200");
Here "#ctl00_ContentPlaceHolder_RichTextBox_ifr" is id of textarea..
With this you can resize the image .. .. ..Sarath#f1
I am having trouble getting ckeditor to properly resize images in my Rails application. When I look at the html in it appears that the height and width parameters are not showing up. When I leave the text unsanitized in rails the height and width parameters appear as below, which is obviously is using a colon in lieu of "=" followed by a number in " ".
<img alt="" src="/ckeditor_assets/pictures/1/content_world.png" style="float: left; width: 100px; height: 100px; " />
Does anyone have any clue how this can be adjusted somewhere in the config.js or somewhere else that will cause these parameters to result in proper html?
Thanks for any help!
The default configuration of CKEditor sets the image size in the style (yes, I don't like either, let's not argue about it).
You can look at the "Output HTML" sample to get the code to generate width and height attributes instead.