Links to removed French stories

[eI000yo]

THIS TOPIC WAS PART OF ANOTHER POST: viewtopic.php?p=227-links-to-removed-fr ... ories#p227
The OP encountered an issue with images not working as expected when used as link images.
eI000yo

---

---

I examined the resulting source code and I can see that it's a link to the image nested inside a link to the story. Apparently it confuses some browsers, but the issue in the first place is linking to an image - it seems unnecessary and these nested links are probably against the web standards, which is why it's so unpredictable.

[EranBarLev]

I examined the resulting source code and I can see that it's a link to the image nested inside a link to the story. Apparently it confuses some browsers, but the issue in the first place is linking to an image - it seems unnecessary and these nested links are probably against the web standards, which is why it's so unpredictable.

Clickable images are standard practice. For example, see DaKanga's images guide.

[duome]

<a href="#here">
<a href="#there">...</a>
</a>

nested links like these aren't quite standard - that's what I mean

[dakanga]

I would suggest that the big images, even at 50% smaller, causes ... it being hard to navigate and use for many people. It is also VERY long, as well as what one part of me says is being in my face. A challenge to use, if not a real turn off.

I would like to suggest an even smaller image presentation.

This is just my opinion.

[EranBarLev]

I would suggest that the big images, even at 50% smaller, causes ... it being hard to navigate and use for many people. It is also VERY long, as well as what one part of me says is being in my face. A challenge to use, if not a real turn off.

I would like to suggest an even smaller image presentation.

This is just my opinion.

In the original post on the Duolingo forum it was smaller, because the right side of the screen was taken by ads. (You can see that in the archived post.) I just copied the post to this forum as is, but here it looks bigger. Would 5 images per row be fine? that should be smaller than Emilio's 50% images.

[dakanga]

That sounds like a good proposal.
And I would suggest to do this to your very valued header post.

In my opinion.

Thanks for what you do EranBarLev !

[EranBarLev]

VERY IMPORTANT: The zoom of the browser at the time of sending submitting the code is also important as written by @duome .

Does that mean that if I edit the post with 25% zoom it will fix the problem? I really don't want to create smaller versions for all these images.

Edit: I tried changing the zoom and it doesn't seem to make any difference.

[dakanga]

you definitely do not need to create a smaller image of this. You just resize them in this script.
Sorry it is past my bedtime.

It is along the lines of :
Green Owl :
[image=60]http://i.imgur.com/LjiAf9P.png[/image]

Green Owl :
[image=100]http://i.imgur.com/LjiAf9P.png[/image]

Green Owl :
[image=400]http://i.imgur.com/LjiAf9P.png[/image]

[dakanga]

again, thanks for all you do to share resources for language learning Eran.

[eI000yo]

Hi [mention]EranBarLev[/mention]!
Hi [mention]dakanga[/mention] !

This is the code I used for a new try.
I resized the images to 100px wide.
I upload the images and replace its names in the list.
I just have to move a couple of lines to change from a 2-column table to a 5-column table.

This is the only way it works for me, on PC.

---

[table]
[tr]
[td][center][![][01]] [01b]
[Surprise!] [01b][/center][/td]
[td][center][![][02]][02b]
[In the Museum] [02b][/center][/td]
[td][center][![][03]][03b]
[The Exam] [03b][/center][/td]
[td][center][![][04]] [04b]
[I Need Money!] [04b][/center][/td]
[td][center][![][05]][05b]
[Saturday Night] [05b][/center][/td]
[/tr]
[tr]
[td][center][![][06]][06b]
[The Green Dress] [06b][/center][/td]
[td][center][![][07]] [07b]
[My Favorite Pen] [07b][/center][/td]
[td][center][![][08]][08b]
[The Interview] [08b][/center][/td]
[td][center][![][09]][09b]
[The Friends] [09b][/center][/td]
[td][center][![][10]] [10b]
[Who Is It?] [10b][/center][/td]
[/tr][tr]
[td][center][![][11]][11b]
[I Hear a Noise!] [11b][/center][/td]
[td][center][![][12]][12b]
[A Visit to Rome] [12b][/center][/td]
[td][center][![][13]] [13b]
[The New Mall] [13b][/center][/td]
[td][center][![][14]][14b]
[Happy Birthday!] [14b][/center][/td]
[td][center][![][15]][15b]
[The Perfect Vacation] [15b][/center][/td]
[/tr]
[/table]

