I have been trying to add a link to one of the YouTube videos in the README.md file. So, first I took a screenshot of the video at a specific timestamp, put it in the local directory, and then used the following syntax:
[![ALT TEXT] (image/screenshot path)] (https://youtu.be/video_id "video text")
But as the size of the screenshot is a little big (as big as my laptop screen), using the above syntax takes a lot of space in the output! I don't want that. I want to control the size of the screenshot/image. How can I do that?
I found different answers on adding an image with a clickable link; resize an image in readme; but I couldn't find any answer addressesing both the issues. (Sorry if such answer already exists)
Thanks a lot in advance :)
You can include raw HTML in your Markdown document, so just use standard HTML <a> and <img> tag with width and height atttributes:
<img src="path/to/img.png" width="xxx" height="yyy">
This will render correctly on github and elsewhere.
Related
I have tries all the below and the image does not seems to be appearing on my read me file. I've added the image under the issues as someone suggested but nothing. also tried numerous other methods but the image does not want to appears and on the video tutorials i'm doing line by line but nothing.
link to the isssues:
https://user-images.githubusercontent.com/89415628/185356092-4229772b-1852-4ee0-9daa-043ff87a2080.png
using the img tag with the image that are in the root folder
<img src="https://github.com/Opzalas/CMPG-323-Overview---33448809/blob/main/branching.png?raw=true">
The most used method to add image to read me file with image under the issues
image stored on the root repo with image link
** Image with the root directory**
What is funny is that it is working within stack overflow but not on github with the img tag with root directory.
Answer provided in #Benjamin W's comment; thank you, much appreciated. Please see answer below:
I took a look at your file, and the problem is that your text blocks are indented. In Markdown, that means "code block", where everything is interpreted literally. You have to un-indent them. I have created a PR to show you how.
How to add an image that is also a link to an external page on Github's README.md?
Adding a markdown to display an image is pretty simple (answer at Add images to README.md on GitHub). Adding a link is also pretty simple (GitHub relative link in Markdown file), but it seems there's is no way to add an image that is also a link to an external site.
<img src="RELATIVE_PATH_TO_IMAGE></img>
Try simply the syntax:
[](link to your URL)
That will wrap the image as a link
Some additional syntax mixing html and markdown, giving you more flexibility in adjusting how image is displayed.
Assuming you have repo structure as follows (it just refers to relative link used in syntax below):
example repo structure
you can use
[<img alt="alt_text" width="40px" src="images/image.PNG" />](https://www.google.com/)
Structure:
[](link to your URL)
Example:
[(Youtube)](https://www.youtube.com/watch?v=3HIr0imLgxM)
The people who wrote the previous answers were overcomplicating it. This works in Markdown+HTML5 and is easy to understand when looking at the source code.
The code: [<img src="img/myImage.png">](http://example.com/),
where img/myImage.png should be replaced by the relative path to your image, and http://example.com/ should be replaced by the link you want to visit when the image is clicked.
I want to show a gif in a README.md of github.
And it works fine when the target gif is small with:
<img src="targetGifUrl" width="400">
but when the gif is big, it is not showing as expected, take this gif as an example. When I add it into README.md, it just shows:
and after clicking, it shows a website with the tip
Content length exceeded
As the gif is from a third site, I can not change its size.
So, is it possible to show this big gif without saving and resizing it?
It looks like someone else had this issue before,
When I open this link in Firefox, I only get the text "Content length exceeded".
and here is the commit that fixed it.
Add gif locally
-
+<img src="/art/sample.gif?raw=true" width="200px">
Looks like all you have to do is save the gif and put it in your repository, no need to resize it, just link to the version in your repository. Notice how the width is specified and raw=true is an included parameter.
Put Gif files in the local directory on your git repo. Then call it in readme file.
For example, If you just created a folder called demo in the root directory and put demo.gif inside it. Then you can call that in your readme file like this.
Eg:
I have in my Typo3 Content text and image. And i would like to insert a animated gif. I first made it normal, than i recognized that the gif changed to .png files.
After a few test I found the parameter (FE png_to_gif), in the Install Tool.
But when I choose this. The gif files has the path fileadmin/processed but there are no gif files in this directory.
Can anybody help me that i can display my animated gifs ?
Thank you.
If the image you are processing is resized or modified by ImageMagick/GraphicsMagick, all frames of an animation will be lost. Use the orginal size in the frontend to avoid this.
Hi try select "None (ignores all other options)" under Apperance->Quality and Type
gl
Like Merec answered: the animation will be lost trough processing ...
an option is to intervene on the rendering of the fluid-template: in your own extension you overwrite the original fluid-template and find the image-viewhelper the ouputs the image:
This processes the image also when no width or height are given
<f:image image="{imageObject}" />
This without size will not (or use the variable directly)
<f:image src="{imageObject.0.originalResource.publicUrl}" />
(note that an imageobject is often an array, to find that out <f:debug>{_imageObject}</f:debug> or <f:debug>{_all}</f:debug>)
So I'm creating an app which basically is a UIWebView that loads an HTML page, which should have images on it. The HTML page is loading fine (confirmed with a little text on the page), but then I have this code in it:
<img src="images/image_1.png">
test
Check this out:
The tag has a broken image link
But, when I tap on the link, the
image loads!
How is this happening? What kind of solution is there?
I have the images in a subfolder of resources, which I added by "Create Folder References."
Help? A note: This is on iPad, using 4.2. But that shouldn't matter, right Apple? (Also, changing it to xml <img /> type tag doesn't do anything)
The image was way too big - over 2500px wide. Resizing to 1024px fixed it. Thanks Jose Vega.
Also, Automator is a gift from the Gods when it comes to batch operations.