Post Galleries

datitisev

Post Galleries

Add image galleries to your Flarum posts.

Compatible with ianm/synopsis and TextFormatter's Autoimage plugin.
Uses the Swiper library
Does not require additional syntax.
- Simply have a line break between your images to convert them into a gallery (see examples at datitisev)

Sponsored The creation of this extension was sponsored by @Darkle.

Installation

Install with composer:

composer require datitisev/flarum-post-galleries:"*"

Updating

composer update datitisev/flarum-post-galleries:"*"
php flarum migrate
php flarum cache:clear

Links

Hari

datitisev this extension is nice if you get time could you implement something like this too?

I am not sure this is related to this extension or not but i am using drakle fancy box it would be nice to display all images like this if the user clicks a in-line popup will be opened. drakle fancy box shows a gallery-like view for images.

https://gvectors.com/product/wpdiscuz-media-uploader/

kebindong

datitisev
how to edit css to center pictures in gallery ? cuz pictures on left in PC.

thank you

and I think this isn't compatible with blog https://extiverse.com/extension/v17development/flarum-blog

can you fix?

murdocklawless

installed to my test site and activate it but I couldn't find how to create galleries?

datitisev

murdocklawless My apologies, forgot to include this information.

This post takes any images that are separated by a single newline (this might require the Markdown extension? not exactly sure) and merges them into a gallery.

For example, the following 2+ images would be converted into a gallery (this can also be BBCode or plain image links w/ Autoimage enabled).

// gallery
![img1](img1.png)
![img2](img2.png)

// no gallery
![img1](img1.png)

![img2](img2.png)

// no gallery
![img1](img1.png) ![img2](img2.png)

screenshot

murdocklawless

datitisev images can be links or call from the local storage?

edit : links are working, great extension.

ash3T

dragsugur Thanks for taking the time and working on the codes.

Now, it seems that the extension will also lead to other images, which does not use the code to turn to galleries.

datitisev // gallery

// no gallery

// no gallery

These photo used the default upload image code(Please check the following screenshot):

and turns into this:

But it suppose to be like this:

😃

Justoverclock

Amazing extension

datitisev

Hari Not sure exactly which part of this you want. You mean small image thumbnails that then show full image when clicked?

I don't know how much more I'm going to add to this ext in terms of features, if anything.

Hari

datitisev You mean small image thumbnails that then show full image when clicked?

Yes yes

Darkle

Hari This is probably work for another extension because it wouldn't actually be using anything of this one, such as the Swiper library.

From what you describe it would be the fancybox extension + another extension that would be in charge of displaying thumbnails when there are multiple images, which in fact if you don't mind always displaying thumbnails (whether there is one or multiple images) could be done directly with CSS.

Hari

Darkle could be done directly with CSS.

What you said is correct, in my first post also i have mentioned as i am not sure which extention need to be extended.

If simple CSS can do the job yes why not. Could you please share the CSS for the same

If possible add toggle on and off this CSS feature in fancy box 😍 (well this is two much to expect, just help me with CSS i will add manually not sure how the injection would work in mobile and desktop)

Darkle

Hari I don't have too much time right now, but it should be something like this with CSS, put the image links inline without line breaks and add a size to the img with this:

.post-body img{max-width: 230px!important;}

Hari

Darkle i have tried this CSS it is not working, any suggestions?

hrvoje_hr

Does anybody successfully use this with the Imgur Upload extension?

EDIT: Actually, Galleries work just fine with Imgur Upload and FoF Upload, but the issue is with Rich Text Editor extension which separates text into new <p> lines, and that's why this extension doesn't create galleries

hrvoje_hr

Actually, this extension doesn't work on my forum even without Rich Text Editor. It works only in post preview, but as soon as the page is refreshed images are again one under another.

Anyone with a similar issue? @Darkle?

EDIT: Finally found the issue. If anyone use Imgur Upload extension be sure to set the Embed type as a "Preview (1024px)"

Darkle

hrvoje_hr I would recommend you to disable darkle/fancybox and see if that solves the problem without making any other changes, I have recently detected that the image BBCodes cause problems when having darkle/fancybox and datitisev/flarum-post-galleries enabled at the same time, I hope I can fix it somehow soon, it's the reason why I still don't consider fancybox compatible with post galleries 😕

ash3T

hrvoje_hr

Thanks for sharing the solution.

However, did you mean to change the settings like these?

But nothing changes afterwards. I did clear the cache.

I also disable darkle/fancybox, I still cannot see the image galleries.

hrvoje_hr

ash3T i can't see the first image, but settings from other one are not from Imgur extension

ash3T

Hi, I wish to use Post Galleries on my flarum site, after I enabled it. Some emoji will turn like this:

This is the html

But if I turn it off, it becomes normal again:

I don't know how can I slove this, but wonder can I fix this by editing CSS for emoji images, or if there are characters between <img>, so it won't have the gallery effect? Just my thoughts.

dragsugur

ash3T yes, it seems like this is a bug.
you can use markdown code till it's fixed. like this:

##### 📆 '##### 📆

ash3T

dragsugur Thanks for your reply.

When you say "use markdown code", do you mean adding #### before the emoji? The fonts after emoji now turn to bold. Yes. Now it won't have the all the emojis turns into slides. 🙂 However, There were many old posts. There is no way I can change all the posts which use emojis like this.

Thanks very much.