Author Options:

Picture format (png) and sizing Answered

Just done an instruction, my pictures are PNG format, some have a transparent background.

They look OK in the editor, but when published, what should be a transparent background is black.

Is this an issue of the site?

Do I have to remake the pictures in an other format?

While on the subject of pictures, I would prefer some to be shown smaller than they are shown.

Is it possible to set the size of pictures in an instruction?

I have searched for this info, the results about PNG where 8 years old and gave the impression it was being fixed.



19 days ago

Transparency is not really required for pics here.
No bckground means it has to be filled with something and I guess the default for this is nothing, or black.
JPG is the standard, BMP often for very small images.

The only way to change the location and size of an image you use is to use HTML when writing the Ible.
Then you can place the image in the text where you need it and also define the prview size yourself.
AFAIK there is no plans to make this process any easier or simpler anytime soon :(


Reply 19 days ago

Is GIF ok?

Um HTML is OK you say, I will give it a try. (I'll experiment with a test inst.)
Is there an documents on the useable HTML?


Reply 18 days ago

I tried a few times to post the code I use for images, videos and such but if correct then even here the editor just sucks it in instead of presenting the code as is.
Considering how many projects here deal with code, like Arduino it is almost neglegent not to have a simple option to insert code so it remains unchanged and plain.
Could take a screenshot of the example in a text editor if that would help you....


Reply 17 days ago

A screenshot would be nice.
I started a draft, to experiment with.
I tried some script, and it placed pictures as instructed in the editor,
but the full preview shows nothing.

I have changed my pictures that have transparent background to GIF's.
Those that looked distorted, I have added transparent padding to the picture. (made them squarer)


Reply 17 days ago

Scrollbox: <textarea style="width: 600px; height: 300px;" rows="20" readonly="readonly" name="code" cols="75">All code is a single line.
Image from your library:
<img src="https://www.instructables.com/files/deriv/FX4/WTHC/J0IEIV3J/FX4WTHCJ0IEIV3J.LARGE.jpg" width="450">

Inserting a custom link:
<a href="http://www.buildtak.com/" rel="nofollow">BuildTak official website</a>

Embedding a Youtube video - just replace the "F_pyiT7XA58" with what is for your own video, leave the rest of the link here unchanged:
<iframe allowfullscreen="" src="//www.youtube.com/embed/F_pyiT7XA58" frameborder="0" height="281" width="500"></iframe></p>

Embedding animations from Sketchfab and similar websites:
<iframe width="640" height="480" src="https://sketchfab.com/models/6e14b8875a834e489a4a7c0ed0ae79ef/embed" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>

Scrollbox for adding code in your Ible:
Scrollbox: <textarea style="width: 600px; height: 300px;" rows="20" readonly="readonly" name="code" cols="75">Enter Code Here</textarea></textarea>


Reply 17 days ago

Well, did not work as good as planned but better than a pic.
Above you have some example in HTML that work to get images, videos and such into your Ible.
If inserted after some text the things will appear after that text as well.
If you have more text further down than it will be there as well.
So you can write some text, insert what you like and keep writing until you feel the need for a new step.
Hope that helps.
And if you can then just use normal JPG images ;)


Reply 16 days ago

Thanks for your help.
I will experiment an other time.
I had a draft inst. I was playing with, I got a mail asking if I wanted help with it, replied what I was doing, now it's gone.