ruthenium wrote: danny_j1971 wroteruthenium wroteInteresting... I am going to try posting the same image at 40% of the original sizeThat is till displaying at 100% width.
A couple of posts back I posted your image's url set to 60% width. Click the quote button on that post to see the code I used.
Use the width and not not max-width style, as you used above, abd change the 60% to 40%.
As a side issue, I see you image's url actually downloads the image instead of displaying the full-size version in a new browser window.
Scott's image url, also from flickr like yours, displays the image in a new browser window. I don't know why your link doesn't.Thank you, this helped.
I don't know why clicking on my image would not open it in a new window and downloads the image instead.
I looked at the syntax in Scott's post and mine looks exactly the same - strange.
Quote Danny's post with my image, that's where the code you want is.
RoamingScott wrote: ruthenium wrotedanny_j1971 wroteruthenium wroteInteresting... I am going to try posting the same image at 40% of the original sizeThat is till displaying at 100% width.
A couple of posts back I posted your image's url set to 60% width. Click the quote button on that post to see the code I used.
Use the width and not not max-width style, as you used above, abd change the 60% to 40%.
As a side issue, I see you image's url actually downloads the image instead of displaying the full-size version in a new browser window.
Scott's image url, also from flickr like yours, displays the image in a new browser window. I don't know why your link doesn't.Thank you, this helped.
I don't know why clicking on my image would not open it in a new window and downloads the image instead.
I looked at the syntax in Scott's post and mine looks exactly the same - strange.Quote Danny's post with my image, that's where the code you want is.
Thank you. I double-checked the syntax - it is exactly the same as in my post.
danny_j1971 wrote: ruthenium wroteInteresting... I am going to try posting the same image at 40% of the original sizeThat is till displaying at 100% width.
A couple of posts back I posted your image's url set to 60% width. Click the quote button on that post to see the code I used.
Use the width and not max-width style, as you used above, and change the 60% to 40%.
As a side issue, I see you image's url actually downloads the image instead of displaying the full-size version in a new browser window.
Scott's image url, also from flickr like yours, displays the image in a new browser window. I don't know why your link doesn't.
Is there a way to make image height to fit a screen, rather than scaling the width, something like style="fit-height;"? The objective is to make any image appear without overflowing vertically. This can be done by scaling the width with style="width:32%;" but the percentage of optimal scaling is not immediately obvious to me when posting images of different formats, e.g. cropped.
I tried to find all possible attributes to style and couldn't find any such reference/glossary.
Thank you to everyone who responded. I'll have to read through and see what might work for me. Looks like this threat got really technical and my brain isn't computing well enough without more coffee.
ruthenium wrote: danny_j1971 wroteruthenium wroteInteresting... I am going to try posting the same image at 40% of the original sizeThat is till displaying at 100% width.
A couple of posts back I posted your image's url set to 60% width. Click the quote button on that post to see the code I used.
Use the width and not max-width style, as you used above, and change the 60% to 40%.
As a side issue, I see you image's url actually downloads the image instead of displaying the full-size version in a new browser window.
Scott's image url, also from flickr like yours, displays the image in a new browser window. I don't know why your link doesn't.Is there a way to make image height to fit a screen, rather than scaling the width, something like style="fit-height;"? The objective is to make any image appear without overflowing vertically. This can be done by scaling the width with style="width:32%;" but the percentage of optimal scaling is not immediately obvious to me when posting images of different formats, e.g. cropped.
I tried to find all possible attributes to style and couldn't find any such reference/glossary.
A good resource for html, css, javascript and many other types of code relating to website development is
Styles "object-fit:contain" and "width:auto;max-height:100%" are ways to fit images so that they fill their parent html container element 100% vertically while maintaining their aspect ratio. How the images will then display depends on how the images' parent elements heights have been set in the css.
I have no idea how the heights of the parent html elements of embedded images in posts are set here on FM and I certainly don't have access to the css here.
Out of curiosity I had a quick play with the above two options using one of my earlier posts and they do not work; the images overflow vertically with the above two options.
Unfortunately the post editor here on FM does not have a preview button to see how any css styling will look but if your images are all roughly the same size in pixel dimensions you can usually find within a couple of trials the appropriate % width to set for an image to not have it overflow vertically on your screen.
danny_j1971 wrote: ruthenium wrotedanny_j1971 wroteruthenium wroteInteresting... I am going to try posting the same image at 40% of the original sizeThat is till displaying at 100% width.
A couple of posts back I posted your image's url set to 60% width. Click the quote button on that post to see the code I used.
Use the width and not max-width style, as you used above, and change the 60% to 40%.
As a side issue, I see you image's url actually downloads the image instead of displaying the full-size version in a new browser window.
Scott's image url, also from flickr like yours, displays the image in a new browser window. I don't know why your link doesn't.Is there a way to make image height to fit a screen, rather than scaling the width, something like style="fit-height;"? The objective is to make any image appear without overflowing vertically. This can be done by scaling the width with style="width:32%;" but the percentage of optimal scaling is not immediately obvious to me when posting images of different formats, e.g. cropped.
I tried to find all possible attributes to style and couldn't find any such reference/glossary.A good resource for html, css, javascript and many other types of code relating to website development is
Styles "object-fit:contain" and "width:auto;max-height:100%" are ways to fit images so that they fill their parent html container element 100% vertically while maintaining their aspect ratio. How the images will then display depends on how the images' parent elements heights have been set in the css.
I have no idea how the heights of the parent html elements of embedded images in posts are set here on FM and I certainly don't have access to the css here.
Out of curiosity I had a quick play with the above two options using one of my earlier posts and they do not work; the images overflow vertically with the above two options.
Unfortunately the post editor here on FM does not have a preview button to see how any css styling will look but if your images are all roughly the same size in pixel dimensions you can usually find within a couple of trials the appropriate % width to set for an image to not have it overflow vertically on your screen.
Thank you! Yes, I tried Styles "object-fit:contain" and "width:auto;max-height:100%" - these have no effect on image size. Width:75% seems to be a reasonable choice for 3x2 images.
[url] doesn't work for me - when added this results in image download, I don't know why.
ruthenium wrote: danny_j1971 wroteruthenium wrotedanny_j1971 wroteruthenium wroteInteresting... I am going to try posting the same image at 40% of the original sizeThat is till displaying at 100% width.
A couple of posts back I posted your image's url set to 60% width. Click the quote button on that post to see the code I used.
Use the width and not max-width style, as you used above, and change the 60% to 40%.
As a side issue, I see you image's url actually downloads the image instead of displaying the full-size version in a new browser window.
Scott's image url, also from flickr like yours, displays the image in a new browser window. I don't know why your link doesn't.Is there a way to make image height to fit a screen, rather than scaling the width, something like style="fit-height;"? The objective is to make any image appear without overflowing vertically. This can be done by scaling the width with style="width:32%;" but the percentage of optimal scaling is not immediately obvious to me when posting images of different formats, e.g. cropped.
I tried to find all possible attributes to style and couldn't find any such reference/glossary.A good resource for html, css, javascript and many other types of code relating to website development is
Styles "object-fit:contain" and "width:auto;max-height:100%" are ways to fit images so that they fill their parent html container element 100% vertically while maintaining their aspect ratio. How the images will then display depends on how the images' parent elements heights have been set in the css.
I have no idea how the heights of the parent html elements of embedded images in posts are set here on FM and I certainly don't have access to the css here.
Out of curiosity I had a quick play with the above two options using one of my earlier posts and they do not work; the images overflow vertically with the above two options.
Unfortunately the post editor here on FM does not have a preview button to see how any css styling will look but if your images are all roughly the same size in pixel dimensions you can usually find within a couple of trials the appropriate % width to set for an image to not have it overflow vertically on your screen.Thank you! Yes, I tried Styles "object-fit:contain" and "width:auto;max-height:100%" - these have no effect on image size. Width:75% seems to be a reasonable choice for 3x2 images.
[url] doesn't work for me - when added this results in image download, I don't know why.
The only thing I can think of is that it might be related to the way Flickr create their links to images.
On the page you got your link from, try right-clicking the image and selecting 'Open image in new tab' in your browser.
If that works, copy the image's url you see in the new tab and use that url for the url in your post's bbcode for the image's url. That is what I do for my images hosted on imgbb.
danny_j1971 wrote: ruthenium wrotedanny_j1971 wroteruthenium wrotedanny_j1971 wroteruthenium wroteInteresting... I am going to try posting the same image at 40% of the original sizeThat is till displaying at 100% width.
A couple of posts back I posted your image's url set to 60% width. Click the quote button on that post to see the code I used.
Use the width and not max-width style, as you used above, and change the 60% to 40%.
As a side issue, I see you image's url actually downloads the image instead of displaying the full-size version in a new browser window.
Scott's image url, also from flickr like yours, displays the image in a new browser window. I don't know why your link doesn't.Is there a way to make image height to fit a screen, rather than scaling the width, something like style="fit-height;"? The objective is to make any image appear without overflowing vertically. This can be done by scaling the width with style="width:32%;" but the percentage of optimal scaling is not immediately obvious to me when posting images of different formats, e.g. cropped.
I tried to find all possible attributes to style and couldn't find any such reference/glossary.A good resource for html, css, javascript and many other types of code relating to website development is
Styles "object-fit:contain" and "width:auto;max-height:100%" are ways to fit images so that they fill their parent html container element 100% vertically while maintaining their aspect ratio. How the images will then display depends on how the images' parent elements heights have been set in the css.
I have no idea how the heights of the parent html elements of embedded images in posts are set here on FM and I certainly don't have access to the css here.
Out of curiosity I had a quick play with the above two options using one of my earlier posts and they do not work; the images overflow vertically with the above two options.
Unfortunately the post editor here on FM does not have a preview button to see how any css styling will look but if your images are all roughly the same size in pixel dimensions you can usually find within a couple of trials the appropriate % width to set for an image to not have it overflow vertically on your screen.Thank you! Yes, I tried Styles "object-fit:contain" and "width:auto;max-height:100%" - these have no effect on image size. Width:75% seems to be a reasonable choice for 3x2 images.
[url] doesn't work for me - when added this results in image download, I don't know why.The only thing I can think of is that it might be related to the way Flickr create their links to images.
On the page you got your link from, try right-clicking the image and selecting 'Open image in new tab' in your browser.
If that works, copy the image's url you see in the new tab and use that url for the url in your post's bbcode for the image's url. That is what I do for my images hosted on imgbb.
You are correct on the problem originating from Flickr (or rather being due to my incorrect way of generating the link there).
Instead of clicking on the down-pointing arrow (Download this photo), one should click on the right-pointing arrow (Share Photo). This opens a new window where one of the options is BBCode (isn't this easy!). This BBCode, when copied and pasted (with the added style="width:75%;") generates the desired product: the scaled down by 75% image which is clickable. There is a caveat, however: clicking opens a new browser tab and takes the viewer to the Flickr page where the image resides. Here is the example:
ruthenium wrote: danny_j1971 wroteruthenium wrotedanny_j1971 wroteruthenium wrotedanny_j1971 wroteThat is till displaying at 100% width.
A couple of posts back I posted your image's url set to 60% width. Click the quote button on that post to see the code I used.
Use the width and not max-width style, as you used above, and change the 60% to 40%.
As a side issue, I see you image's url actually downloads the image instead of displaying the full-size version in a new browser window.
Scott's image url, also from flickr like yours, displays the image in a new browser window. I don't know why your link doesn't.Is there a way to make image height to fit a screen, rather than scaling the width, something like style="fit-height;"? The objective is to make any image appear without overflowing vertically. This can be done by scaling the width with style="width:32%;" but the percentage of optimal scaling is not immediately obvious to me when posting images of different formats, e.g. cropped.
I tried to find all possible attributes to style and couldn't find any such reference/glossary.A good resource for html, css, javascript and many other types of code relating to website development is
Styles "object-fit:contain" and "width:auto;max-height:100%" are ways to fit images so that they fill their parent html container element 100% vertically while maintaining their aspect ratio. How the images will then display depends on how the images' parent elements heights have been set in the css.
I have no idea how the heights of the parent html elements of embedded images in posts are set here on FM and I certainly don't have access to the css here.
Out of curiosity I had a quick play with the above two options using one of my earlier posts and they do not work; the images overflow vertically with the above two options.
Unfortunately the post editor here on FM does not have a preview button to see how any css styling will look but if your images are all roughly the same size in pixel dimensions you can usually find within a couple of trials the appropriate % width to set for an image to not have it overflow vertically on your screen.Thank you! Yes, I tried Styles "object-fit:contain" and "width:auto;max-height:100%" - these have no effect on image size. Width:75% seems to be a reasonable choice for 3x2 images.
[url] doesn't work for me - when added this results in image download, I don't know why.The only thing I can think of is that it might be related to the way Flickr create their links to images.
On the page you got your link from, try right-clicking the image and selecting 'Open image in new tab' in your browser.
If that works, copy the image's url you see in the new tab and use that url for the url in your post's bbcode for the image's url. That is what I do for my images hosted on imgbb.You are correct on the problem originating from Flickr (or rather being due to my incorrect way of generating the link there).
Instead of clicking on the down-pointing arrow (Download this photo), one should click on the right-pointing arrow (Share Photo). This opens a new window where one of the options is BBCode (isn't this easy!). This BBCode, when copied and pasted (with the added style="width:75%;") generates the desired product: the scaled down by 75% image which is clickable. There is a caveat, however: clicking opens a new browser tab and takes the viewer to the Flickr page where the image resides. Here is the example:
danny_j1971 wrote: ruthenium wrotedanny_j1971 wroteruthenium wrotedanny_j1971 wroteruthenium wroteIs there a way to make image height to fit a screen, rather than scaling the width, something like style="fit-height;"? The objective is to make any image appear without overflowing vertically. This can be done by scaling the width with style="width:32%;" but the percentage of optimal scaling is not immediately obvious to me when posting images of different formats, e.g. cropped.
I tried to find all possible attributes to style and couldn't find any such reference/glossary.A good resource for html, css, javascript and many other types of code relating to website development is
Styles "object-fit:contain" and "width:auto;max-height:100%" are ways to fit images so that they fill their parent html container element 100% vertically while maintaining their aspect ratio. How the images will then display depends on how the images' parent elements heights have been set in the css.
I have no idea how the heights of the parent html elements of embedded images in posts are set here on FM and I certainly don't have access to the css here.
Out of curiosity I had a quick play with the above two options using one of my earlier posts and they do not work; the images overflow vertically with the above two options.
Unfortunately the post editor here on FM does not have a preview button to see how any css styling will look but if your images are all roughly the same size in pixel dimensions you can usually find within a couple of trials the appropriate % width to set for an image to not have it overflow vertically on your screen.Thank you! Yes, I tried Styles "object-fit:contain" and "width:auto;max-height:100%" - these have no effect on image size. Width:75% seems to be a reasonable choice for 3x2 images.
[url] doesn't work for me - when added this results in image download, I don't know why.The only thing I can think of is that it might be related to the way Flickr create their links to images.
On the page you got your link from, try right-clicking the image and selecting 'Open image in new tab' in your browser.
If that works, copy the image's url you see in the new tab and use that url for the url in your post's bbcode for the image's url. That is what I do for my images hosted on imgbb.You are correct on the problem originating from Flickr (or rather being due to my incorrect way of generating the link there).
Instead of clicking on the down-pointing arrow (Download this photo), one should click on the right-pointing arrow (Share Photo). This opens a new window where one of the options is BBCode (isn't this easy!). This BBCode, when copied and pasted (with the added style="width:75%;") generates the desired product: the scaled down by 75% image which is clickable. There is a caveat, however: clicking opens a new browser tab and takes the viewer to the Flickr page where the image resides. Here is the example:
ScottRoaming's image is also from Flickr and it ends in .jpg as is required.
Have a look at my post, pg1 #17, with his image and his url and click the Quote button to see the bbcode.
Clicking his image in that post opens his full sized image correctly in a new browser tab.
I found the culprit. The url that I copied from Flickr (when accessing the link via the down-pointing arrow, "Download this photo") has the "_d" at the end:
"https://live.staticflickr.com/65535/54331049666_22f6a200fd_o_d.jpg"
It is this "_d" that causes the image download upon clicking.
When the _d is removed, then the image opens like in Scott's examples, in a new tab.
I am not sure if Scott also manually removed the "_d" from his links, or not; he didn't mention this.
For example:
Just a tip - when you have your image's link you intend to use in your post, first copy/paste it into a fresh new browser tab and see what is displayed in the tab because the display will be the same if you use the link in a bbcode url tag in your post. If the display in the browser tab is what you want then you're good to go to use the link in your post.