I have a problem with Drupal7's text editor.
I put an image inside my texts (By CKEditor), and set some styles to the image (For example width or height), and save the post, when I back to edit the post, the styles gone and my image rolls back to the default width and height!
See the issue here:
To make sure that these images will actually also be rendered (when viewing the page), make sure that the "text format" used in the node does allow the img-tag. Typically for a node using the "Filtered HTML", it could well be that the img-tag is not allowed (yet) as one of the available HTML tags. In that case, your HTML code does include an 'img" tag, but when viewing the saved node the image is not rendered (visible). To resolve it, within admin you must enter the img-tag as one of the allowed HTML tags for the text format used in the node.
And if the img-tag is already allowed in the filter you're using, then it must be some other tag that is not yet allowed.
Related
I have a site with a number of written documents that are rendered as images. If I wanted to make them accessible to visually impaired people, it would seem that I would need to add the text somewhere.
Each document is rendered as a series of images, one for each page (see this, for example). Would I want to each page's text into its corresponding image's alt attribute, or is there a better way to do it? And, if the alt attribute is the way to go, can I put the entire document in the image for the first page, or is it best to have the text in each attribute correspond exactly to the image it's in?
I would not use the alt attribute as it is used for short descriptions only.
Making all this text accessible would mean rendering it in HTML. In your document, there are lists, there are tables, there are definition lists ; all this needs to be semantically described via HTML so that it is accessible. You would not be able to do this via the alt attribute.
I think of multiple ways you could make this accessible:
have empty alt on all img and render all the text in HTML below the last image. The text can be visible to all, or only to those with screen readers as you wish (via the use of specific CSS, see the "sr-only" class of Bootstrap for example). If you want the text to be visible to all without taking too much visual space, you could hide it behind a toggle button (with the aria-controls and aria-expanded attributes).
on each img, have a short alt attribute and a longdesc attribute. The alt is the title of current page, like "Table of Contents". The longdesc is a link to an HTML page having all the text on the image.
after each img, have some HTML with the text of the image. This description can be visible to screen readers users only. Link each description via the aria-describedby attribute on the image.
I'd go with the first solution, because it's generally the simplest to deal with, and it benefits all users.
Most screenreader software won’t announce an entire page’s worth of content from an alt attribute, let alone a whole document. They have different cutoff points, but alts are intended to give short (a sentence or two) descriptions of pictures rather than large quantities of paragraphs, headings, tables, etc. You can test with a free screenreader (VoiceOver for Apple devices, or NVDA for Windows) to confirm this for yourself.
A better option would be to extract the text using OCR and put it into HTML or a Word doc that uses templated styles. That way people who can’t see the text can still have it read out plus they’ll be able to use all the usual navigation shortcuts like tables of contents and headings. You can still put any charts or graphs in as images with alts, and the amount of text you’d need to describe those would be much shorter and easier to write.
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
I have a template in which I'm attempting to change the source of a picture from Image 1, to Image 2 - yet I want Image 2 to keep the original size it was uploaded to the server in. (I want it in the position of Image 1, but its own dimensions.)
To do this, I figured I needed to use the adjust parameter - which I have attempted. The description for adjust=100% is "The picture is adjusted to be proportional to the original size." - which sounded like what I needed to do.
However, in my docx output, this seems to set the image size to be 100% of page width, rather than related to image size. (In the word image properties, it shows my image to be 208%, so I don't think it's related to my file!)
Is this a bug in opentbs, or have I misunderstood the docs? If so, how should I be doing it, or otherwise, can anyone thing of a work around? I attempted not using adjust at all, however that seems to have the same behaviour as adjust=inside - which I presume is the default.
With the normal thanks for a great tool!
Edit: The Error causing tag is below. I've found the problem reproducible when starting from nothing, and with just an image in the word doc. Word 2010, OpenTBS 1.8.
[onshow.logo;ope=changepic;tagpos=after;adjust=100%]
The problems was caused by the TbsPicAdjust() function expecting the image's dimensions to be provided in points, rather than pixels, as php's getimagesize() function was returning.
It was solved by replacing the two fixed coefficients in the TbsPicGetDim_OpenXML_dml() function with 9,525, rather 12,700 as they were originally coded. (Which would be an appropriate value, if the dimensions were in points, rather than pixels.)
After some research, from what I can see, getimagesize() always returns a size in pixels rather than points, so it looks to me like this could be a potential bug?
Additional Source for coefficient, combined with personal calculations: http://openxmldeveloper.org/discussions/formats/f/15/p/396/933.aspx
Workaround:
It depends if you are using the new (.docx) or old (.doc) style of document. If you have the newer style, I don't know for sure that you can change the image size without putting the tag directly into the XML. The older (VML, I believe) style uses <v:shape> to describe a picture rather than <pic:pic>. With v:shape, you can just put together a CSS-style string that describes the size, etc. of your image. Something like:
$imgStyle = "position:absolute;left:0;top:0;width:800;height:600"
Then you just have a tag next to your changepic tag; something like:
[imgStyle;att=v:shape#style]
The newer style does not use a style string like this to size and position images, the pic:pic element is full of nested tags describing the image so it is harder to get to the details (though you could certainly try). I ended up creating a subtemplate for my image switching because my template is in the new format with compatibility for the old format (so I have to maintain two image blocks). This allows me to maintain the XML directly for the image dimensions, but still be able to edit my main template in Word. I just use a tag in my main template that includes the subtemplate like:
[LineItem.template;block=w:r;file='img.xml']
Separating the manually controlled XML out allows me to edit the main template in Word without damaging the really custom parts. Using this technique though, you may have some trouble with onload/onshow tags in the subtemplate - everything I change in the subtemplate is controlled by a block.
i want to set the width of the html tag . And also apply css on the browse button which is provided in the input type file.
I referred the following -
Is there a way to set width of for showing in Firefox?
also referred following-
Setting uniform width in all browsers
but it is for specific browser. It should work on the mozila firefox , netscape navigator, google crome,safari etc. and i don't want to hide the original input control.
how to do this?
The short answer is that you can not really style the input file, and it's like this by design.
how ever, some tricks are available for you, for example:
http://www.quirksmode.org/dom/inputfile.html
You don't. It doesn't work that way.
You can specify the size of the element, but the browser chooses itself how to use that space to display the input field and the button. You can't style the intput field and the button separately.
It's not even specified in the standard that the file input should have an input box and a button. The browser can display the control any way it sees fit, and some browsers displays it differently, for example using a button and a text label.
I am creating a page in asp.net. I am trying to show some information in tabular format when user hovers on a inout button. To do this, I am setting alt attribute to input type button because it should be javascript independent. I tried creating a table and assigning it to the alt attribute as a text.
<input type="button" value="save" alt="<table><tr><td>some info </td></tr>
<tr><td>some other info </td></tr></table>"/>
But it is not displayed as a table with two ros. Instead it is displayed as a single line.
Is there any way to show it in tabular format?
This is not possible just like this. Alt can be just plain text.
You'll have to use JavaScript. Try to google for it :)
You'll have to:
Create table.
Using CSS, set it's position to absolute, near your control and display: none
On item hover, you have to set display: block.
Best for this kind of behavior is to use some Javascript framework, IE jquery
jquery.com
specially read these:
http://api.jquery.com/hover/
http://api.jquery.com/hide/
http://api.jquery.com/show/
Agreed with Ales, Javascript would make this a breeze. YUI's Tooltip allows you to instantiate a Tooltip associated with an element, or set of elements (changing the Tooltip's context, so in case you have many similar behaviours spread across a screen).
http://developer.yahoo.com/yui/examples/container/index.html
Once you have instantiated the Tooltip, its something like Tooltip.setBody("your HTML code");, though by default Tooltip sucks in title text of an <a> tag as its content, or possibly even alt text of an element - not 100% on the alt text default part though - good chance that if it doesn't do it by default, if you grab the alt attribute contents it will display it correctly inside the Tooltip.
Others have already told you that what you've asked for isn't possible, as HTML attributes must be plain text, not more HTML.
They've also told you that there are Javascript and JQuery libraries which will help you do what you're wanting to do. There are loads of scripts you could use, here's a link to one that you might want to try: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
However, I feel I should add one further point which others have missed, and which is actually quite important:
You're using the wrong attribute.
The alt attribute is not the correct attribute to use for a hover tooltip effect. You should be using the title attribute for this.
Using alt works this way for historic reasons in some browsers (I believe it works in IE, but not much else), but it is not intended as a tooltip. The correct use of alt is for a small bit of descriptive text that will appear if the image is not loaded. This could be because the file failed to load, or the user has images turned off, or the user has a text-to-speech browser, etc, but if the image is displayed, then this text should never be displayed.
The title attribute on the other hand is intended to be displayed, and all browsers implement it as a tooltip (in fact, it's not just on <img> tags; you can use title for any element).
Hope that helps.