[How to] Testing inline image attachments

[IanB]

I couldn't figure out how to do this, so I am experimenting here to maybe give an example of how to do it.

For instance, there should be an inline image displayed here:



And this text should follow the image.

[xrunner]

Right click the thumb and copy the link, then do this -

Code: [Select]

[img]https://www.eevblog.com/forum/news/(how-to)-testing-inline-image-attachments/?action=dlattach;attach=1355732;image[/img]


[IanB]

Right click the thumb and copy the link, then do this -

I understand that's the workaround, but you have to do it in two steps.

I'm trying to figure out the apparent "correct" way based on the attachment dialog?

[xrunner]

Right click the thumb and copy the link, then do this -

I understand that's the workaround, but you have to do it in two steps.

I'm trying to figure out the apparent "correct" way based on the attachment dialog?

Yea but the problem is I don't think it works anymore, or at least not reliably. 

[IanB]

Yea but the problem is I don't think it works anymore, or at least not reliably. 

Apparently not. The attached help information does not seem to work as described?

[DrG]

edit: That I think that the attachment  you included is no longer applicable. There was a thread about this as I recall. Basically, you can't get it to work as it once did - there was a reason that it had to be disabled as I think it was causing other problems. The only way to do it now has already been stated in this thread.

[IanB]

I don't recall that thread, but if so, I think the attachment options should be removed, as it is confusing the way things are.

Also, I notice this article, that seems to suggest a better, or more supported, way to do it?

https://custom.simplemachines.org/index.php?mod=3770

[xrunner]

I don't recall that thread, but if so, I think the attachment options should be removed, as it is confusing the way things are.

Also, I notice this article, that seems to suggest a better, or more supported, way to do it?

https://custom.simplemachines.org/index.php?mod=3770

Won't happen. I have asked before if we could have the function repaired and I got shot down in flames. It's too dangerous to try to fix or remove, I was told.

[DrG]

https://www.eevblog.com/forum/chat/attention-eevblog-admins-attachments-mixup/

That is the thread I recall, but there have been several.

The two-step solution does work.

[PlainName]

Right click the thumb and copy the link, then do this -

Code: [Select]

[img]https://www.eevblog.com/forum/news/(how-to)-testing-inline-image-attachments/?action=dlattach;attach=1355732;image[/img]


But doing that places the full-size image in the text. Which negates the usefulness, in size (which means loading times) and space, of the BTL thumbnail.

Please don't encourage people to create massive pages of just hi-res images

[Smokey]

Step by step (tedious 2+ stage process) to get inline images, and resize so they don't show up as huge in the post:

1) Write your post.   Wherever you want your inline images to be in the body of your post, click the "Insert Image" button.  That button is the far left option with the little mona-lisa icon, right below the BOLD icon.  This will add the image tags

Code: [Select]

[img][/img]   This is a placeholder for the next step and won't actually do anything yet.  Leave the tags empty.

2) Attach your images to your post using the "Attachments and other options" button at the bottom.  It doesn't matter what drop down option you pick, so probably just leave it as "End-of-post expandable thumbnail".  (Yes I know most of those options say Inline, but it doesn't work).

3) Post your post.  The images should be thumbnails at the bottom, with nothing inline yet. 

4) Edit your post .  Use the "Modify message" button on the right side of the post, with the little paper and pencil icon.

5) Copy Links.  For each of the thumbnail images at the bottom of the post, click them to expand them to full size.  Then right click and select "Copy Image Address".  Now go back into your post and paste the address into the image tags you added previously.  It will look something like this

Code: [Select]

[img]https://www.eevblog.com/forum/section/post/?action=dlattach;attach=1850335;image[/img]   You could click the "save" button and be done, but your inline images will be full size and potentially huge and obnoxious.  So be a good forum citizen and do the next step too:

6) Resize the images to fit the post:  For each image tag, manually set a width option.  Just change

Code: [Select]

[img] to

Code: [Select]

[img width=xxx] with xxx being the image width your want.  200 to 400 is usually a good size, but you may need to edit, save and check to see what it looks like.  Repeat until your images are a good size.

So the full example would be:

Code: [Select]