[01]: https://i.postimg.cc/DzrJG9g9/01.png
[01b]: https://www.duolingo.com/stories/fr-surprise
[02]: https://i.postimg.cc/FRhfVTC7/02.png
[02b]: https://www.duolingo.com/stories/fr-au-musee
[03]: https://i.postimg.cc/sXKM65bK/03.png
[03b]: https://www.duolingo.com/stories/fr-l-examen
[04]: https://i.postimg.cc/yxdkwkHK/04.png
[04b]: https://www.duolingo.com/stories/fr-j-ai-besoin-d-argent
[05]: https://i.postimg.cc/wMG7Hgqm/05.png
[05b]: https://www.duolingo.com/stories/fr-samedi-soir
[06]: https://i.postimg.cc/c4vvhghM/06.png
[06b]: https://www.duolingo.com/stories/fr-en-la-robe-verte
[07]: https://i.postimg.cc/G37BvJFm/07.png
[07b]: https://www.duolingo.com/stories/fr-en-mon-stylo-prefere
[08]: https://i.postimg.cc/vHCcNYSR/08.png
[08b]: https://www.duolingo.com/stories/fr-en-l-entretien
[09]: https://i.postimg.cc/MpRvkChn/09.png
[09b]: https://www.duolingo.com/stories/fr-en-les-amies
[10]: https://i.postimg.cc/9fhzcxhJ/10.png
[10b]: https://www.duolingo.com/stories/fr-c-est-qui
[11]: https://i.postimg.cc/PqQJJmfh/11.png
[11b]: https://www.duolingo.com/stories/fr-j-entends-un-bruit
[12]: https://i.postimg.cc/MTZTQvXB/12.png
[12b]: https://www.duolingo.com/stories/fr-la-visite-a-rome
[13]: https://i.postimg.cc/63HQLtGm/13.png
[13b]: https://www.duolingo.com/stories/fr-le-nouveau-centre-commercial
[14]: https://i.postimg.cc/NF5jdS6f/14.png
[14b]: https://www.duolingo.com/stories/fr-bon-anniversaire
[15]: https://i.postimg.cc/L5w6wDDk/15.png
[15b]: https://www.duolingo.com/stories/fr-les-vacances-parfaites

---

![][01] Surprise!	![][02] In the Museum	![][03] The Exam	![][04] I Need Money!	![][05] Saturday Night
![][06] The Green Dress	![][07] My Favorite Pen	![][08] The Interview	![][09] The Friends	![][10] Who Is It?
![][11] I Hear a Noise!	![][12] A Visit to Rome	![][13] The New Mall	![][14] Happy Birthday!	![][15] The Perfect Vacation

[EranBarLev]

you definitely do not need to create a smaller image of this. You just resize them in this script.
Sorry it is past my bedtime.

It is along the lines of :
Green Owl :
[image=60]http://i.imgur.com/LjiAf9P.png[/image]

I tried that but it doesn't seem to work in a clickable image.

[eI000yo]

I try 2 images on the same line using the image tag

[image=100]https://i.postimg.cc/DzrJG9g9/01.png[/image] [image=100]https://i.postimg.cc/DzrJG9g9/01.png[/image]

and the result is

The problem is that the generated code, <img style="width:100%;height:100%" src="https://i.postimg.cc/DzrJG9g9/01.png"></p><p style="width: 100px;"><img style="width:100%;height:100%" src="https://i.postimg.cc/DzrJG9g9/01.png">, creates a new paragraph after each image (/p><p).
This tag creates a block-level element, so it is almost useless.

The good news is that my last try also works on my phone (the image links to the stories, not the original image).
In a few hours I'll resize all the images and post the new 5-column tables.
I will also upload a zip with its code.

IMPORTANT: I will also move the messages related to the problem to a more suitable topic.

[EranBarLev]

The problem is that the generated code, <img style="width:100%;height:100%" src="https://i.postimg.cc/DzrJG9g9/01.png"></p><p style="width: 100px;"><img style="width:100%;height:100%" src="https://i.postimg.cc/DzrJG9g9/01.png">, creates a new paragraph after each image (/p><p).
This tag creates a block-level element, so it is almost useless.

So there's a problem in the way this forum converts the BBCode and markdown to HTML, in both the extra link to the large images and the new paragraph after the resized images. I guess the [mention]Duome Team[/mention] should fix that.

IMPORTANT: I will also move the messages related to the problem to a more suitable topic.

Thanks! My topic in the troubleshooting subforum should be appropriate.

[duome]

Thanks for moving it into a separate topic, eI000yo.
I took away the <p></p> from the [image] BBCode.

[EranBarLev]

I took away the <p></p> from the [image] BBCode.

Test:
[[image=150]https://stories-cdn.duolingo.com/image/1b10a427eeaa15c0ed6b690e78cbe8cb1b43e4e3.png[/image]](https://www.duolingo.com/stories/fr-surprise)

It works now! Thanks [mention]duome[/mention]!
Is it possible to remove the extra link to the large images too?

[duome]

The link to the bigger picture isn't there in a standalone example, but it's there indeed when it's inside a table. The pipe table parser might be the reason, but this isn't something I could fix through the bbcode syntax. Maybe [mention]luo-ning[/mention] could also have a look at it?

[EranBarLev]

The link to the bigger picture isn't there in a standalone example, but it's there indeed when it's inside a table. The pipe table parser might be the reason

Test:
![](https://cdn.wallpapersafari.com/1/76/BaYtGE.jpg)


Well, no. Here's a standalone example of a very large image with no table, and we still get the link.

[duome]

Then the only difference is a different syntax - ![]... (is it markdown or what?)

[EranBarLev]

Then the only difference is a different syntax - ![]... (is it markdown or what?)

Yes, it's markdown, but you get the link with BBCode too:
[img]https://cdn.wallpapersafari.com/1/76/BaYtGE.jpg[/img]

[eI000yo]

Thanks for moving it into a separate topic, eI000yo.
I took away the <p></p> from the [image] BBCode.

You are welcome.
Thank you for fixing the tag issue. Now you can use it not only in the tables, but in the signature, for example.

---

---

One more try using [image] and the original images. I used the BBCode style.
Now it is very easy to resize the images. I post 2 examples, [image=150] and 50.

Resized images work fine in my phone (450x800px) sometimes. If I reload the page in landscape position, the links work, but in portrait they do not. The with of the screen is related with the issue, IMO. I tried mobile and desktop versions.

Btw, you can see the code used to write a post by quoting it.

---

Table #1: 5 cells per row [image=150]

Surprise!

In the Museum

The Exam

I Need Money!

Saturday Night

---

Table #2: 5 cells per row [image=40], Markdown style

Surprise!	In the Museum	The Exam	I Need Money!	Saturday Night

---

Table #3: 5 cells per row [image=40]

Surprise!

In the Museum

The Exam

I Need Money!

Saturday Night

---

Table #4: 4 cells per row [image=65]

Surprise!

In the Museum

The Exam

I Need Money!

---

Table #5: 3 cells per row [image=90]

Surprise!

In the Museum

The Exam

---

Table #6: 2 cells per row [image=140]

Surprise!

In the Museum

---

Table #7: 1 cell per row[image=300]

Surprise!

[eI000yo]

The tables in my previous post work fine in all resolutions, but:

• You have a problem using the [image=xxx] tag: the width of the table will increase enough to allow images to fit into the cells.
  If the screen/window is too small some cells are not displayed. See Table #1: only 2 images/cells are displayed on my smartphone in portrait position, 450 px wide. It is not a minor problem.
  A window resolution of 1120px is required to display the full table.
• If the images are too small, the cell size is determined by the texts. You get a weird result if you're using a wide screen.
  See tables no. #2, 3 and 4 of my previous post using a PC.
• The table #5 looks fine in all resolutions, but it only has 3 columns.
• The table I posted a few posts above, viewtopic.php?p=17199-links-to-removed- ... ies#p17199, does not use the [image=xxx] tag. I resized the images to width=100px and uploaded them to https://postimg.org. It's not a lot of work, but you still have to repeat the process if something goes wrong. And the result works fine if the screen is wide enough but portrait position on my phone doesn't link to the intended target, but to images.

The following images are screenshots of my smartphone (450x800px)

![][1-2]	![][3-4]
![][4-5]	![][6-7]

The problem is not the tables, but the matchmaking system.
If the image doesn't resize, the link works fine. But if they are resized, to match the space, they link to the image, not the intended target.
And if we set an image size, if the space is not enough, some of the content is outside the usual space.

You can see the following images. For the first one I set with=600px [image=600]. According to my tests, a part of the image is not displayed if the screen resolution is too small. But the link works correctly.

This very large image is resized by the system. And as expected, it links to the image, not the intended target.
Its width is exactly the width of the text.


You can improve the appearance of tables with 4 or 5 columns by adding spaces in header cells, for example.

Surprise!	In the Museum	The Exam	I Need Money!	Saturday Night

Or the simpler and more elegant 300x1px transparent image, for example, in each header cell.
Or somewhere else, one image per column in the same row.

![][trans]	![][trans]	![][trans]	![][trans]	![][trans]
Surprise!	In the Museum	The Exam	I Need Money!	Saturday Night

[EranBarLev]

• You have a problem using the [image=xxx] tag: the width of the table will increase enough to allow images to fit into the cells.
  If the screen/window is too small some cells are not displayed. See Table #1: only 2 images/cells are displayed on my smartphone in portrait position, 450 px wide. It is not a minor problem.

This is actually worse than the original problem. It's a good reason not to use this method.

• The table I posted a few posts above, viewtopic.php?p=17199-links-to-removed- ... ies#p17199, does not use the [image=xxx] tag. I resized the images to width=100px and uploaded them to https://postimg.org. It's not a lot of work, but you still have to repeat the process if something goes wrong. And the result works fine if the screen is wide enough but portrait position on my phone doesn't link to the intended target, but to images.

But if it doesn't always solve the problem, why bother?
BTW you still left your comment with the smaller images in the original post. If it links to the images on your phone then you might as well delete that comment.

You can improve the appearance of tables with 4 or 5 columns by adding spaces in header cells, for example.

I did that in my original post, and it does look much better. Thanks! Though I had to change the number of spaces until it looked fine. Can you please check that it looks OK on your phone too?

Or the simpler and more elegant 120x1px transparent image, for example, in each header cell.
Or somewhere else, one image per column in the same row.

That didn't work in my original post, because the transparent image is smaller than the columns on my computer.

[eI000yo]

But if it doesn't always solve the problem, why bother?
BTW you still left your comment with the smaller images in the original post. If it links to the images on your phone then you might as well delete that comment.

I left my comment temporarily, but my intention was to delete it. Now, since it only partially solved the problem, I removed it.
It doesn't bother me, but knowing the source of the problem is part of the solution. I wish an expert could solve the problem.

That didn't work in my original] post, because the transparent image is smaller than the columns on my computer.

Now the transparent image is 300x1px. It doesn't matter if it's too big, the system resizes it to match the cells. And it weighs only a few bytes. My screen is new but very common:
Sizes:
Device Screen: width: 1920, height: 1080.
Browser Window: width: 1920, height: 903.
Webpage: width:1920, height: 903.

A 4k screen is close to 4,000px. If a 300px transparent image isn't enough, you can use a larger one. But I think that's enough because the text space used by duome is only part of the width.

Can you please check that it looks OK on your phone too?

I checked your OP on my phone, using both Firefox and Chrome and now I only see part of the table.
If you use spaces, you need to split them. In my tests I use three separate   blocks with a common space in between. This allows the system to change to a new line below or two new lines, if necessary.
So I prefer to use a transparent line.

And always the images are linked to themselves, not to the stories. Same problem on PC.

You have to be aware that a forum has many limitations. The admin and other people on the Team do their best to improve it, but if you want something that works well, you may have to create a pdf or similar and upload it here. Just another suggestion.

[EranBarLev]

Now the transparent image is 300x1px. It doesn't matter if it's too big, the system resizes it to match the cells.

I tried it but the columns still had different width for some reason.

I checked your OP on my phone, using both Firefox and Chrome and now I only see part of the table.
If you use spaces, you need to split them. In my tests I use three separate   blocks with a common space in between. This allows the system to change to a new line below or two new lines, if necessary.

The 3 blocks didn't work for me, the columns still had different width. It did work with a single block, but if you only see part of the table then I'll have to remove it.

if you want something that works well, you may have to create a pdf or similar and upload it here.

We already have the archive.ph post. There's a link at the top of my original post. I think that should work.

[eI000yo]

We already have the archive.ph post. There's a link at the top of my original post. I think that should work.

After checking your links, I found out that there is a simple way to convert your old code into acceptable code here at duome. You only need 2 minutes:

• Replace ![]( with [image=40]
• and .png) with .png[/image][BR]

This converts resizable images to 40px images.
And also adds a line break after the image in each cell, so that the text is on the next line.

I checked it in both Chrome and Firefox on my phone, in a vertical position.

I added large transparent images, 1,000x1px, in headcells.
But the browser's font size setting could be the problem if it's too big.
Of course the images are icons now, but they work fine at all resolutions on my side.

---

![][trans-large]	![][trans-large]	![][trans-large]	![][trans-large]	![][trans-large]
Surprise!	In the Museum	The Exam	I Need Money!	Saturday Night
The Green Dress	My Favorite Pen	The Interview	The Friends	Who Is It?

[EranBarLev]

I added large transparent images, 1,000x1px, in headcells.

This doesn't work for me either, the columns still have different widths. It seems that when the forum has to shrink the images to fit the page, it doesn't do so equally.

Of course the images are icons now, but they work fine at all resolutions on my side.

But earlier you posted screenshots of your phone with [image=40] and the tables were cropped. I don't understand the difference now.

[ocoadr32]

Hi,

I am wondering if you can help me. I want to access more stories in the French app and I have the crowns to open more stories, but it will not let me. I have plenty of crowns and lingots, but I do not know how to open up more stories. Also, do you only get lingots when you listen to the French podcasts on the phone and not on the computer? Thank you for any help you can give me.

[dakanga]

• https://support.duolingo.com/hc/en-us/a ... o-Stories-