Pop out image modal

0E800

Not sure if this is a flagrow/upload or a general core feature request.

It would be nice if all user posted images had the ability to pop out when hovered over or clicked on. Anything besides having to download or open image in new tab in order to view larger.

I'll be experimenting in the custom css box in the mean time.

Best regards,

clarkwinkelmann

IMO this should probably go into another extension that makes changes to the way posts are displayed.

It may not even be hard to add a lightbox plugin to do that.

The problem I see with such extension is that it might interfere with the media embed ones, if it tries to do things with an image added/managed by another extension ?

0E800

This is an excellent reference for a css only lightbox.

https://codepen.io/designcouch/pen/DEkcf

I want to find a way to include the .lightbox css to any image that is uploaded using flagrow/upload.

clarkwinkelmann

I don't know if the :class=foo syntax works with the Markdown parser on this forum ? If it works you could change the upload extension to add something like:

![image](/some/url)
:class=lightbox

But if this does not work you will need a new extension ?

gurjyot

@0E800 are you working on image lightbox? It would be a great addition to Flarum.

0E800

gurjyot
Unfortunately my 5 year old kindergartner and my new job take up a most of my waking hours.
I will try to attempt this but please don't hold your breath ?

PipsJoker

Hi all,

I use the FancyApps to create the pop up image. Here's what I did:

Make sure you are using the latest version of this extension

composer update flagrow/upload
php flarum cache:clear

Put these codes to Custom Header

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

Change the codes in the image-preview.blade.php template. It is located in the /vendor/flagrow/upload/resources/templates

<a data-fancybox="gallery" href="{@url}" >
	<img src="{@url}" title="{@base_name}" />
</a>

On the File Upload setting make sure you choose Complete image preview template

If it is not working, you may need to clear the cache again.

Hope this help. Best regards.

Pollux

PipsJoker Change the codes in the image-preview.blade.php template. It is located in the /vendor/flagrow/upload/resources/templates

We should not change core files or files from extensions we don't maintain ourself, otherwise we will predictably run into major problems once parts of the software will be reinstalled, reactivated or updated. Accordingly we should not encourage others to do so.

Pollux

If you are thinking about extending the upload extension, this post might be of help for you:

PipsJoker

I don't recommend editing core files like PipsJoker suggested in his post, but he shows how it could be done. Now we just need someone who extends the upload extension or submits a pull request.

PipsJoker

Pollux

I dont know about this. Thank you for reminding me.

luceos

PipsJoker I'd love to have that FancyApps in the uploads extension, feel free to suggest it as an issue or better yet open a PR ?

jordanjay29

auqdnvia please stick to English so we can assist you.

Eldenroot

Would be nice to create an extesion with FancyBox ?

MikeJones

This would be awesome! Would love it to work for images not uploaded too, pictures, where people use the links, would also be nice.