How to add image ?

How to add image ?

79°
Missing
Deal Cadet
54
398
4

How to add image here.

2 Comments  |  
2 Dimers
Missing
suspended
50
20
0
amanhere2011608 wrote:

How to add image here.
http://desidime.com/forums/dost-and-dimes/topics/how-to-add-image?f=1&page=1#post_5424190
<a href="http://desidime.com/forums/dost-and-dimes/topics/how-to-add-image?f=1&page=1#post_5424190">http://desidime.com/forums/dost-and-dimes/topics/how-to-add-image?f=1&page=1#post_5424190</a>

two of the more popular and yet relatively easy methods are using
1] img src tag
and
2] a href tag (along with img src tag).
Bonus 3] involves adding the ’alt’’ and/or “title” parameters in the “img src” tag. The same is useful when a user is on a slow connection, has disabled images or the image site is blocked at their end. this is a typical @Achilles heel in many large corporates or technology companies or personnel working in sensitive projects, departments.
in such instances, adding the ‘alt’ parameter helps getting ‘some’ idea of what the image might have been about. If the alt text syntax is correctly added in the ‘img src’, then the text will get displayed in place of the image (if image fails to load or images are intentionally disabled).

similarly, the ‘title’ parameter #was# very helpful because it let one read the context/ title (if added in the ‘img src’ tag)
simply by hovering the mouse… over the image. (it used to show up like the time stamp data ‘tool-tip’ visible when one hovers over the comment’s time data ).
if you (from a computer) hover the mouse on the TEAL coloured 2018-11-19 at the end of the previous line, you’d see the time stamp, date of this post. the “title” tool-tip for images has similar functionality.
#was#: because the ‘title’ parameter text no longer shows up in DesiDimeupon hovering the mouse on the image.


but unless one is mistaken, in “hot deals on-line” section, when starting a topic
there is option to add deal image from one’s own device or from image url on the internet.

otherwise, one needs to find the direct URL of the image and then use the same.
(if image is on your device, then you need to upload to some image hosting site).

in the following example, the logo of this site should appear if one copies and pastes the next line verbatim (all the syntax, text with light blue background).

1] <img src="https://cdn0.desidime.com/assets/desidime-logo-8381e01bfd155583ebe75c9e3d7fbd77.png">

Do NOTE that THE ONLY space░/ blank▓ /white space▒ is between img and src and that the URL is boxed between " marks.
[one should obviouslyreplace the image link of DesiDime logo, with the image one intends to embed. everything else remains same.]

as on date, DesiDime parses or auto-uploads all embedded images to its own servers and
except for embedded images from the 3]Imgur_siteImgur_site site, all other images might show up in lower resolution or smaller size (despite your oiginal image being more clear, high resolution)… when the images are automatically stored in the Content Distribution Network of the DesiDime server/s.
(the ‘img src’ tag too is automatically updated with the URL of the image saved within the CDN, albeit the current default setting is to use the lower sized image for embedding/display.)
May be this is done to avoid too many data heavy pages, which might slow down the user experience for others too.
remember the WAP enabled sites from early days of consumer internet? now imagine being on a patchy, archaic, slow network and a single page has multiple 5-10MB images.
even otherwise, there are many "honourable’ “decorated” members, sam ganda posters whose rule (raj) rocks the money-bells and thus their spam posts with dozens, even hundreds of links, images are welcome here.

Annie Hu let’s continue about process to change the ‘img src’ tag IF need be.. by pointing to the full resolution or smaller images, as per the situation.

for example, the avataar of the above poster is shown as https://cdn3.desidime.com/avatars/18323/medium/hamster.gif
you may notice that the link tells us that the image rendered will be of /medium/ size.
one can simply change this text from /medium/ to /small/ or /original/ (the comment will need to be edited and text needs to be replaced manually.)
this might make a significant difference in case of screen-grabs with large (Terms, Conditions) text or other finer detail in the image (say; photomacrography shots, product close-ups).
The difference between https://cdn3.desidime.com/avatars/18323/medium/hamster.gif and https://cdn3.desidime.com/avatars/18323/original/hamster.gif doesn’t seem to be that much though.

