I can paste/drag&drop images into a jupyter notebook markdown cell.
They will appear as follows:
The image is displayed correctly (but to large).
I am however unable to scale them. I tried varius solutions from this question: Changing image size in Markdown
Unfortunately they all won't work for me. After pressing shift+Enter the cell just displays the entered text and the image is gone. What am I doing wrong?
As of today the accepted answer no longer works, the "proper" way of doing it is:
<div>
<img src="attachment:image.png" width="400">
</div>
But even this variant is not ideal as it doesn't export image when saving as to html. Votes here are welcome: https://github.com/jupyter/nbconvert/issues/1057
Problem solved in this anwser:
https://stackoverflow.com/a/49150804/5105118
<img src="attachment:image.png" width="400">
EDIT
to be more precise I will add a step-by-step
Copy your image (not the URL/path but i.e open in Paint and select region to copy, then press Ctrl+C)
go to notebook cell in math mode and paste image with Ctrl+V
something similar as the following should appear in your cell: 
edit this line to match <img src="attachment:image.png" width="400px"> or apparently in newer jupyter versions (>4.4.0) surround them with <div> tags as noted in the answer from Antony Hatchkins: https://stackoverflow.com/a/58511216/5105118
somehow the pasted image is linked to the text "attachment:image.png" thus this part should not be touched while editing
In a markup cell copy an image, you then get something like this:
Then you may remove this line and copy this into the cell:
<div>
<img src="attachment:afbeelding.png" width="300">
</div>
Then the image is scaled. The essence is that you first have to copy a real image into the markup cell. Depending on language, you always get the same text, but the image as soon as you execute the cell. Then replacing the text with the HTML text does the trick.
Nothing happens until you copied a real image into the cell, which given
Related
I am trying to load a widget (through HTML code) into my Jupyter Notebook's cell. I am trying out ways to get rid of the block shown on left side which shows "click to scroll output;double click to hide" in the below picture:
It's obtrusive. And also is there a way i can make the frame of the slide (highlighted in blue) larger (for only the current cell) so that it's clearer for view ?
I tried changing the "height" and "width" of RISE extension from "Nbextensions" tab but in vain.
This might sound ridiculous but, have you tried to remove this block using your browser's element inspector?
Example (remove code input)
Slide before deleting code input
Selecting correct div
Deleting input div
Slide after deleting code input
Of course it's just a temporarily solution and as soon as you refresh/reload your notebook it will be back as before.
I need to be able to arrange a list of images (4 in my case) to a row and the link text to appear below like so:
row1
image1 image2 image3 image4
linkText1 linkText2 linkText3 linkText4
row2
image5 image6....
linkText5 linkText6.....
and so for however many images are. Here whether you click on the image or on its linkText, its supposed to open a document in a new window.
Here's the html that I intend, but doesn't work the way I want. It just puts one image per row. I have tried various combinations nothing seems to work. Although if I use just the img element and use the ng-repeat on it, the images flow the way I want, 4 to a row, but that doesn't serve my purpose as I want the link text as well below each image.
<div ng-repeat="items in DocImageCollection ">
<div ng-repeat="row in items">
<img alt="{{row.linkText}}"
ng-click="$event.preventDefault();openDocument({{row}});" ng-src="{{row.imageSrc}}" imageonload />
<br />
<span ng-click="$event.preventDefault();openDocument({{row}});">
{{row.linkText}}</span>
</div>
</div>
Here
imageonload is a directive which I have created for downloading the
image source,
DocImageCollection - is the main collection; for e.g. if I have 10 images in
all, then this will be an object array of capacity = 3, where each array
element (row) is itself an array of 4 image objects
I have all the data correct, I just have issue in the templating. Any help is
greatly appreciated.
The div tag is a block level element so it'll appear on it's own line unless you change the CSS display attribute to inline-block. Specifically, you need to target the display attribute for the div that contains the img and link.
Here's an example on codepen:
http://codepen.io/gwmccull/pen/LpYLLp
you can use an indexing method with your ng-repeat.
Check this
Adapted from here
ps. Not necessarily you will use the ng-if, this only serves you in case you want to only show multiples of 4
I found this piece of code on stackoverflow that would allow me to place a small image over a larger image (in my case a small lock to indicate the movie is unavailable)
<div style="position:relative;display:inline;">
<img src="_images/test.jpg" width="350" />
<div style="position:absolute;bottom:10px;right:10px;">
<img src="_images/lock.png" width="40">
</div>
</div><h3>Air</h3>
it all displays perfectly, but there is a split second where the AIR tag at the bottom displays first (and sometimes the lock image), before it all snaps into place properly. (The main image, the lock in the bottom corner of the image, then the h3 tagged Air at the bottom.)
Does anyone know the cause of this, and how one might fix it?
Thanks
One alternative is to place the src content in a data uri scheme. This will cause the images to load with the content. When you set src to a uri resource, the browser has to go out and get it. This causes the delay you see.
http://en.wikipedia.org/wiki/Data_URI_scheme
Ok I have a bit of an annoying problem. I am implementing a "more pictures" section at the bottom of a article view using expression engines grid system (version 2.7.3)here's my code
{story_images}
<a class="blok-img" href="{story_images:image}" data-lightbox="{story_images:desc}">
{exp:ce_img:single src="{story_image}" width="86" height="86" crop="yes" max="86" attributes='alt="{story_images:desc}" title="{story_images:desc}"'}
</a>
{/story_images}
This is cropping all my images as expected and the light box is working as expected, however the images that are being cropped are always the same image.
So, the cropped images (for arguement sake are called ONE, TWO, THREE)
ONE - looks as expected cropped at 86px, loads main image on click
TWO - the cropped image is the same as image ONE but loads it's original image on click
THREE - the cropped image is the same as image ONE but loads it's original image on click
I can only assume that CE Image is over riding the original variable but to be honest I'm at a bit of a loss, any help would be appreciated.
You have a small error with your syntax for the grid field, it's just missing the prefixed variable in CE Image's tag, it should be:
{story_images}
<a class="blok-img" href="{story_images:image}" data-lightbox="{story_images:desc}">
{exp:ce_img:single src="{story_images:image}" width="86" height="86" crop="yes" max="86" attributes='alt="{story_images:desc}" title="{story_images:desc}"'}
</a>
{/story_images}
User manual: http://ellislab.com/expressionengine/user-guide/modules/channel/grid.html
I've got my div tags set to insert line breaks "Before opening, within, and after closing" but I'm not getting the line break after the content.
I'm getting this:
<div>
content</div>
But I want this:
<div>
content
</div>
Again, I have the correct selection made in the options. It even shows the correct way in the preview box. If I change the selection to no line breaks, it formats correctly.
Is this an issue for anyone else?
Note, this is in aspx/c pages.
The reason it doesn't separate the closing div element is because adding a space there would potentially change the whitespace semantics of the rendering. Have a look at the last comment made by scott gutherie : http://weblogs.asp.net/scottgu/archive/2006/07/07/Tip_2F00_Trick_3A00_-Custom-formatting-HTML-in-Visual-Web-Developer-and-Visual-Studio-2005.aspx