Image with link alignment problem

[LukaL]

Hi,

I am a team member of Alloy Project, and we have recently updated our initial bitcointalk thread post. Now it is one big picture. I wanted to apply links to some parts of picture, that is why I have cut it on smaller pieces, and apply links to few of those pieces. All good so far.
The problem I encountered on is that when I apply link around picture it automatically pushes picture for 0.2 cm into the right, and now picture is not aligned with picture above or below...

You can take a look here :
https://bitcointalk.org/index.php?topic=3002653.0

Do you have any idea how to "refuse" this 0.2 cm move of picture into the right, when you apply link around it.
I have tried align left, center, but there is still this 0.2 cm difference
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".

Is there a possibility to align also other picture parts (the ones without link around it) into the right for some xx cm.

I would be very thankfull if you could help,
Best regards,
Alloy Project team

[mdayonliner]

Is there a possibility to align also other picture parts (the ones without link around it) into the right for some xx cm.

I am not sure if it's gonna work or not... try adding a white-space before the non linked image.

Click here if unable to see image

[LukaL]

Nop .. I tried and this creates whole empty line (100% width), and pushes img into new line

[JeremyB]

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.

[TryNinja]

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]

[LukaL]

Thanks guys for all this suggestions... let me try them out now and I will get back to you

[LukaL]

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...

[TryNinja]

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]

[LukaL]

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...

[tbct_mt2]

~

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

[JeremyB]

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.

[LukaL]

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...

[LukaL]

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

[JeremyB]

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

Thanks for the proposal, will join.

[LukaL]

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

[Makkara]

EDIT:
the preview seemed fine  

[LukaL]

Yep, preview always looks fine, when you post it its not ok ... don't know why :/

[Makkara]

i got something working here, it seems to be related with the size and alignment  

[LukaL]

Ok this looks promising...

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...

[JeremyB]

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).