if one needs to keep images clickable (tapping/ clicking takes one to the source of the image or to a different URL)
one can use the <a href=“Redirection_Address”>tag</a>.

say; you wish for the user to be directed to the product page (or the original/ high res. image) when tapping/clicking on the displayed image

For this to work, you can use the a href tag, with the img src tag nested within (the a href tag).
the a href tag usually opens with <a href=“TARGET_URL”> and ideally must be closed with </a>
Thus, if one wants to have the logo of this site displayed, which upon being tapped on/ clicked would redirects to or opens http://desidime.com/forums
then one should copy and paste the next line verbatim (all the syntax, text with light blue background) and if the URLs are correct, live then everything should work as per expectation/s.

2] <a href="http://desidime.com/forums"><img src="https://cdn0.desidime.com/assets/desidime-logo-8381e01bfd155583ebe75c9e3d7fbd77.png"></a>

Do NOTE that there are ONLY two blanks▒ / white spaces░ in the above. One between a and href and another between img and src.
and that BOTH the URLs are boxed between " marks.

have added the ‘alt text’ and ‘title’ attributes for the Imgur logo. The the syntax, text with light blue background can be copied and pasted from ⇥⇛<img src="http://i.imgur.com/2MVmtwO.png" alt="Imgur_logo" title=”Imgur_site>⇚⇤

as on date, there exits an oddity in how the 3]Imgur_siteImgur_site site gallery links are redirected by DesiDime.
with some random image off the internet and using the tag <a href="http://imgur.com/a/7o9qU5p"><img src="http://i.imgur.com/jonxjES.gif"></a>
one gets the following CLICKABLE image. so far so good!

However the small issue is that Desidime ‘forces’ the auto-direction of even the link pointing to Imgur gallery or post page by prefixing the link with an i. letter I followed by a DOT.
But such link format is only for the direct images hosted at Imgur_site site and not for the landing page or the gallery.

in the example above, one would notice, that although the ‘a href’ tag is for http://imgur.com/a/7o9qU5p , the redirect link forced by DesiDime is http://i.imgur.com/a/7o9qU5p
Thankfully, (for now) Imgur_site corrects the URL/Link back to http://imgur.com/a/7o9qU5p.

Also, trying to view or directly open ONLY the image from the context menu is rendered futile.

For commercial or some other reason/s, any attempt to open the context menu (hard press on portable devices, usually right click on computers) even for hotlinked images (like imgur) does NOT let one choose the ‘view image’ or ‘open image’ option.
DesiDime would directly open the link in ‘a href’ tag!


Of-course, not being from technical background, I wouldn’t know if some enable/disable of java (javascript?) is possible or of any direct use, without affecting general functionality.


Lastly, though not often required or useful on this site,
at times one may wish to 4] rotate (or even flip) the image with actually saving the image with new orientation or size.

Since not having technical understanding of these, i’ve not tried these much.
⇥⇛<img src="http://i.imgur.com/2MVmtwO.png" class="rotateimg180">⇚⇤

the ‘transform’ syntax might have wider reach (say Android, Internet Explorer)
⇥⇛<img src="http://i.imgur.com/2MVmtwO.png" style=”transform:rotate(270deg);”>⇚⇤
in this even negative number (reverse rotation) might be possible. But i am not proficient with those technical methods.

⇥⇛<img src="http://i.imgur.com/2MVmtwO.png" rotate="90">⇚⇤

supported mostly by some Safari and Firefox versions only
⇥⇛<img src="http://i.imgur.com/2MVmtwO.png" style=“image-orientation: 90deg;”>⇚⇤

⇥⇛<img src="http://i.imgur.com/2MVmtwO.png" rotate="90">⇚⇤

Missing