The project I'm working on has a standard that HTML5 code must also be well formed XML. This requirement is built into automated tests. This means empty elements like img, link, br, hr, ... must have a /> closing delimiter - not just a >.
For example:
1) good: <img src="foo.png" alt="stuff" />
2) bad: <img src="foo.png" alt="stuff">
I'm using Intellij IDEA 2018.2. I have Emmet enabled. To create an img element I type img followed by a TAB. Emmet expands this to <img src="" alt=""> but that's not well formed XML. I want it to automatically self-close resulting in <img src="" alt="" />. I've also tried CTRL+SPACE auto-complete with the same result.
Question: How do I get Intellij IDEA to automatically self close HTML5 empty elements?
This is a simple question and I've done internet searches and looked at Intellij Settings and documentation but still haven't found an answer. Maybe I'm just missing it ...
In HTML5 tags like <br> or <img> do not require a "/ " for closing them like <br/> (http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element,
http://www.w3.org/TR/html5/syntax.html#void-elements).
However, you can easily change current behavior in Settings | Editor | Live Template | Zen Html | br/img by modifying the templates accordingly:
Related
When I write img.logo the output is
<img src="" alt="" class="logo">
But I want to swap the position of the "class" attribute so it comes first:
<img class="logo" src="" alt="" >
How can I do this?
Please, help. I searched for the information but could not find.
I'm afraid that's not possible (for img.logo expansion).
Current behaviour matches the actual Emmet. Try it yourself at https://docs.emmet.io/actions/expand-abbreviation/
It was asked before (earlier this year) and JetBrains declined such a request with no plans of implementing such a customization: https://youtrack.jetbrains.com/issue/WEB-55938
P.S. If it's just img expansion or another standard abbreviation (e.g. img:s, img:sizes, img:z etc) then you could change the underlying Live Template that is actually used for such predefined abbreviations (at Settings/Preferences | Editor | Live Templates --> Zen HTML node). But it is not possible for dynamic expansion (with class names/ids etc).
I'm writing a wiki page on GitHub, and I'm using Markdown.
My problem is that I'm putting a large image (this image is in its own repository) and I need resize it.
I have tried different solutions, but they do not work:
![image](http://url.to/image.png "Title" {width=40px height=400px})
[[http://url.to/image.png = 250x]]
Is there a way to get it?
It is preferable without HTML.
Updated:
Markdown syntax for images (external/internal):
HTML code for sizing images (internal/external):
<img src="https://github.com/favicon.ico" width="48">
Example:
Old Answer:
This should work:
[[ http://url.to/image.png | height = 100px ]]
Source: https://guides.github.com/features/mastering-markdown/
On GitHub, you can use HTML directly instead of Markdown:
<img src="http://url.to/image.png" align="left" height="48" width="48" >
This should make it.
Resize by Percentage width=50% height=50%. Example:
<img src="https://i.imgur.com/ZWnhY9T.png" width=50% height=50%>
Resize by Pixels width="150" height="280". Example:
<img src="https://i.imgur.com/ZWnhY9T.png" width="150" height="280">
Some tips
To get a githubusercontent link for an image, drag and drop the image into any issue, and copy/paste the url from the code that is automatically generated. Example code: 
There is no way to change the size of an image if the markdown format is of the form []() - so stop looking right now! - you must use <img> instead
Another useful summary of conventions that do and don't work here
All of the above is from here
Almost 5 years after only the direct HTML formatting works for images on GitHub and other markdown options still prevent images from loading when specifying some custom sizes even with the wrong dimensions.
I prefer to specify the desired width and get the height calculated automatically, for example,
<img src="https://github.com/your_image.png" alt="Your image title" width="250"/>
I have used methods described above. Now I am using the method which is a way similiar but more simple to me.
First create add README.md file to your project.
Then upload screenshoots or whatever description images needed to your project main directory.
After uploading image Assets use html to refer these assets directly without using link like below
Like this:
<img src="icon.jpg" width="324" height="324">
<p align="center">
<img src="screen1.png" width="256" height="455">
<img src="screen2.png" width="256" height="455">
<img src="screen3.png" width="256" height="455">
</p>
On above example I have used paragraph to align images side by side. If you are going to use single image just use the code as below
<img src="icon.jpg" width="324" height="324">
Have a nice day!
GitHub Pages now uses kramdown as its markdown engine so you can use the following syntax:
Here is an inline {:height="36px" width="36px"}.
http://kramdown.gettalong.org/syntax.html#images
I haven't tested it on GitHub wiki though.
You can tried to put the image into table of markdown, like this:
|  |  |
| --------------------------------------- | --------------------------------------- |
|  | |
it will make the image layout like grid, but it could not custom for each single image size.
This addresses the different question, how to get images in gist (as opposed to github) markdown in the first place ?
In December 2015, it seems that only links to files on
github.com or cloud.githubusercontent.com or the like work.
Steps that worked for me in a gist:
Make a gist, say Mygist.md (and optionally more files)
Go to the "Write Comment" box at the end
Click "Attach files ... by selecting them"; select your local image file
GitHub echos a long long string where it put the image, e.g.
Cut-paste that by hand into your Mygist.md.
But: GitHub people may change this behavior tomorrow, without documenting it.
My html anchor tags work in chrome and IE but in Firefox, Safari, iPad and iPhone they do not work, how come? and what can I do to fix it?
Underpinning
Any help would be appreciated.
Thanks.
This is what I am trying to link it to on the services page:
<h1 id="#underpinning" name="underpinning">Underpinning</h1>
This is where I left off:
This is my link:
<li><h2 id="underpinning">Underpinning<a href="services#underpinning"><img class="alignnone size-full wp-image-127" alt="home" src="http://powellgroupconstruction.com/wp-content/uploads/2013/12/home.jpg" width="500" height="337"></h2></a></li>
This is where on my services page I want the link to goto:
<a name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a>
If I goto the url directly: http://powellgroupconstruction.com/services/#underpinning into safari or firefox, it works.
There are several issues in your code.
On your example website you're using HTML5 Doctype, so I'm just answering respectively with HTML5 in mind:
Forget about name attribute in general and <a name> markup as link target in particular. As the HTML5 Candidate Recommendation spec states: "An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS." That means, you can use any id as a link target.
As Itay Gal has already stated in his answer, don't use the same id more than once. From the HTML5 spec again: "The id attribute specifies its element's unique identifier (ID)".That said, change your current code: <a id="underpinning" name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a> to <h1 id="underpinning">Underpinning</h1>
You're using as link address currently /services#underpinning. As you're going with the WordPress rewrite functionality, entering http://powellgroupconstruction.com/services gets redirected to http://powellgroupconstruction.com/services/.Therefore you should better put a slash at the end of your pages' names, so the link address should be Underpinning
You are using the same id in multiple elements. The id needs to be unique, make sure you use each id only once and it should work.
Are href for both h2 and img tags are same? then have you tried this one:
<a href="services#underpinning">
<h2 id="underpinning">Underpinning
<a href="services#underpinning"><img class="alignnone size-full wp-image-127" alt="home" src="http://powellgroupconstruction.com/wp-content/uploads/2013/12/home.jpg" width="500" height="337">
</a></h2>
</a>
I had an issue very similar to this. I believe your problem is that Firefox and Safari do not like an <h2> tag inside an anchor <a> tag. Try :
<span id="underpinning">Underpinning</span>
The CKEditor 4.3 demo show an example of widget for work with HTML5 figure tag.
As a user (editing the demo text) I can not edit a second figcaption (one before image, as "figure title", and other after image, as caption): when edit (by CKEditor's source code) before, it goes after, when I add a paragraph (p tag) before image, also goes after. So, there are no way to user express distinct "head-caption" and "foot-caption", always CKeditor put after image.
There are some configuration to enable "head-captions"?
The edited source code:
<figure class="caption" style="float:right">
<figcaption>HEAD - Test</figcaption>
<img alt="Apollo-CSM-LM"
src="http://b.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>FOOT - Apollo CMS-LM spacecraft</figcaption>
</figure>
So, CKEditor transforms into,
<figure class="caption" style="float:right">
<img alt="Apollo-CSM-LM"
src="http://b.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>HEAD - Test</figcaption>
<figcaption>FOOT - Apollo CMS-LM spacecraft</figcaption>
</figure>
Idem with <p>HEAD - Test</p>. If I use only the <figcaption>HEAD - Test</figcaption>, it also goes after image (impossible to express a "before img caption").
NOTE-1: "head" and "foot" figcaptions are both valid in HTML5, as showed in this fiddle.
NOTE-2: another problem is a caption with more than one paragraph. CKEditor transforms it in a BR, that is not what author need in a typical journal.
NOTE-3: for this related needs — use of paragraphs, use of "before image" caption, and use of two captions —, see all needs of a typical journal at an stable standard like JATS fig element, or millions of article examples at PMC.
Short answer - no, there is no config option for that.
Some details - you're using the image widget, which is supposed to handle figure.caption>img+figcaption case. Specific widget may not work with every possible input and it happens in this case.
If you want to remove that limitation there are two ways:
Don't use the image widget by disabling it or remove class="caption" from your HTML. For example this HTML will not be changed:
<figure>
<figcaption>1</figcaption>
<img src="..." ...>
<figcaption>2</figcaption>
</figure>
Also, the enter key will work in a standard way inside figcaptions (will create <p> tags).
The other way, if you want to use the image widget, is to modify its behaviour. In case of simple widgets it can be done without touching widget code, inn the widgetDefinition event listener. However, image widget is pretty complex, so you'd have to change its code.
To change enter key behaviour, just change the widgetDefinition.editables.caption.allowedContent - it has to contain a p tag. This part can be done in widgetDefinition listener.
In order to be able to use two captions, you'd have to add another nested editable and modify the plugin code, because it handles only img+figcaption case.
I encountered this page https://www.google.com/accounts/ServiceLogin, a Google service login page that (beyond just omitting a doctype), contains 6 instances of </img>
For example,
<img src="https://www.google.com/accounts/google_transparent.gif"
alt="Google">
</img>
Why would they ever do that? What benefit/functionality/grandfathering do they possibly achieve?
Anything I've ever read about HTML and XHTML has made it pretty unequovical:
In HTML 4.01 and prior, <img> tags are never to be closed ( <img src="img.gif" alt="text" >).
In XHTML, <img> tags are to be closed using self-closing syntax ( <img src='img.gif' alt="text" />)
In HTML5, (my understanding is that) either syntax (open or self-closed) is acceptable, but still never </img>.
I'd say this is a bug. In at least one case it seems to be just producing totally invalid code:
<img class=logo
src='https://www.google.com/intl/en/images/logos/accounts_logo.gif'
alt="Google" />
</img>
You can see the img tag is self closing and being closed by a separate closing tag. Clearly unintended. And its inconsistent which is a little weird too. I'd suggest e-mailing them and asking. :)
I've found the only (proposed) way this code is ever actually compliant, though it does not apply in Google's case (since they lack a DOCTYPE).
XHTML 2, which was proposed and then scrapped, implements a </img> tag as a way to replace the alt attribute.
So, instead of this in XHTML 1.0/1.1:
<img src="monkeys.gif" alt="Monkeys throwing feces" />
You'd have this
<img src="monkeys.gif">Monkeys throwing feces</img>
Where 'Monkeys throwing feces' only displays if monkeys.gif fails to load.
This would make <img> behave as other content embedding tags, like <object>.
In the spec's words,
The img element is a holder for
embedding attributes such as src.
Since these attributes may be applied
to any element, the img element is not
strictly necessary, but is included to
ease the transition to XHTML2. Like
the object element, this element's
content is only presented if the
referenced resource is unavailable.
Maybe their HTML-generator closes every <tag> with a corresponding </tag>, which is just a programmatically lazier alternative to writing <tag/> for such single tags.