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:
![](https://motley.club/photo/media/736965)
Yeah, you saw it by my embedded examples your self. What bothers me most is:
My suggestion on which I would love to hear your opinion is to use a grid format like on #mastodon:
![](https://motley.club/photo/preview/1024/736963)
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!
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
This entry was edited (2 years ago)
7 people like this
3 people reshared this
Grischa
•Could be done in template or as addon.
Marek Bachmann
•grischa likes this.
grischa
•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
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
grischa
•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.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•[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
GitHub2 people reshared this
Friendica Developers and Friendica Support reshared this.
Jonathan Lamothe
•Marek Bachmann likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Gidi Kroon
•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 likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•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.
Cochise likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Spencer
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 like this
Marek Bachmann and Cochise like this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•Cochise likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Hypolite Petovan
•Marek's feature could handle the attachment pictures without touching the post illustrations.
2 people like this
Spencer and Cochise like this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•https://friendica.mbbit.de/display/b25b9f4f-8963-893c-d882-8d2666919569
Marek Bachmann
2022-12-01 23:46:32
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
Hypolite Petovan
•-
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-L3054friendica/Item.php at e32654381b5715157f0302acd168837ddcf18eb4 · friendica/friendica
GitHubMarek Bachmann likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
Hypolite Petovan
•Marek Bachmann likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•Hypolite Petovan likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•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
GitHub2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•friendica/Item.php at e32654381b5715157f0302acd168837ddcf18eb4 · friendica/friendica
GitHub2 people reshared this
Friendica Developers and Friendica Support reshared this.
devadideva
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•<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:
-->
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•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
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
grischa
•Marek Bachmann likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
grischa
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•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
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•https://friendica.mbbit.de/display/b25b9f4f-1363-8e35-d4bb-ef7666696046
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Hypolite Petovan
•Marek Bachmann likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•[img="quelle"]Beschreibung des Bilds[/img]
Hypolite Petovan likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•[img][/img]
) anfängst zu tippen.2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•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
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•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
GitHubHypolite Petovan likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•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
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•Dieser Thread ist ja eigentlich für das Image Grid gedacht. 😀
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•https://friendica-dev.mbbit.de/display/fa8fe840-2163-95ff-eaad-d3d249610322
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•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 in meiner vorletzten Nachricht klicken und mir sagen, ob die Bilder dann im Grid sind? Danke.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•❤ 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
GitHubHypolite Petovan likes this.
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•And Fancybox works seamlessly with it ❤
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Hypolite Petovan
•😅
[fancybox] Only first column images open in gallery in new image grid feature · Issue #12413 · friendica/friendica
GitHub2 people reshared this
Friendica Developers and Friendica Support reshared this.
Marek Bachmann
•Can you provide an example? Thank You!
2 people reshared this
Friendica Developers and Friendica Support reshared this.
Hypolite Petovan
•2 people reshared this
Friendica Developers and Friendica Support reshared this.