[img width=200]https://www.eevblog.com/forum/section/post/?action=dlattach;attach=1850335;image[/img]
Note:
As pointed out below, using the "width" modifier on the image tag still downloads the full size image when someone loads your post.  It's just resized in the browser.  So if you want to be a stellar forum citizen and get 5 gold stars for effort, you can resize your images first before you upload them to save bandwidth.

[abeyer]

But doing the

Code: [Select]

width= on an image tag doesn't actually load smaller pictures... you're still creating a page full of large images that have to load, and just scaling them down in the browser after. If you look at the source of the above image it's clearly still loading the full sized version of the image.

[Smokey]

But doing the

Code: [Select]

width= on an image tag doesn't actually load smaller pictures... you're still creating a page full of large images that have to load, and just scaling them down in the browser after. If you look at the source of the above image it's clearly still loading the full sized version of the image.

Is this something anyone really cares about in the age of 5G and broadband?  Maybe we should talk about 4K media streaming bandwidth before we worry about the internet breaking because of full size forum images....

[Ian.M]

Dave cares - he's paying for all the hosting and bandwidth.
Many users with slower or metered connections care.
Not everyone lives in a 1st world city with good connectivity . . .

If you don't reduce your image resolution and filesize to make it web friendly, you are showing that either you don't care, (and so why should anyone care to help you?) or that you aren't competent to do so, in which case don't expect anything above beginner level answers.

*PLEASE* only inline large images if you need to refer to them in detail in your post e.g. carefully cropped parts of large schematics you are discussing, and also be careful not to quote posts with large inlined images indiscriminately - always consider whether you can strip the image!

[IanB]

I always resize and compress images before I upload them.

I have found the best free tool for this job is Microsoft Office Picture Manager. I install it on all my computers.

Details on how to install it here:

https://support.microsoft.com/en-au/office/where-is-picture-manager-58837c3e-34db-4904-95e8-4eca7b7c5730

[BradC]

I always resize and compress images before I upload them.

Me too. Just drop them in a directory and run this :

Code: [Select]

#!/bin/sh
mkdir Scaled
DEST=Scaled
for i in *.jpg *.JPG ; do
convert $i -resize x800 $DEST/$i
done;


[Smokey]

Dave cares - he's paying for all the hosting and bandwidth.
Many users with slower or metered connections care.
Not everyone lives in a 1st world city with good connectivity . . .

If you don't reduce your image resolution and filesize to make it web friendly, you are showing that either you don't care, (and so why should anyone care to help you?) or that you aren't competent to do so, in which case don't expect anything above beginner level answers.

*PLEASE* only inline large images if you need to refer to them in detail in your post e.g. carefully cropped parts of large schematics you are discussing, and also be careful not to quote posts with large inlined images indiscriminately - always consider whether you can strip the image!

Show me where the "you only get your question answered if you resize your images per Ian.M's liking" rule is?
Threatening to shun people who don't know how to navigate the broken parts of the forum is sort of messed up. 

If any of this was on the radar of the forum operators they would probably actually just fix the broken image handling.  As far as I know, this stuff has never worked right. 

[Ian.M]

There's no such rule, because it should be common sense.  Why should anyone expect to get more out of a community than they are willing to put into it?  Show you don't value the time, effort and resources of others, and see how little help you get from those that care about such things!

Of course you'll get replies from those that don't care, but you've just self-selected for an audience with less experience and knowledge than you originally had available to you.  It may not even be conscious on the part of those that care, e.g. because its tedious to participate in a thread with large page load times (due to multiple large inline images) if you have a slow connection, they are less likely to reply, even if they have significant insight into your question.

Beginners initially get a free pass - they aren't particularly invested here, don't know the culture and it would be nekulturny in the extreme to drive them off by nitpicking their posting style.  OTOH answers they receive are likely to be targeted at their apparent level of understanding so may be less than complete.

[RoGeorge]

Same here, resize and compress before uploading, so those with low speed internet won't see too slow webpages.

Since the camera always names pics as PICTnnnn.JPG, I've added these few lines inside the ~/.bashrc file, to wrap the convert Linux tool into a new bash command webify nnnn[ nnnn].  That can be used from the command line while being in the pics directory.  It does this:

convert PICTnnnn.JPG -strip -matte -resize 1024 -quality 50% -sampling-factor "2x2, 1x1, 1x1" PICTnnnn_s.jpg'

for a batch of one or more pics:

Code: [Select]

# added webify to convert Minolta PICT to 1024 px wide and smallest possible file that still looks OK
# append this content inside the '~/.bashrc' file
# run 'source ~/.bashrc' for the new edits of the '~/.bashrc' to take effected without logout/login
function webify() {
    shrinked_no=0
   
    for var in "$@"
    do
        for f in "${var[@]}"
        do
            s_file=PICT"$f".JPG
           
            for fl in $s_file
            do               
                if [ "${fl##*.}" == "JPG" ]
                then
                    d_file=${fl%.*}_s.jpg
                   
                    if [ -f "$d_file" ]
                    then
                        echo --- skip "$fl" \(already existing "$d_file"\)
                    else
                        echo Shrink "$fl" as "$d_file"
                        convert "$fl" -strip -matte -resize 1024 -quality 50% -sampling-factor "2x2, 1x1, 1x1" "$d_file"
                        shrinked_no=($shrinked_no + 1)
                    fi
                fi         
            done
        done
    done
   
    if [ $shrinked_no -eq 0 ]
    then
        echo webify nnnn[ nnnn]
        echo '  - will shrink file PICTnnnn.JPG as PICTnnnn_s.jpg'
        echo '  - must specify only the nnnn part of the PICTnnnn.JPG'
        echo '  - intended to be used for Minolta DiMage Z1 files named PICTnnnn.JPG'
        echo '  - can take a list of arguments that might include globs/wildcards'
        echo '  - will not overwrite already existing *_s.jpg files'
        echo '  - the webify function is defined inside the ~/.bashrc file'
        echo '  - convert PICTnnnn.JPG -strip -matte -resize 1024 -quality 50% -sampling-factor "2x2, 1x1, 1x1" PICTnnnn_s.jpg'
    fi
}


[Smokey]

Same here, resize and compress before uploading, so those with low speed internet won't see too slow webpages.

Since the camera always names pics as PICTnnnn.JPG, I've added these few lines inside the ~/.bashrc file, to wrap the convert Linux tool into a new bash command webify nnnn[ nnnn].  That can be used from the command line while being in the pics directory.  It does this:

convert PICTnnnn.JPG -strip -matte -resize 1024 -quality 50% -sampling-factor "2x2, 1x1, 1x1" PICTnnnn_s.jpg'

Ok.  You guys are talking about many megapixel digital camera pictures.  In that case, ya, probably should reduce that.  But I'm not sure who's posting full size digital camera pictures besides the "post a picture of my cat" people.  Forum admins set the max image file size.  What is it set to?

I would bet the majority of images on the forum are screenshots of datasheets and schematics and pictures of stuff people grabbed from some other place on the internet that are already small.  I just checked and a full monitor screenshot using windows snip saves to a 192KB jpg file.

[IanB]

Ok.  You guys are talking about many megapixel digital camera pictures.

Like a phone camera?

I would bet the majority of images on the forum are screenshots of datasheets and schematics and pictures of stuff people grabbed from some other place on the internet that are already small.  I just checked and a full monitor screenshot using windows snip saves to a 192KB file.

What about people who post pictures of items in the workshop or circuit boards or other such things?

[RoGeorge]

About screenshots, those have a property might worth mention:  big areas of the same color, which means they are more compressible.  For screenshots, PNG format would be preferable to JPG format (in terms of file size) while keeping the same quality as the original.

PNG compression is lossless.  JPG compression is lossy but hard to notice in a normal photo, though easily noticeable in a printscreen with sharp edges like windows and text.

Also, a pic with high level of details would be less compressible, and thus will need bigger files.  For example, the same area of a blank screen will end in a much smaller printscreen file than, say, the same area filled with a fine print text.

[magic]

