Pages:
Author

Topic: Image with link alignment problem (Read 364 times)

jr. member
Activity: 87
Merit: 2
June 22, 2018, 03:27:46 AM
#22
This seems really nice solution... thank you for that... I think we will go with this one! Cheesy
You guys are awesame!
legendary
Activity: 2394
Merit: 5531
Self-proclaimed Genius
June 21, 2018, 05:37:52 AM
#21
Same issue as mentioned bu the OP: users will not easily distinguish real vs "fake" links (i.e: I always have a hand pointer over the whole image there is a real link or not).
Not at all, when users try to click the empty link, there will be no response.
But if they click on the right spot, they will be redirected to the correct url.

Now the different links work as intended. But yes, the cursor will always indicate that there's a link.

What he meant by that in the OP is, he enclosed the whole image in a [url][url] tag making the whole post linked to a single url.

This:
I tried to put link around whole picture - in this case alignment is ok, but now whole picture is a link, or it acts as link, and users don't really distinguish which are real links and which are "fake".

<Edit>
Never mind, I realized that it was slightly the same with Tryninja's reply.

<Update>
How about, make use of acronym tags to display a "hover info" to the real links whenever the mouse points to it.

Example: (Point your mouse pointer to any link)
Quote from: alloyproject








Code (for the whole ANN thread): Double-check everything for typos especially the links
Code:
[iurl=#][img]https://vps-city.com/alloybtc_talk/H1.jpg[/img][/iurl]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H2.jpg[/img][/iurl]
[acronym=https://alloyproject.org/discord][url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H3.jpg[/img][/url][/acronym]
[acronym=https://alloyproject.org/#wallet][url=https://alloyproject.org/#wallet][img]https://vps-city.com/alloybtc_talk/H4.jpg[/img][/url][/acronym]
[acronym=http://alloyfaucet.com/][url=http://alloyfaucet.com/][img]https://vps-city.com/alloybtc_talk/H5.jpg[/img][/url][/acronym]
[acronym=https://alloyproject.org/pools][url=https://alloyproject.org/pools][img]https://vps-city.com/alloybtc_talk/H6.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H7.jpg[/img][/iurl]
[acronym=https://tradeogre.com/exchange/BTC-XAO][url=https://tradeogre.com/exchange/BTC-XAO][img]https://vps-city.com/alloybtc_talk/H8.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H9.jpg[/img][/iurl]
[acronym=https://altex.exchange/markets&pair=BTC_XAO][url=https://altex.exchange/markets&pair=BTC_XAO][img]https://vps-city.com/alloybtc_talk/H10.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H11.jpg[/img][/iurl]
[acronym=https://maplechange.com/markets/xaobtc][url=https://maplechange.com/markets/xaobtc][img]https://vps-city.com/alloybtc_talk/H12.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H13.jpg[/img][/iurl]
[acronym=https://alloyproject.org/explorer][url=https://alloyproject.org/explorer][img]https://vps-city.com/alloybtc_talk/H14.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H15.jpg[/img][/iurl]
[acronym=https://alloyproject.org/pools][url=https://alloyproject.org/pools][img]https://vps-city.com/alloybtc_talk/H16.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H17.jpg[/img][/iurl]
[acronym=https://alloyproject.org/#roadmap][url=https://alloyproject.org/#roadmap][img]https://vps-city.com/alloybtc_talk/H18.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H19.jpg[/img][/iurl]
[acronym=https://alloyproject.org/discord][url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H20.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H21.jpg[/img][/iurl]
[acronym=https://alloyproject.org/discord][url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H22.jpg[/img][/url][/acronym]
[acronym=https://alloyproject.org/twitter][url=https://alloyproject.org/twitter][img]https://vps-city.com/alloybtc_talk/H23.jpg[/img][/url][/acronym]
[acronym=https://alloyproject.org/reddit][url=https://alloyproject.org/reddit][img]https://vps-city.com/alloybtc_talk/H24.jpg[/img][/url][/acronym]
[acronym=https://alloyproject.org/telegram][url=https://alloyproject.org/telegram][img]https://vps-city.com/alloybtc_talk/H25.jpg[/img][/url][/acronym]
[acronym=https://alloyproject.org/#team][url=https://alloyproject.org/#team][img]https://vps-city.com/alloybtc_talk/H26.jpg[/img][/url][/acronym]
[acronym=https://alloyproject.org/#faq][url=https://alloyproject.org/#faq][img]https://vps-city.com/alloybtc_talk/H27.jpg[/img][/url][/acronym]
[acronym=https://cryptonote.org/whitepaper.pdf][url=https://cryptonote.org/whitepaper.pdf][img]https://vps-city.com/alloybtc_talk/H28.jpg[/img][/url][/acronym]
[acronym=https://downloads.getmonero.org/whitepaper_annotated.pdf][url=https://downloads.getmonero.org/whitepaper_annotated.pdf][img]https://vps-city.com/alloybtc_talk/H29.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H30.jpg[/img][/iurl]
[acronym=https://alloyproject.org/#wallet][url=https://alloyproject.org/#wallet][img]https://vps-city.com/alloybtc_talk/H31.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H32.jpg[/img][/iurl]
[acronym=https://alloyproject.org/github][url=https://alloyproject.org/github][img]https://vps-city.com/alloybtc_talk/H33.jpg[/img][/url][/acronym]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H34.jpg[/img][/iurl]
sr. member
Activity: 812
Merit: 270
June 21, 2018, 05:31:42 AM
#20
If enclosing it with a link is the problem, why don't you just enclose the other parts in a "#" (blank) link for them to behave like the others?

Same issue as mentioned bu the OP: users will not easily distinguish real vs "fake" links (i.e: I always have a hand pointer over the whole image there is a real link or not).
jr. member
Activity: 87
Merit: 2
June 21, 2018, 03:10:27 AM
#19
Ok this looks promising... Smiley

Yes this actually works... the problem is you have static width, and if someone is using lower screen resolution it will again be wrongly aligned for him...
Is there an option to set width in % ... instead of width=1200 -> width=90% ... width=90% doesn't work, can I do it somehow differently?

But this width=1200 seems like the best solution so far...
full member
Activity: 1064
Merit: 166
June 21, 2018, 02:25:38 AM
#18
i got something working here, it seems to be related with the size and alignment  Shocked














jr. member
Activity: 87
Merit: 2
June 21, 2018, 02:21:27 AM
#17
Yep, preview always looks fine, when you post it its not ok ... don't know why :/
full member
Activity: 1064
Merit: 166
June 21, 2018, 02:16:05 AM
#16

EDIT:
the preview seemed fine   Undecided
jr. member
Activity: 87
Merit: 2
June 21, 2018, 01:35:52 AM
#15
Thanks guys for trying to help... I really appreciate your effort.
It really seems applying link over whole picture is the only way to align it... I am just not yet decided if it is better like it is now - clear links, but alignment problem; or it is better with link around whole img - confusing links, but correct alignment...

Looks far better without alignment issue.
People are used to search different links on ANN images, not a big issue imo.


You are probably right ... will talk with the team and we will decide Smiley
sr. member
Activity: 812
Merit: 270
June 20, 2018, 04:35:41 PM
#14
Thanks guys for trying to help... I really appreciate your effort.
It really seems applying link over whole picture is the only way to align it... I am just not yet decided if it is better like it is now - clear links, but alignment problem; or it is better with link around whole img - confusing links, but correct alignment...

Looks far better without alignment issue.
People are used to search different links on ANN images, not a big issue imo.

Please join our discord channel and contact me there... I would like to show some gratitude Smiley

Thanks for the proposal, will join.

jr. member
Activity: 87
Merit: 2
June 20, 2018, 03:03:05 PM
#13
Please join our discord channel and contact me there... I would like to show some gratitude Smiley
jr. member
Activity: 87
Merit: 2
June 20, 2018, 02:38:38 PM
#12
Thanks guys for trying to help... I really appreciate your effort.
It really seems applying link over whole picture is the only way to align it... I am just not yet decided if it is better like it is now - clear links, but alignment problem; or it is better with link around whole img - confusing links, but correct alignment...
sr. member
Activity: 812
Merit: 270
June 20, 2018, 02:24:58 PM
#11
Hmm... Found another solution: put an URL tag in every image, so everything is a little bit to the right.

I am not really sure about that... people will not distinguish between real links and "fake" ones ... I mentioned this already ...
Thanks for suggestion though...

I tried many things but can't find a suitable solution.
From my analysis of other ANN, they always use URL for every parts. Usually the "standard" link points to the main website, so they are not "fake" links but general ones.
hero member
Activity: 2254
Merit: 831
June 20, 2018, 10:30:42 AM
#10
~
Hi Luka,
I have my own topic on images attached adjustments and hyperlinks, which might be helpful for your interest.
Guideline on posting images (with size adjustments), hyperlinks
jr. member
Activity: 87
Merit: 2
June 20, 2018, 10:11:28 AM
#9
Hmm... Found another solution: put an URL tag in every image, so everything is a little bit to the right.

I am not really sure about that... people will not distinguish between real links and "fake" ones ... I mentioned this already ...
Thanks for suggestion though...
legendary
Activity: 2758
Merit: 6830
June 20, 2018, 10:03:36 AM
#8
Hmm... Found another solution: put an URL tag in every image, so everything is a little bit to the right.

Add this to every image that doesn't have an URL:
Code:
[iurl=#]image here[/iurl]

This makes that people can click the image but nothing will happen. While the others will lead to the right page.

Edit: here it is

Code:
[iurl=#][img]https://vps-city.com/alloybtc_talk/H1.jpg[/img][/iurl]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H2.jpg[/img][/iurl]
[url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H3.jpg[/img][/url]
[url=https://alloyproject.org/#wallet][img]https://vps-city.com/alloybtc_talk/H4.jpg[/img][/url]
[url=http://alloyfaucet.com/][img]https://vps-city.com/alloybtc_talk/H5.jpg[/img][/url]
[url=https://alloyproject.org/pools][img]https://vps-city.com/alloybtc_talk/H6.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H7.jpg[/img][/iurl]
[url=https://tradeogre.com/exchange/BTC-XAO][img]https://vps-city.com/alloybtc_talk/H8.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H9.jpg[/img][/iurl]
[url=https://altex.exchange/markets&pair=BTC_XAO][img]https://vps-city.com/alloybtc_talk/H10.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H11.jpg[/img][/iurl]
[url=https://maplechange.com/markets/xaobtc][img]https://vps-city.com/alloybtc_talk/H12.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H13.jpg[/img][/iurl]
[url=https://alloyproject.org/explorer][img]https://vps-city.com/alloybtc_talk/H14.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H15.jpg[/img][/iurl]
[url=https://alloyproject.org/pools][img]https://vps-city.com/alloybtc_talk/H16.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H17.jpg[/img][/iurl]
[url=https://alloyproject.org/#roadmap][img]https://vps-city.com/alloybtc_talk/H18.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H19.jpg[/img][/iurl]
[url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H20.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H21.jpg[/img][/iurl]
[url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H22.jpg[/img][/url]
[url=https://alloyproject.org/twitter][img]https://vps-city.com/alloybtc_talk/H23.jpg[/img][/url]
[url=https://alloyproject.org/reddit][img]https://vps-city.com/alloybtc_talk/H24.jpg[/img][/url]
[url=https://alloyproject.org/telegram][img]https://vps-city.com/alloybtc_talk/H25.jpg[/img][/url]
[url=https://alloyproject.org/#team][img]https://vps-city.com/alloybtc_talk/H26.jpg[/img][/url]
[url=https://alloyproject.org/#faq][img]https://vps-city.com/alloybtc_talk/H27.jpg[/img][/url]
[url=https://cryptonote.org/whitepaper.pdf][img]https://vps-city.com/alloybtc_talk/H28.jpg[/img][/url]
[url=https://downloads.getmonero.org/whitepaper_annotated.pdf][img]https://vps-city.com/alloybtc_talk/H29.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H30.jpg[/img][/iurl]
[url=https://alloyproject.org/#wallet][img]https://vps-city.com/alloybtc_talk/H31.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H32.jpg[/img][/iurl]
[url=https://alloyproject.org/github][img]https://vps-city.com/alloybtc_talk/H33.jpg[/img][/url]
[iurl=#][img]https://vps-city.com/alloybtc_talk/H34.jpg[/img][/iurl]
jr. member
Activity: 87
Merit: 2
June 20, 2018, 09:59:15 AM
#7
I don't understand. If I quote your ANN and preview it, it is perfectly aligned.



Try to quote your ANN, check the preview. Then if it works try to edit by removing quotes lines (1st & last lines).
Second solution, try to specify image with like:

Code:
[img width=2055]

Third solution, I've seen some ANN with 2000 pixels image, maybe there is a limit there, try to resize them all.

Yes I noticed that to ... preview is ok, when I post it its not ok...
Nothing works, I haven't tried to resize images to 2000px, specifying to width=2000 doesn't work...

I got it. It's because of the URL tag before the image, which puts the image a little more to the right.

I found a solution: add this to every image that doesn't have a link
Code:
[right][img width=1529]IMG URL HERE[/img][/right]

This will put every image a little bit to the right, making them align with the ones with an url.

Edit: it's actually "width=1529" and not 1300. Here is the whole working code for the thread:

Code:
[right]
[img width=1529]https://vps-city.com/alloybtc_talk/H1.jpg[/img]
[img width=1529]https://vps-city.com/alloybtc_talk/H2.jpg[/img]
[url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H3.jpg[/img][/url]
[url=https://alloyproject.org/#wallet][img]https://vps-city.com/alloybtc_talk/H4.jpg[/img][/url]
[url=http://alloyfaucet.com/][img]https://vps-city.com/alloybtc_talk/H5.jpg[/img][/url]
[url=https://alloyproject.org/pools][img]https://vps-city.com/alloybtc_talk/H6.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H7.jpg[/img]
[url=https://tradeogre.com/exchange/BTC-XAO][img]https://vps-city.com/alloybtc_talk/H8.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H9.jpg[/img]
[url=https://altex.exchange/markets&pair=BTC_XAO][img]https://vps-city.com/alloybtc_talk/H10.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H11.jpg[/img]
[url=https://maplechange.com/markets/xaobtc][img]https://vps-city.com/alloybtc_talk/H12.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H13.jpg[/img]
[url=https://alloyproject.org/explorer][img]https://vps-city.com/alloybtc_talk/H14.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H15.jpg[/img]
[url=https://alloyproject.org/pools][img]https://vps-city.com/alloybtc_talk/H16.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H17.jpg[/img]
[url=https://alloyproject.org/#roadmap][img]https://vps-city.com/alloybtc_talk/H18.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H19.jpg[/img]
[url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H20.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H21.jpg[/img]
[url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H22.jpg[/img][/url]
[url=https://alloyproject.org/twitter][img]https://vps-city.com/alloybtc_talk/H23.jpg[/img][/url]
[url=https://alloyproject.org/reddit][img]https://vps-city.com/alloybtc_talk/H24.jpg[/img][/url]
[url=https://alloyproject.org/telegram][img]https://vps-city.com/alloybtc_talk/H25.jpg[/img][/url]
[url=https://alloyproject.org/#team][img]https://vps-city.com/alloybtc_talk/H26.jpg[/img][/url]
[url=https://alloyproject.org/#faq][img]https://vps-city.com/alloybtc_talk/H27.jpg[/img][/url]
[url=https://cryptonote.org/whitepaper.pdf][img]https://vps-city.com/alloybtc_talk/H28.jpg[/img][/url]
[url=https://downloads.getmonero.org/whitepaper_annotated.pdf][img]https://vps-city.com/alloybtc_talk/H29.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H30.jpg[/img]
[url=https://alloyproject.org/#wallet][img]https://vps-city.com/alloybtc_talk/H31.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H32.jpg[/img]
[url=https://alloyproject.org/github][img]https://vps-city.com/alloybtc_talk/H33.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H34.jpg[/img]
[/right]

Unfortunately it doesn't work... I believe this one is also tricky, because it depends on users screen resolution... so the ones with the same resolution to yours will see picture ok, others no...
jr. member
Activity: 87
Merit: 2
June 20, 2018, 09:25:36 AM
#6
Thanks guys for all this suggestions... let me try them out now and I will get back to you Wink
legendary
Activity: 2758
Merit: 6830
June 20, 2018, 09:22:06 AM
#5
I got it. It's because of the URL tag before the image, which puts the image a little more to the right.

I found a solution: add this to every image that doesn't have a link
Code:
[right][img width=1529]IMG URL HERE[/img][/right]

This will put every image a little bit to the right, making them align with the ones with an url.

Edit: it's actually "width=1529" and not 1300. Here is the whole working code for the thread:

Code:
[right]
[img width=1529]https://vps-city.com/alloybtc_talk/H1.jpg[/img]
[img width=1529]https://vps-city.com/alloybtc_talk/H2.jpg[/img]
[url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H3.jpg[/img][/url]
[url=https://alloyproject.org/#wallet][img]https://vps-city.com/alloybtc_talk/H4.jpg[/img][/url]
[url=http://alloyfaucet.com/][img]https://vps-city.com/alloybtc_talk/H5.jpg[/img][/url]
[url=https://alloyproject.org/pools][img]https://vps-city.com/alloybtc_talk/H6.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H7.jpg[/img]
[url=https://tradeogre.com/exchange/BTC-XAO][img]https://vps-city.com/alloybtc_talk/H8.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H9.jpg[/img]
[url=https://altex.exchange/markets&pair=BTC_XAO][img]https://vps-city.com/alloybtc_talk/H10.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H11.jpg[/img]
[url=https://maplechange.com/markets/xaobtc][img]https://vps-city.com/alloybtc_talk/H12.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H13.jpg[/img]
[url=https://alloyproject.org/explorer][img]https://vps-city.com/alloybtc_talk/H14.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H15.jpg[/img]
[url=https://alloyproject.org/pools][img]https://vps-city.com/alloybtc_talk/H16.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H17.jpg[/img]
[url=https://alloyproject.org/#roadmap][img]https://vps-city.com/alloybtc_talk/H18.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H19.jpg[/img]
[url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H20.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H21.jpg[/img]
[url=https://alloyproject.org/discord][img]https://vps-city.com/alloybtc_talk/H22.jpg[/img][/url]
[url=https://alloyproject.org/twitter][img]https://vps-city.com/alloybtc_talk/H23.jpg[/img][/url]
[url=https://alloyproject.org/reddit][img]https://vps-city.com/alloybtc_talk/H24.jpg[/img][/url]
[url=https://alloyproject.org/telegram][img]https://vps-city.com/alloybtc_talk/H25.jpg[/img][/url]
[url=https://alloyproject.org/#team][img]https://vps-city.com/alloybtc_talk/H26.jpg[/img][/url]
[url=https://alloyproject.org/#faq][img]https://vps-city.com/alloybtc_talk/H27.jpg[/img][/url]
[url=https://cryptonote.org/whitepaper.pdf][img]https://vps-city.com/alloybtc_talk/H28.jpg[/img][/url]
[url=https://downloads.getmonero.org/whitepaper_annotated.pdf][img]https://vps-city.com/alloybtc_talk/H29.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H30.jpg[/img]
[url=https://alloyproject.org/#wallet][img]https://vps-city.com/alloybtc_talk/H31.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H32.jpg[/img]
[url=https://alloyproject.org/github][img]https://vps-city.com/alloybtc_talk/H33.jpg[/img][/url]
[img width=1529]https://vps-city.com/alloybtc_talk/H34.jpg[/img]
[/right]
sr. member
Activity: 812
Merit: 270
June 20, 2018, 09:10:39 AM
#4
I don't understand. If I quote your ANN and preview it, it is perfectly aligned.



Try to quote your ANN, check the preview. Then if it works try to edit by removing quotes lines (1st & last lines).
Second solution, try to specify image with like:

Code:
[img width=2055]

Third solution, I've seen some ANN with 2000 pixels image, maybe there is a limit there, try to resize them all.
jr. member
Activity: 87
Merit: 2
June 20, 2018, 08:31:04 AM
#3
Nop .. I tried and this creates whole empty line (100% width), and pushes img into new line
Pages:
Jump to: