unkown.persone's avatar

Mix PHP and Javascript in Laravel

down vote favorite I am using the PhotoSwipe in my project to display Photos in a cool progressive way.

I want to iterate through a relationship between and arrangements and images. I can print out with console.log() the number of images. It works.

1 Question: I want to dynamically fetch the count of images and display them in items: HOW?

2 Question: How can I retrieve the dimensions of a photo dynamically, like the width and hight? I assume there might be some method like getOriginalHight() After that I want to assign the value to w: and h:

function showImages() {
            let pswpElement = document.querySelectorAll('.pswp')[0];

            // build items array
            for (i = 0; i < "{{count($arrangement->images)}}"; i++) {
                console.log(i);
            }
            let items = [
                {
                    src: '/storage/arrangement_images/{{$arrangement->images[1]->file_name}}',
                    w: 500,
                    h: 281
                },
                {
                    src: 'https://placekitten.com/1200/900',
                    w: 1200,
                    h: 900
                }
            ];

            // define options (if needed)
            let options = {
                // optionName: 'option value'
                // for example:
                index: 0 // start at first slide
            };

            // Initializes and opens PhotoSwipe
            let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
            gallery.init();
        }
0 likes
5 replies
cre3z's avatar

Is there a reason you are not just doing an ajax request on the page to fetch and load the data?

unkown.persone's avatar

@cre3z actually no there is no reason, except that I tried and I didn't make it. I am not that familiar with it

cre3z's avatar

can you show us what you tried? with ajax I mean, otherwise why not just send you array of images through to the view and show them there? In your array you can also use total() to get your total images count.

unkown.persone's avatar

This is the controller

// Collection to be sent
        $images = new Collection();

        // Empty Object
        $image = new \stdClass();

        foreach ($arrangement->images as $img) {
            $image->src = $img->file_name;
            $image->width = $img->width;
            $image->height = $img->height;

            $images->push($image);
        }
        $view = View::make('arrangements.show', compact('arrangement'))->render();
        return response()->json(array($images, 200, $view));

This is the Vue component

export default {
    data () {
        return {
            items: [],
            gallery: null
        };
    },
    methods: {
        fetchImages() {
            /**
             your controller could return somethnig like [image, image, image] where each image is an associative array with src, height, width
             */

            axios.get('/arrangements/2')
                .then((response) => {
                console.log(response);
                    response.data.forEach((image) => {
                        let items = [];
                        let item = {src: image.src, height: image.height, width: image.width};
                        items.push(item);
                        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
                        gallery.init();
                    })
                })
                .catch(error => {
                    console.log(error);
                });
        },
        computed: {
            count () {
                return items.length;
            }
        }

    }

    };
1 like

Please or to participate in this conversation.