I lined up multiple direct image links in my notepad. I'd like to convert them all into img src codes all at once without having to paste each link between the quotation marks. For example:
Direct image links:
-https://bbbbb.org/e/x1.jpg
-https://bbbbb.org/e/x2.jpg
-https://bbbbb.org/e/x3.jpg
img src codes:
<img src=" https://bbbbb.org/e/x1.jpg ">
<img src=" https://bbbbb.org/e/x2.jpg ">
<img src=" https://bbbbb.org/e/x3.jpg ">
It's really time consuming to do this with each link, especially when you have around 500-1000 images.
I'm looking for a method or a tool to save that time for me, by simply pasting all the links I have then converting them into codes.
the tool already exists in imgur, it generates multiple 'a herf' links by choosing the images I already uploaded in my account, only now I already have the direct links. I'm just looking for a way to convert them to the code and paste the HTML code in my blog directly. I'm doing this because blogger compresses my image size, this code prevents that.
Instead of Notepad, use a more sophisticated code editor in order to use multi-select. I like VS Code. There are multiple ways to activate this: https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor
My favorite is by holding down the roller button on the mouse and then dragging down where you want the cursor to be on each line. Then you can edit each line at once.
I made a gif for you:
Related
I'm trying to put an image in my online curriculum from a website of my country.
The problem is, when I insert the following code:
<img src="//imageexemple.com/image.png">
The curriculum website, automatically, change my code to:
<img src="http://curriculumonline.com/imageexemple.com/image.png">
In other words, they are adding to my code the http://curriculumonline.com/text to prevent we import images out of their server.
I would like to know if there is any other way to try to insert the image from external website. I already tried "background-image: url" but doesnt work because they also remove the / when you use "background-image: url".
Use the full image source path, like
<img src="http://imageexemple.com/image.png">
Instead of
<img src="//imageexemple.com/image.png">
I want to edit the HTML code of my Wordpress page. Exactly, I want to create a page, not posts, in my Wordpress page, where I want expose my CV and insert my photo which will changes when I pass the mouse above of it.
I tried to search something about this and i found this. In this reference, the writer speaks about the code modification, but isn't my particular case.
When I try to edit the code in the Wordpress page, I can't use some codes. For example: <a>, <div> ...
I want to use something like this:
<div class="authorimage">
<a href="https://www.codesyntax.com/eu/bloga/author/lfernandez">
<img class="mainimage" src="https://www.codesyntax.com/lfernandez.jpg" alt="Luistxo Fernandez" title="Luistxo Fernandez">
<img class="hoverimage" src="https://www.codesyntax.com/lfernandezhover.jpg" alt="Luistxo Fernandez" title="Luistxo Fernandez">
</a>
</div>
But in the published page the following appears:
<img class="mainimage" src="https://www.codesyntax.com/lfernandez.jpg" alt="Luistxo Fernandez" title="Luistxo Fernandez">
<img class="hoverimage" src="https://www.codesyntax.com/lfernandezhover.jpg" alt="Luistxo Fernandez" title="Luistxo Fernandez">
I need use this code for my purpose. what can i do to fix this problem?
Thanks for all.
Please refer below link, this should work,
http://www.inmotionhosting.com/support/edu/wordpress/wordpress-introduction/adding-html-wordpress
Log into your WordPress dashboard and create a new page. On that new page you can insert your CV and photo and then publish it.
Use the "text" mode in the text editor (instead of "visual mode") when you use the text editor to create a new page. There you can write HTML code.
Or, in "visual mode", just use select the part of the text on which you want to put the link and clock on the link symbol (the chain icon) above the text editor.
I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />
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.
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.