Views and downloads count - Update database on view with lightbox and download - laravel
I've made a site with laravel and have a page where there are pictures that can be seen in hi-resolution via fancybox or downloaded. In the database i have counters for each action. and I do already have GET routes set up for the counting since they are used in other situations too.
for example: www.mysiste.com/somecode/someothercode/image/viewed
the simplified structure of each image is this.. This is called inside a for each loop.. i removed all styling and classes for better reading...
<div >
<div class="card" style="background-color: lightgray">
<div >
<a data-fancybox="gallery" href="/images/......../{{$photo->filename}}">
<img class="card-img" src="/images/......../thumb/thumb_{{$photo->filename}}">
</a>
</div>
<div class="card-footer">
<div>
<div>
<a download="{{$photo->filename}}" href="/images/......../{{$photo->filename}}">
<span>Download (Hi-Res)</span>
</a>
</div>
<div>
<a download="social_{{$photo->filename}}" href="/images/......../social_{{$photo->filename}}">
<span>Download (Social-Res)</span>
</a>
</div>
</div>
</div>
</div>
</div>
I would need that when they hit the download button it calls a certain URL in the background for upcounting.. (most important)
If possible I would like to hit another URL when the images are viewed fullscreen through fancybox.
how can this be done?
You can do something in the lines of:
<a data-fancybox="gallery" href="{{ route('photo.fancybox', ['photo' => $photo])}}">
<img class="card-img" src="/images/......../thumb/thumb_{{$photo->filename}}">
</a>
...
<a href="{{ route('photo.download', ['photo' => $photo])}}">
<span>Download (Hi-Res)</span>
</a>
PhotoController
public function download(Photo $photo){
$photo->downloadCount->increment();
return redirect('/images/......../'. $photo->filename);
}
public function fancybox(Photo $photo){
$photo->fancyboxCount->increment();
return redirect('/images/......../social_'. $photo->filename);
}
And make sure to register your new routes accordingly:
Route::get('photo/download', 'PhotoController#download')->name('photo.download');
Route::get('photo/fancybox', 'PhotoController#fancybox')->name('photo.fancybox');
Related
Viewing all photos of post using UIKIT using Lightbox Panel Options "items"
I am using UIKIT Lightbox to display post images like Facebook as below: Controller $postImages = postsImages::where('postId', $post->postId)->limit(3)->get(); Blade <div class="uk-child-width-1-3#m" uk-grid uk-lightbox="animation: slide"> #foreach ($postImages as $postImage) <div> <a class="uk-inline" href="{{$postImage->imageLink}}"> <img src="{{$postImage->imageLink}}"> #if ($loop->last && $post->hasImage > 3) <div class="uk-overlay-default uk-position-cover more"> <div class="uk-position-center"> <h1>+{{$post->hasImage - 3}}</h1> </div> </div> #endif </a> </div> #endforeach </div> I limited the image thumbnails to 3 and the rest will be shown as +number_of_remaining_photos same like Facebook. The problem is that when I click on a thumbnail to make it large and view the rest then I can see only those three images which I limited. I went through UIKIT lighbox documentation and I found items option but I don't know how to use it in order to view all the images of that post by creating another query like below: $postImages = postsImages::where('postId', $post->postId)->get(); to get all images there and showing it in the lightbox. P.S. I am not sure, that is item option for that purpose or not. )
This is a practical solution. 1- Make another query without limit. $postImagesAll = postsImages::where('postId', $post->postId)->get(); 2- Add data-uk-lightbox="{group:'my-group'}" attribute to the result of both queries like below and everything will work fine: <div class="uk-grid-collapse" uk-grid uk-lightbox="animation: slide;"> #foreach ($postImages as $postImage) <div> <a class="uk-inline" href='/storage/posts/{{$postImage->imageLink}}' data-uk-lightbox="{group:'my-group'}"> <img src="{{$postImage->imageLink}}"/> #if ($loop->last && $post->hasImage > 3) <div class="uk-overlay-default uk-position-cover more"> <div class="uk-position-center"> <h1>+{{$post->hasImage - 3}}</h1> </div> </div> #endif </div> </a> </div> #endforeach #foreach ($postImagesAll as $postImage) <a class="uk-hidden" href="{{$postImage->imageLink}}" data-uk-lightbox="{group:'my-group'}"></a> #endforeach </div>
Cannot find parent element in DOM tree containing attribute: [wire:id]
I am laravel developer and developing a real time chat room using liveware , i am trying to open chat when i click to user but unfortunatly i am getting error https://flareapp.io/share/OmVDe437#F47 please help me how can resolved that ? thank u. I am also getting error in console. app\Http\Livewire\Messaging.php public $selectedConservation; public function mount(){ $this->selectedConservation = Conservation::query() ->where('sender_id',Auth::user()->id) ->orwhere('reciever_id',Auth::user()->id) ->first(); } public function viewMessages($conservationsId){ $this->selectedConservation = Conservation::findorFail($conservationsId); } public function render() { $conservation = Conservation::query() ->where('sender_id',Auth::user()->id) ->orwhere('reciever_id',Auth::user()->id) ->get(); return view('livewire.messaging',[ 'conservation' => $conservation, ]); } resources\views\livewire\messaging.blade.php #foreach ($conservation as $conservations) <a href="#" wire:click.prevent="viewMessages({{ $conservations->id}} )"> <div class="user-card rounded bg-dark bg-opacity-10 mb-1"> <div class="mx-2"> <div class="d-flex pt-3"> <img class="rounded-circle" width="48px" height="48px" src="{{Config('wfh.file').$conservations->reciever->avator}}" alt=""> <div class="notification-text ms-3 w-100"> <span class="username fw-bold">{{$conservations->reciever->full_name}}</span> <span class="float-end small"></span> <p class="mt-1 text-muted">You: </p> </div> </div> </div> </div> </a> #endforeach
Check out the documentation on Dom Diffing Issues. It looks like you need to add a wire:key="{{ $conversations->id }}" attribute into your a tag so that Livewire can track changes to the list of conversations.
KnockoutJS elements not rendered once loaded via Jquery Ajax function
I have loaded a sidebar over ajax however this html uses knockoutJS to render completely. I am wondering how to execute the KnockoutJs portions of this code. The content below is loaded via jQuery ajax function and contains a number of knockout elements as well as some X Magento Init type scripts: <div class=\"block filter\" id=\"layered-filter-block\" data-mage-init='{\"collapsible\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": false, \"collateral\": { \"openedState\": \"filter-active\", \"element\": \"body\" } }}'> <div class=\"block-title filter-title\" data-count=\"0\"> <strong data-role=\"title\">Shop By<\/strong> <\/div> <div class=\"block-content filter-content\"> <strong role=\"heading\" aria-level=\"2\" class=\"block-subtitle filter-subtitle\">Shopping Options<\/strong> <div class=\"filter-options\" id=\"narrow-by-list\" data-role=\"content\" data-mage-init='{\"accordion\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": [0,1,2], \"multipleCollapsible\": true}}'> <div data-role=\"collapsible\" class=\"filter-options-item\"> <div data-role=\"title\" class=\"filter-options-title\">Category<\/div> <div data-role=\"content\" class=\"filter-options-content\">\n<ol class=\"items\"> <li class=\"item\"> <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=143&q=ice+machine\">Front of House <span class=\"count\">2<span class=\"filter-count-label\">items<\/span><\/span><\/a> <\/li> <li class=\"item\"> <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=182&q=ice+machine\">Bar Supplies <span class=\"count\">4<span class=\"filter-count-label\">items<\/span><\/span><\/a> <\/li> <li class=\"item\"> <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=257&q=ice+machine\">Catering Equipment<span class=\"count\">111<span class=\"filter-count-label\">\n items <\/span><\/span>\n <\/a>\n <\/li>\n <li class=\"item\">\n <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=342&q=ice+machine\">\n Warewashing <span class=\"count\">\n 3 <span class=\"filter-count-label\">\n items <\/span><\/span>\n <\/a>\n <\/li>\n <li class=\"item\">\n <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=521&q=ice+machine\">\n Catering Equipment Offers <span class=\"count\">\n 1 <span class=\"filter-count-label\">\n item <\/span><\/span>\n <\/a>\n <\/li>\ <\/ol> <\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\"> <div data-role=\"title\" class=\"filter-options-title\">Brand<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"> <div data-bind=\"scope: 'brandFilter'\"> <!-- ko template: getTemplate() --> <!-- \/ko --> <\/div> <script type=\"text\/x-magento-init\"> {\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"brandFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\\/js\\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":true,\"ajaxLoadUrl\":\"http:\\\/\\\/www.domain.com\\\/catalog\\\/navigation_filter\\\/ajax\\\/?ajax=1&filterName=brand&q=ice+machine\",\"items\":[{\"label\":\"Scotsman\",\"count\":41,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Scotsman&q=ice+machine\",\"is_selected\":false},{\"label\":\"Hoshizaki\",\"count\":15,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Hoshizaki&q=ice+machine\",\"is_selected\":false},{\"label\":\"Ice-o-matic\",\"count\":12,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Ice-o-matic&q=ice+machine\",\"is_selected\":false},{\"label\":\"Blue Ice\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Blue+Ice&q=ice+machine\",\"is_selected\":false},{\"label\":\"Graupel\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Graupel&q=ice+machine\",\"is_selected\":false},{\"label\":\"Nemox\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Nemox&q=ice+machine\",\"is_selected\":false},{\"label\":\"Manitowoc\",\"count\":6,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Manitowoc&q=ice+machine\",\"is_selected\":false},{\"label\":\"Polar Refrigeration\",\"count\":5,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Polar+Refrigeration&q=ice+machine\",\"is_selected\":false},{\"label\":\"Longo & Co\",\"count\":4,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Longo+%26+Co&q=ice+machine\",\"is_selected\":false},{\"label\":\"Beaumont\",\"count\":3,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Beaumont&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\">\n <div data-role=\"title\" class=\"filter-options-title\">Power<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"><div data-bind=\"scope: 'power_ddFilter'\">\n <!-- ko template: getTemplate() --> <!-- \/ko -->\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n {\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"power_ddFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\\/js\\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":false,\"ajaxLoadUrl\":\"http:\\\/\\\/www.domain.com\\\/catalog\\\/navigation_filter\\\/ajax\\\/?ajax=1&filterName=power_dd&q=ice+machine\",\"items\":[{\"label\":\"13 Amp (Plug)\",\"count\":111,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&power_dd=13+Amp+%28Plug%29&q=ice+machine\",\"is_selected\":false},{\"label\":\"1 Phase (Hard Wired)\",\"count\":2,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&power_dd=1+Phase+%28Hard+Wired%29&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\">\n <div data-role=\"title\" class=\"filter-options-title\">Price<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"><div class=\"smile-es-range-slider\" data-role=\"range-price-slider-price\">\n <div data-role=\"from-label\"><\/div>\n <div data-role=\"to-label\"><\/div>\n <div data-role=\"slider-bar\"><\/div>\n <div class=\"actions-toolbar\">\n <div data-role=\"message-box\"><\/div>\n <div class=\"actions-primary\">\n <a class=\"action primary small\" data-role=\"apply-range\">\n <span>OK<\/span>\n <\/a>\n <\/div>\n <\/div>\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n { \"[data-role=range-price-slider-price]\" : { \"rangeSlider\" : {\"minValue\":1,\"maxValue\":6091,\"currentValue\":{\"from\":1,\"to\":6091},\"fieldFormat\":{\"pattern\":\"\\u00a3%s\",\"precision\":2,\"requiredPrecision\":2,\"decimalSymbol\":\".\",\"groupSymbol\":\",\",\"groupLength\":3,\"integerRequired\":false},\"intervals\":[{\"value\":1,\"count\":1},{\"value\":2,\"count\":1},{\"value\":3,\"count\":1},{\"value\":40,\"count\":1},{\"value\":60,\"count\":1},{\"value\":64,\"count\":1},{\"value\":150,\"count\":1},{\"value\":179,\"count\":1},{\"value\":190,\"count\":1},{\"value\":242,\"count\":1},{\"value\":291,\"count\":1},{\"value\":325,\"count\":1},{\"value\":355,\"count\":2},{\"value\":395,\"count\":1},{\"value\":465,\"count\":1},{\"value\":472,\"count\":1},{\"value\":515,\"count\":1},{\"value\":520,\"count\":1},{\"value\":535,\"count\":1},{\"value\":555,\"count\":1},{\"value\":577,\"count\":1},{\"value\":585,\"count\":1},{\"value\":599,\"count\":1},{\"value\":605,\"count\":2},{\"value\":615,\"count\":1},{\"value\":640,\"count\":1},{\"value\":658,\"count\":1},{\"value\":685,\"count\":1},{\"value\":705,\"count\":1},{\"value\":730,\"count\":1},{\"value\":745,\"count\":2},{\"value\":785,\"count\":1},{\"value\":805,\"count\":1},{\"value\":830,\"count\":1},{\"value\":895,\"count\":2},{\"value\":925,\"count\":1},{\"value\":965,\"count\":1},{\"value\":970,\"count\":1},{\"value\":990,\"count\":2},{\"value\":1030,\"count\":1},{\"value\":1065,\"count\":1},{\"value\":1080,\"count\":1},{\"value\":1085,\"count\":1},{\"value\":1095,\"count\":1},{\"value\":1105,\"count\":1},{\"value\":1130,\"count\":1},{\"value\":1155,\"count\":1},{\"value\":1225,\"count\":1},{\"value\":1235,\"count\":1},{\"value\":1240,\"count\":1},{\"value\":1259,\"count\":1},{\"value\":1310,\"count\":1},{\"value\":1360,\"count\":1},{\"value\":1365,\"count\":1},{\"value\":1450,\"count\":1},{\"value\":1485,\"count\":1},{\"value\":1495,\"count\":1},{\"value\":1510,\"count\":1},{\"value\":1580,\"count\":2},{\"value\":1605,\"count\":2},{\"value\":1685,\"count\":1},{\"value\":1710,\"count\":1},{\"value\":1779,\"count\":1},{\"value\":1785,\"count\":1},{\"value\":1865,\"count\":1},{\"value\":1870,\"count\":1},{\"value\":1885,\"count\":1},{\"value\":1890,\"count\":1},{\"value\":1970,\"count\":1},{\"value\":1995,\"count\":1},{\"value\":2000,\"count\":1},{\"value\":2050,\"count\":1},{\"value\":2130,\"count\":1},{\"value\":2199,\"count\":1},{\"value\":2220,\"count\":1},{\"value\":2345,\"count\":1},{\"value\":2350,\"count\":1},{\"value\":2360,\"count\":1},{\"value\":2405,\"count\":1},{\"value\":2415,\"count\":1},{\"value\":2445,\"count\":1},{\"value\":2450,\"count\":2},{\"value\":2480,\"count\":1},{\"value\":2500,\"count\":1},{\"value\":2530,\"count\":1},{\"value\":2565,\"count\":1},{\"value\":2570,\"count\":1},{\"value\":2595,\"count\":1},{\"value\":2695,\"count\":1},{\"value\":2730,\"count\":1},{\"value\":2825,\"count\":1},{\"value\":2850,\"count\":1},{\"value\":2950,\"count\":1},{\"value\":2995,\"count\":1},{\"value\":3010,\"count\":1},{\"value\":3025,\"count\":1},{\"value\":3145,\"count\":1},{\"value\":3205,\"count\":1},{\"value\":3295,\"count\":1},{\"value\":3300,\"count\":1},{\"value\":3485,\"count\":1},{\"value\":3495,\"count\":1},{\"value\":3580,\"count\":1},{\"value\":4015,\"count\":1},{\"value\":4075,\"count\":1},{\"value\":4305,\"count\":1},{\"value\":4310,\"count\":1},{\"value\":4595,\"count\":1},{\"value\":4620,\"count\":1},{\"value\":5250,\"count\":1},{\"value\":5355,\"count\":1},{\"value\":6090,\"count\":1}],\"urlTemplate\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&price=<%- from %>-<%- to %>&q=ice+machine\",\"messageTemplates\":{\"displayCount\":\"<%- count %> products\",\"displayEmpty\":\"No products in the selected range.\"},\"rate\":1} } } <\/script> <\/div> <\/div> <\/div> <\/div> <\/div> These are then added to a block on my page via html jQuery method: $(sidebarBlock).html(this.filters); Looking at the DOM I cannot actually see the scripts however they are there in response when reviewing with console.log(). Similarly the below shows the scripts are present: $(sidebar).find("script").each(function() { console.log("found a script"); } I have tried to use .trigger('contentUpdated'); like below: document.getElementById("layered-filter-block").innerHTML = this.filters; $(sidebarBlock).trigger('contentUpdated'); and: $(sidebarBlock).html(this.filters); $(sidebarBlock).trigger('contentUpdated'); and by reapplying bindings for knockout: ko.cleanNode($('#layered-filter-block')); ko.applyBindings($('#layered-filter-block')); The above throws an error about bindings already being applied however but I have used cleanNode before to unbind however error persists.
This fixed issue for me: $(sidebarBlock).applyBindings(); https://codeblog.experius.nl/magento-2-uicomponent-reinit-ajax-reload/
I can't print images with laravel and vue js
I'm getting stuck in an ecommerce development project using Laravel and Vue. I can't make the images appear dynamically in the index view of the product. I'm able to upload and print the images in the show view and these are stored in storage / app / images. The problem is that the image_url attribute of a product is nullable so it may or may not have an image and the idea is to show them when they have one. Here is the code of the component ProductCardComponete.vue that is where I develop the code itself. <template lang="html"> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="card"> <header class="bg-dark padding"> </header> <div class="justify-content-center"> <!-- <img v-for="product in products" v- if="product.extension" :src="'/productos/images/'+product.id+product.extension"> --> <img :src="'/productos/images/34.jpeg'" class="card-img-top"> </div> <div class="card-body padding"> <h2 class="card-title"> <a :href="'/productos/'+product.id"> {{product.title}} </a> </h2> <h4 class="card-subtitle">{{product.humanPrice}}</h4> <p class="card-text">{{product.description}}</p> </div> </div> </div> </template> <script> export default { props:{ product: { type: Object } } } </script> Of course, when I put the route in a static way, it works. But I don't know how I could arrive at the solution to show it dynamically and the way of showing the image if the product has one. Finally here is a link to the github Repo of the project just in case. Github Repo
Images should be saved in storage/app/public/ and you should make a symlink so that you can access storage folder in public folder. Otherwise you will stuck in accessing images. Read this official doc.
Laravel 5.6 how to show few pictures in one article
Good afternoon, I am working on the blog where I have detail of the article and want to show few pictures. What I am getting at the moment: As you can see I am getting the content and after the content pictures. Here is also the code of the blade. <div class="container"> #foreach($articles as $article) <article> <h1 class="title is-1">{{$article->title}}</h1> #foreach($article->images as $image) <figure class="image is-128x128"> <img src="{{$image->path}}" alt="{{$image->title}}"> </figure> #endforeach <p>{{$article->content}}</p> </article> #endforeach </div> Because I am getting a object I cannot split the pictures. .
It was rather hard to figure out what you want, but I'm quite sure I finally got the question. What you wanna do is something like this: <div class="container"> #foreach($articles as $article) <article> <h1 class="title is-1">{{$article->title}}</h1> #if(count($article->images) > 0) <figure class="image is-128x128"> <img src="{{$article->images->first()->path}}" alt="{{$article->images->first()->title}}"> </figure> #endif <p>{{$article->content}}</p> #if(count($article->images) > 1) #foreach($article->images->slice(1) as $image) <figure class="image is-128x128"> <img src="{{$image->path}}" alt="{{$image->title}}"> </figure> #endforeach #endif </article> #endforeach </div> This will not only give you headline > image 1 > content > remaining images, it will also make sure you only print images when there are actually some available. The $article->images->slice(1) within the second #if() will ensure we are not using the first image a second time.
Make sure $image->path is the correct to the image file (if it's an url, skip this point). You can check by echoing it or just dd($image->path). For the image to be accessed, it needs to be on the public folder of laravel If you wish to have the files in the storage folder and have it accessed publicly, you'll need to create a symlink https://laravel.com/docs/5.6/filesystem