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.
Related
I have a page that contains CSS that hides a div class
.sectiondiv.showhide {
display: none;
}
But when loading the same page within a fancybox iframe I'd like to have that same content to be visible. I've tried the following CSS in the jquery.fancybox.css but that doesn't help. Any suggestions for this fix?
Why don`t you simply check if page is inside fancyBox iframe and just add custom CSS if needed? You can create links like 'mypage.html?fancyboxed=true' to make checking easier.
Another solution would be to use aferLoad callback to access iframe contents and do some modifications.
This is how you can access some element within iframe:
$.fancybox.getInstance().current.$content.find('iframe').contents().find('body')
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.
I've noticed that most of the websites now "somehow" disable viewing some of the images used in their template, so I'd like to obtain this same result:
I thought instead of using the tag <a>with <img>, I put a div and set the "background" property as an image yet it's still viewable in the browser!!
Any ideas?
This is not disabling the images, this is done by using images as backgrounds in CSS and not as a normal img tag like:<img src="your-image.jpg" />. Here's an example how this is done:
HTML
<div class="randomClass"></div>
And the CSS goes like this:
.randomClass {
background-image: url('http://i.ytimg.com/vi/1WmaBpkGjXk/mqdefault.jpg');
background-color: #cccccc;
width:350px;
height: 180px;
}
On the Jsfiddle link I provided above if you right click on the 1st image you have the option to open the image on a new page or the option to download it. On the second one you don't have this options by right clicking on it, but still these images can be downloaded in other ways.
I have placed images on wordpress page templates without any inline style attribute but its seem wordpress automatically add style tag with width and height set to zero.
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width: 0px; height: 0px;">
Sometimes height is set to its original dimentsions and sometimes after complete refresh its values are zero.
What is causing this?
Please help me out. Thanks in advance.
Maybe it is caused by incorrect CSS. Zero values should not have dimensions, like px or pt. Like this:
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width:0; height:0;">
this is because of template CSS styles are override your image style properties ..,the easy way is to wrap your image content and give div id and put your style code in template CCS file
inside(style.css)
it works as:
.class{
width:20px !important;
height:20px !important;
}
or if you want to remove Inline CSS completely , This inline css may be in .php files or in.js files.
You can search style in whole project , it is easier to search if you are using netbeans code editor.
Hope it may resolve.
I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }