Skip to main content

Appeareance of images attached to a post
Hello @Friendica Developers @Friendica Support @https://friendica-dev.mbbit.de/profile/friendicadev Hello dear community, I would like to discuss with you about the appearance of posts with multiple images on #Friedica. Here is my opinion:
The current way multiple #images are displayed is awful:



Yeah, you saw it by my embedded examples your self. What bothers me most is:

  • It just looks messy (especially when there is a mix of landscape and portrait format)
  • Besides the aesthetics, multiple images take a lot of room (when you do not use an add-on like show more)



My suggestion on which I would love to hear your opinion is to use a grid format like on #mastodon:


I would pitch a suggestion by adding a PR for a (from my point of view) "better" appearance based to this
tutorial. I do not like to use JS in general and would leave it out by determine the suited amount of columns in the backend.

But before I invest time on that, I want to hear your feedback. Thank You!

How To Create an Image Grid

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
#mastodon #images #friedica @Friendica Support @Friendica Developers
This entry was edited (2 years ago)
Grischa
I would absolutely subscribe to that. In fact I was thinking of doing the same.. 😀
Could be done in template or as addon.
Marek Bachmann
@Grischa I got my inspiration from your Fancybox add-on 😀
@Grischa
grischa
I like that (a lot)! 😊

And exactly for the fancybox addon I was thinking about a similar solution. But I have problems with the lightbox lib that is used in Friendica atm, for that my post in the developer forum just before yours was written. 😀

2 people reshared this

Marek Bachmann
Can you point me to the place / file where a post content is rendered, so that I can have a look on the complexity?

2 people reshared this

grischa
@grischa Well for my addon I did not had the necessity to find that place. I gets the content of a post via a hook.

For a theme I am not sure atm. I am poking myself. It depends. There seem to be different templates for different types of posts. wall_thread.tpl seems to be one.

It is more that I look into the developer console of my browser and try to find matching code in order to identify the template.
@Grischa

2 people reshared this

Marek Bachmann
Dear @grischa I look in your add-on to copy a good practice for using the hook approach to manipulate the representation of attached images which is quite helpful for me. As I played around with fancybox I encountered the little issue that the gallery only includes the attached images prior and including the one you clicked on. I created an issue on github for that, okay?

[fancybox addon] Image gallery is created for only the images <= clicked image · Issue #12331 · friendica/friendica

[fancybox addon] Image gallery is created for only the images

[x ] I have searched open and closed issues for duplicates Bug Description When you click on an image in a post with images and this image is not the last one attached, the fancybox gallery lets yo...
GitHub
@grischa

2 people reshared this

Jonathan Lamothe
Not really an answer to your question, but thank you for bringing "show more" to my attention.

2 people reshared this

Gidi Kroon
@Marek Bachmann Standard Mastodon crops the images (in the grid, but even if there is one) and I wouldn't like that; that should at least be configurable. But I do agree that the Mastodon, Pleroma, Twitter, Tumblr way of showing multiple images looks better than Friendica.

You can achieve a better look when you post multiple images by putting an empty line between the tags of the photos. The preview will help getting a better look.

If implementing a Mastodon like thing, especially if some form of cropping could occur, can I then also note that Mastodon's 'focal point' feature is really useful. It prevents photos from being cropped in embarrassing ways.
@Marek Bachmann

2 people reshared this

Marek Bachmann
What is also important for me to do better / in another way than mastodon:
I do not like to have a limit of four images in the grid without any notification that more images are attached, like currently on mastodon.

2 people reshared this

Spencer
I can see the value of this and generally like it. However, given that Friendica lends itself to larger posts than Mastodon, including posts that might use multiple images interspersed within the body of the text, I am wary of any solution that compiles all the images in a post and displays them as "attachments" at the end.

There are times when I want to use images in the middle of a post, and they'd become much less meaningful in a compiled cluster at the end of the post, even if they were in a much prettier grid.

2 people reshared this

Marek Bachmann
Very reasonable argument to consider. Thank you for this valuable feedback!

2 people reshared this

Marek Bachmann
A solution could be to distinguish between "inline" images and attached. BTW: Speaking of inserting images in a post at a certain position, I wanted to complain that this currently does not respect the cursor position, so that whenever I insert an image using the little image icon the bbcode apears at the very end of the input filed.

2 people reshared this

Hypolite Petovan
@Spencer @Marek Bachmann :friendica: Friendica detects images at the end and groups them in "attachments" as Mastodon does. However, we don't touch images interspersed between paragraphs.

Marek's feature could handle the attachment pictures without touching the post illustrations.
@Spencer @Marek Bachmann

2 people reshared this

Marek Bachmann
Yeah, here we go, it is so cool that there are already so many reasonable functions "hidden" in the code that sometimes are just not used / connected together. And your answer might also relate to:
https://friendica.mbbit.de/display/b25b9f4f-8963-893c-d882-8d2666919569

Marek Bachmann

2022-12-01 23:46:32


A solution could be to distinguish between "inline" images and attached. BTW: Speaking of inserting images in a post at a certain position, I wanted to complain that this currently does not respect the cursor position, so that whenever I insert an image using the little image icon the bbcode apears at the very end of the input filed.

2 people reshared this

Marek Bachmann
Dear @Hypolite Petovan might you be so kind and point me to the place in the code where I could best start to look around for rendering posts? Even though inspecting different usage locations of promising function names is a good opportunity to learn more about the code structure, it is also quite time-consuming and thus inefficient 😁
@Hypolite Petovan

2 people reshared this

Hypolite Petovan
@Marek Bachmann :friendica: The rendering of conversations is a little complex, but I can easily point you to the main template:
- templates/wall_thread.tpl
- theme/frio/templates/wall_thread.tpl
- theme/vier/templates/wall_thread.tpl

Where the attachments are prepared is in Model\Item: https://github.com/friendica/friendica/blob/e32654381b5715157f0302acd168837ddcf18eb4/src/Model/Item.php#L3043-L3054

friendica/Item.php at e32654381b5715157f0302acd168837ddcf18eb4 · friendica/friendica

Friendica Communications Platform. Contribute to friendica/friendica development by creating an account on GitHub.
GitHub
@Marek Bachmann

2 people reshared this

Marek Bachmann
@Hypolite Petovan thank you very much. Now I have everything to get started making myself familiar tomorrow. German time-zone recommends some sleep beforehand. 😀
@Hypolite Petovan

2 people reshared this

Hypolite Petovan
@Marek Bachmann :friendica: I've seen you up and active at very odd hours, better sleep!
@Marek Bachmann

2 people reshared this

Marek Bachmann
Bad habit from my times as an PhD student. 😕 Thx 😀

2 people reshared this

Marek Bachmann
Hi @Hypolite Petovan when ever you find the time, can you point me to the place in code where this attachment detection is already implemented? I was looking out for it, but was not able to find this distinction yet.
If there is a implementation, you can gladly add this info to the GitHub discussion since this might not so important for the readers here.

Am I right that there is no attachment feature for the creators of post, or is it? I never saw such an option yet.
My current assumption is that the term "attachment" refers solely to an implicit definition like "the media at the end of a post can be / is considered as attachments"

Show Images in posts in an image grid by MarekBenjamin · Pull Request #12334 · friendica/friendica

THIS IS NOT A FINAL PR. THIS IS A DRAFT FOR DISCUSSION. Hello, this is just a very first draft for this feature. I hope that we can discuss this PR and improve it over time. I still have a lot of q...
GitHub
@Hypolite Petovan

2 people reshared this

Marek Bachmann
From my inspection (which could easily be wrong) your cited code block only handles media for shared content, i.e. when I post something and include a link to another post.

friendica/Item.php at e32654381b5715157f0302acd168837ddcf18eb4 · friendica/friendica

Friendica Communications Platform. Contribute to friendica/friendica development by creating an account on GitHub.
GitHub

2 people reshared this

devadideva
@Mihai von Glogowatz @Marek Bachmann :friendica: You need to use the "img" tag to create a description.
@Marek Bachmann

2 people reshared this

Marek Bachmann
@Mihai von Glogowatz , @devadideva Totally agree with you. In any way, regarding the outlaying of multiple images issue and my current work on it, I can at least assure that images are included with the <img src="{{$image.preview}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}". So including the description is considered at his point.
The description for images from Mastodon are definitely obeyed on friendica. On Friendica you post you can use bbcode to add a description in this way:



-->
View from railway station Kassel Wilhelshöhe, Germany, platform 2, section B, heading southwards. You see the uncrowded edge of the platform and tracks, which are wet from the December snow rain. In the far background, a red regional train leaves from another platform to the south
@devadideva

2 people reshared this

Marek Bachmann
Just for my understanding: Did I use something outdated / wrong? I am not aware of an "old lightbox" 😀
As I understand your reply, your fancybox plugin is not loaded but something else called "lightbox"? Sorry for I am a little bit confused 😀

2 people reshared this

Marek Bachmann
Thank you for clarification. I suggest continuing the discussion on github for not scattering information at too many places.

2 people reshared this

grischa
Well yes.. I answered there already.. 😉

2 people reshared this

grischa
.. and as I said: I really would like to replace that old gallery with fancybox, too, but I still don't know how to disable the old one. It triggers no matter what I do..

2 people reshared this

Marek Bachmann
Hi @Grischa (for what ever reason your account is always suggested twice in the autocompletion for @...)

This exactly what I observe, I was asking and wondering in regard to this answer (don't want to link mrpetovan again and again 😁 ):
https://friendica.mrpetovan.com/display/735a2029-6763-893c-34b6-64d778674108

I think the overview is a little messy by now in this thread regarding who answers to what 😉.

Hypolite Petovan

2022-12-01 23:43:48


@Spencer @Marek Bachmann :friendica: Friendica detects images at the end and groups them in "attachments" as Mastodon does. However, we don't touch images interspersed between paragraphs.

Marek's feature could handle the attachment pictures without touching the post illustrations.

@Grischa

2 people reshared this

Marek Bachmann
Ah this was not expressed well from my side. What I meant was that the referred code block is for handling when a post was shared in another post. Like this one:
https://friendica.mbbit.de/display/b25b9f4f-1363-8e35-d4bb-ef7666696046

2 people reshared this

Hypolite Petovan
@Mihai von Glogowatz @Marek Bachmann :friendica: The relevant example is this:
[img=https://motley.club/photo/media/777978]The Friendica Logo[/img]
@Marek Bachmann

2 people reshared this

Marek Bachmann
Gerne. Es geht ganz einfach und mein Beispiel war oben etwas unübersichtlich. Das Format lautet:
[img="quelle"]Beschreibung des Bilds[/img]

2 people reshared this

Marek Bachmann
Gute Idee, was es schon gibt ist das ein Vervollständigungsvorschlag eingeblendet wird, wenn Du zum Beispiel "[im" (für den [img][/img]) anfängst zu tippen.

2 people reshared this

Marek Bachmann
Wenn Du ein eigenes Bild verlinken möchtest, geht es recht komfortabel mit diesem Button:


Bei externen Bildern müsstest Du den [img=quelle]Beschreibung[/img] Tag selbst erstellten, ja. Immerhin kannst Du die URL zum Bild selbst ja kopieren und einfügen 😀

Wenn ich Dich richtig verstehe, wünschst Du Dir die Möglichkeit "einfach externe Bilder mit einer Beschreibung einzufügen"?

2 people reshared this

Marek Bachmann
@Friendica Developers FYI, I have a PR (pull request) ready for review for the image grid:

Show Images in posts in an image grid by MarekBenjamin · Pull Request #12334 · friendica/friendica

Show Images in posts in an image grid by MarekBenjamin · Pull Request #12334 · friendica/friendica

THIS IS NOT A FINAL PR. THIS IS A DRAFT FOR DISCUSSION. Hello, this is just a very first draft for this feature. I hope that we can discuss this PR and improve it over time. I still have a lot of q...
GitHub
@Friendica Developers

2 people reshared this

Marek Bachmann
Das müsstest du jemandem Bitten der dir von Mastodon aus folgt da dein Profil eingeschränkt ist, also nicht von Dritten aufgerufen werden kann.

2 people reshared this

Marek Bachmann
Das sehe ich nur wenn ich dich auf libranet.de besuche:
Friendica Meldung: "eingeschränktes Profil"

2 people reshared this

Marek Bachmann
Ne das, oder eine entsprechende Meldung, sieht jeder der dir nicht folgt bzw. mit dir befreundet bist.
Das ist ist KEIN Fehler sondern einfach die Einstellung für dein Profil (ob die nun bewusst war oder nicht 😉 ).
Ich bin gerade unterwegs, und kann daher nicht gut nachgucken, aber irgendwo in deinen Einstellungen kannst du das ändern (wenn überhaupt gewünscht).

2 people reshared this

Marek Bachmann
Sorry, da habe ich mich unklar ausgedrückt. Mein Account hier ist ja auch Friendica und deshalb kann ich es nicht aus Sicht von Mastodon prüfen. Die, die es prüfen könnten müssen also bei Mastodon sein UND dir folgen.

2 people reshared this

Marek Bachmann
Sorry, jetzt hast Du mich abgehangen, 😀 welches Problem meinst Du jetzt genau?

2 people reshared this

Marek Bachmann
Tatsächlich beobachte ich auch gerade einige Probleme beim Teilen von Bildern, insbesondere außerhalb von Friendica also zum Beispiel bei Mastodon. Ich werde das mal bei Gelegenheit präziseren, was genau wo nicht geht und verlinke dich dann in einer neuen Meldung.
Dieser Thread ist ja eigentlich für das Image Grid gedacht. 😀

2 people reshared this

Marek Bachmann
Es ist noch nicht in stable verfügbar: So in der Art wird es aussehen:

https://friendica-dev.mbbit.de/display/fa8fe840-2163-95ff-eaad-d3d249610322

2 people reshared this

Marek Bachmann
Oh, ich sehe gerade deine Instanz läuft schon auf 2022.12-rc, je nachdem wann libranet.de sich den aktuellen Stand von Git holt, sollte es bald bei dir verfügbar sein. 😀

2 people reshared this

Marek Bachmann
Wie gesagt, genau darum geht es hier 😀
Das Image Grid wurde erst gestern in 2022.12-rc gemerged. Es kann sehr gut sein das dein Instanz-Admin @Steffen K9 🐰 die neuen Commits hoch nicht geholt hat.

Ich sehe aber gerade auch, dass die Bilder im eingebetten Link scheinbar tatsächlich nicht im Image Grid erscheinen. Kannst du mal auf den Link
https://friendica-dev.mbbit.de/display/fa8fe840-2163-95ff-eaad-d3d249610322
in meiner vorletzten Nachricht klicken und mir sagen, ob die Bilder dann im Grid sind? Danke.
@Steffen K9 🐰

2 people reshared this

Marek Bachmann
The image grid feature is now live in the 2022.12-rc branch.

❤ Thank you very much for all the feedback and support! ❤

One known issue is that the grid is not generated in "quote shared" post, and I did not find the time to analyze / address it (https://github.com/friendica/friendica/issues/12403).

Image Grid is not generated for embedded quote shared post · Issue #12403 · friendica/friendica

I have searched open and closed issues for duplicates Bug Description When you include another (friendica) thread (share quote) in your post via [share] bbcode, e.g,, [share]https://friendica-dev.m...
GitHub

2 people reshared this

Marek Bachmann
Bitte schön:



And Fancybox works seamlessly with it ❤

2 people reshared this

Hypolite Petovan
@Grischa @Marek Bachmann :friendica: Oh by the way https://github.com/friendica/friendica/issues/12413

😅

[fancybox] Only first column images open in gallery in new image grid feature · Issue #12413 · friendica/friendica

Cc @brockhaus It looks like the regular expression to convert image links into fancybox links needs a little refreshing. See new HTML structure:
GitHub
@Marek Bachmann @Grischa

2 people reshared this

Marek Bachmann
I am not able to confirm the issue. On my dev instance, clicking on any image in any of both column starts fancybox correctly (Tested it here: https://friendica-dev.mbbit.de/display/fa8fe840-2163-95ff-eaad-d3d249610322).
Can you provide an example? Thank You!

2 people reshared this

Hypolite Petovan
@Marek Bachmann :friendica: @Grischa Don't worry about it, it's an issue with the fancybox addon specifically, and you need an image grid with two columns, it doesn't affect inline images like you've shared.
@Marek Bachmann @Grischa

2 people reshared this

This website uses cookies to recognize revisiting and logged-in users. You accept the usage of these cookies by continuing to use this website.

⇧