Image with link alignment problem | Bitcointalksearch.org

LukaL

jr. member

Activity: 87

Merit: 2

This seems really nice solution... thank you for that... I think we will go with this one! Cheesy

You guys are awesame!

nc50lc

legendary

Activity: 2534

Merit: 6080

Self-proclaimed Genius

Quote from: JeremyB on June 21, 2018, 04:31:42 AM

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:

Quote from: LukaL on June 20, 2018, 07:17:07 AM

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]

JeremyB

sr. member

Activity: 812

Merit: 270

Quote from: ?? on ??

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

LukaL

jr. member

Activity: 87

Merit: 2

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

Makkara

full member

Activity: 1064

Merit: 166

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

LukaL

jr. member

Activity: 87

Merit: 2

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

Makkara

full member

Activity: 1064

Merit: 166

EDIT:
the preview seemed fine Undecided

LukaL

jr. member

Activity: 87

Merit: 2

Quote from: JeremyB on June 20, 2018, 03:35:41 PM

Quote from: LukaL on June 20, 2018, 01:38:38 PM

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

JeremyB

sr. member

Activity: 812

Merit: 270

Quote from: LukaL on June 20, 2018, 01:38:38 PM

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.

Quote from: LukaL on June 20, 2018, 02:03:05 PM

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

Thanks for the proposal, will join.

LukaL

jr. member

Activity: 87

Merit: 2

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

LukaL

jr. member

Activity: 87

Merit: 2

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

JeremyB

sr. member

Activity: 812

Merit: 270

Quote from: LukaL on June 20, 2018, 09:11:28 AM

Quote from: TryNinja on June 20, 2018, 09:03:36 AM

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.

tbct_mt2

hero member

Activity: 2366

Merit: 838

Quote from: LukaL on June 20, 2018, 07:17:07 AM

~

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

LukaL

jr. member

Activity: 87

Merit: 2

Quote from: TryNinja on June 20, 2018, 09:03:36 AM

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

TryNinja

legendary

Activity: 2758

Merit: 6830

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

jr. member

Activity: 87

Merit: 2

Quote from: JeremyB on June 20, 2018, 08:10:39 AM

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

Quote from: TryNinja on June 20, 2018, 08:22:06 AM

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

LukaL

jr. member

Activity: 87

Merit: 2

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

TryNinja

legendary

Activity: 2758

Merit: 6830

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]

JeremyB

sr. member

Activity: 812

Merit: 270

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.

LukaL

jr. member

Activity: 87

Merit: 2

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

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