Somewhere in 2021±1 or so the forum got a plugin which automatically recompresses all uploaded images (that's also the point when animated GIFs stopped working).

All your careful compression is in vain. The uploaded image will end up compressed to a pre-set quality level, sometimes even larger than your version.

As a bonus, the attachment's file size is still reported as you uploaded it, but the file served by the forum is different

[RoGeorge]

It's compression and resizing, so I think it does make a difference, but it's funny you say that, because you are on of those low speed interneters complaining when a pic is MB size, and for whom I am preparing smaller files. 

[magic]

Resizing and choice of format makes a difference in file size. Compression before uploading doesn't.

With JPGs you may as well upload at the original quality to minimize generation loss.
If you want to preserve a JPG loslessly (maybe because it already is overcompressed to begin with) you have to put it in a ZIP or convert to PNG.

[PlainName]

But doing the

Code: [Select]

width= on an image tag doesn't actually load smaller pictures... you're still creating a page full of large images that have to load, and just scaling them down in the browser after. If you look at the source of the above image it's clearly still loading the full sized version of the image.

Is this something anyone really cares about in the age of 5G and broadband?

Yes. I've previously posted that a page full of these kinds of images is very difficult to read because, when you get in at the end to see new posts, the arriving images cause the page to adjust and move everything else down. So the bit you're reading suddenly drops below the line as a big image arrives, you scroll down and then the page moves as another arrives, etc. There are threads that I would otherwise follow that I don't bother with because of this.

Doesn't matter if you have 1TBit magicnet your end if it's going around half the world to get there at snail pace.

[AndyBeez]

1993 :  128K bytes is a huge amount of memory

2023 :  128K is barely one percent of an Instagram post.

Compressing Images for upload and emailing is just good Neticate. Wow that's a word from the good old dial-up days. Just showing my age. Again.

[PlainName]

I don't care how much memory an image takes - that's a behind-the-scenes thing of no relevance. What I do care about is how long I have to wait for it to appear, and whether it is in-your-face because the posted thinks it must dominate my view, or is illustrative and enlargeable if I wish to see it better.

As noted above, plonking the full thing in the text fails both of those. Specifying some 'sensible' size also fails since you don't know the size of my browser window. Just use the thumbnail and if I need to see it better I can click on it, otherwise it's nicely out of the way and not detracting from the text.

There are exceptions, but most inline images don't qualify.

[EPAIII]

You don't need to upload and add anything to any Windows computer to EASILY change the size of an image. Just open it in Microsoft Paint, which is included in every version of Windows in the past 15 or 20 years, and use the Resize command. You can change the size in pixels or just as a percentage. I use it all the time to change images to 800 pixels wide before uploading them to this or other BBs. But I can see reason to use a larger width for images where resolution counts, such as photos of PCBs or very complicated schematics. Some images can be even smaller than 800 pixels wide and still convey their meaning.

Edit: I rather doubt that any addition to the BB software is going to increase the size of an image as I upload it. I see smaller images on this BB all the time. They obviously were not increased in size. So, out of politeness, I will continue to resize my images before uploading them. I do understand the bandwidth problems for some here and I hope that helps.

You can also use Paint to trim off any unimportant parts, like extra white space - or blue or red or whatever color.

Paint.net, which is a free download, is good for "Photoshop" type corrections when they are needed. Things like the color balance or bringing details out of shadows with the curve corrections.

I always resize and compress images before I upload them.

I have found the best free tool for this job is Microsoft Office Picture Manager. I install it on all my computers.

Details on how to install it here:

https://support.microsoft.com/en-au/office/where-is-picture-manager-58837c3e-34db-4904-95e8-4eca7b7c5730

[EPAIII]

After spending literally hours trying to get images to appear in the text of my posts (I will try to limit that as much as possible in deference to those with speed and bandwidth problems) and discovering on my own most of what is described here, I finally found this thread.

I would like to suggest to the powers to be that a link to this thread be placed where it can be seen when I and OTHERS are trying to upload photos. To me, THAT would be very helpful. It would have saved me actual HOURS of trial and error.

I will try to call attention to this.

[gnif]

After spending literally hours trying to get images to appear in the text of my posts (I will try to limit that as much as possible in deference to those with speed and bandwidth problems) and discovering on my own most of what is described here, I finally found this thread.

I would like to suggest to the powers to be that a link to this thread be placed where it can be seen when I and OTHERS are trying to upload photos. To me, THAT would be very helpful. It would have saved me actual HOURS of trial and error.

I will try to call attention to this.

The intent is to fix this problem however it took a back burner due to other more pressing issues. I will try to give it some attention in the next week or two depending on my availability.

[gnif]

This has been fixed, inline images are working again finally.

[Smokey]

So what's the official process now?  Does the inline tag actually work when you upload an image or do you need to do something else to get it to show up?



Note:  Selecting "inline expandable thumbnail" put the [ attach=1] tag in and the image showed up there.  Interesting.

Question.. is it possible to resize that inline thumbnail or is it just what it is?

[gnif]

There is no "official process", the broken feature has just been fixed. Obviously you figured it out with your test test image

Question.. is it possible to resize that inline thumbnail or is it just what it is?

It is what it is, allowing people to adjust this would create a huge amount of thumbnail files on the server and could be abused.

[IanB]

This has been fixed, inline images are working again finally.

Ah, that's cool. The first post of this thread is now displayed correctly! 

[magic]

OMG, it really does, even my old posts are rendering as intended now

[PlainName]

This has been fixed, inline images are working again finally.

(Attachment Link)

Kind of. If one clicks the thumbnail the original image opens in a new page. The previous version of this expanded the thumbnail in place, which was a bit more user friendly. Still, it's better than people posting the full 4K res PNG as a pretend thumbnail

Edit: and quoted attachments don't work -the image in the above quote is shown as a link, but clicking the link just hangs until timeout.

Edit2: Thumbnails below the line expand normally. It's just the inline thumbnails that open a new page.

[IanB]

For me, I find it useful to include moderately sized and scaled images inline with the text, like the one below, rather than thumbnails. Then there is no need to click each thumbnail in order to view it.

[PlainName]

But that defeats the point of having the thumbnail in the first place. 'Moderately sized' is dependant on many things that you don't know about, and may be small for some or huge for others. Thumbnails resolves that.

[JoeRoy]

Let me check it.



Inline full-size image, let's see.

* doesn't work on "Preview"

* but it's working on this post, not too bad

[Smokey]

...
Inline full-size image, let's see.
...

Ya, but if you can't resize the inline image.. that sucks...
Sticking the hack... https://www.eevblog.com/forum/news/(how-to)-testing-inline-image-attachments/msg5021542/#msg5021542

[IanB]

Ya, but if you can't resize the inline image.. that sucks...

You can adjust the display size of the inline image like this:

Code: [Select]

[attachimg=1 width=400]

[Smokey]

Ya, but if you can't resize the inline image.. that sucks...

You can adjust the display size of the inline image like this:

Code: [Select]

[attachimg=1 width=400]

Does that actually work?





Update:
HA!  that does work.  Ianb is my new personal hero.  Problem solved. 
Thanks gnif!

[Smokey]

There is some funny business going on with the inline image in this post:

https://www.eevblog.com/forum/chat/what-did-you-buy-today-post-your-latest-purchase!/msg5106000/#msg5106000

Note:  links to that thread get broken because of the "!"

[hatte]

Now we just need to publish the [ Attachment Invalid Or Does Not Exist ] as part of the "static" help text (or in a link that opens in a new tab) when authoring/modifying a post, so posters/commenters know how to use the feature. I guess that is not a trivial task to hack into this antiquated forum software.

[Michael Craft]

Am testing inline images:

ABC

https://www.flickr.com/photos/194366829@N05/53292554836/in/dateposted/

https://live.staticflickr.com/65535/53292554836_0c111799c5.jpg



DEF

[PlainName]

Just use the forum facilities instead of reinventing another mousetrap.

A bonus is the image will still show when your cheap image sharing website bites the dust through lack of income/users/competence.

[Hawaka]

test

[RoGeorge]

Beware that 'Inline expandable thumbnail' when clicked it will open maximized in a new tab, which is very annoying.

[xlzslayer]

testing images, don't mind me.

sorry for spamming images dave-

wtf that was weird, and dumb, some images dont work properly with end-of-post expandable thumbnail
had to convert it to png instead of saving it as png (from webp)