Tommy001

Tommy001

Member Since 2 Years Ago

Experience Points
4,880
Total
Experience

120 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
31
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 1
4,880 XP
Feb
17
3 months ago
Activity icon

Replied to Resize And Optimize Images Upon Upload With Laravel Filemanager

In case anyone else is as confused about this as I was, I will share the solution that finally worked. Sti3bas above put me on the right track. This is the code that worked for me:

The code in app/Providers/EventServiceProvider.php:

namespace App\Providers;

use Illuminate\Support\Facades\Event;
use UniSharp\LaravelFilemanager\Events\ImageWasUploaded;
use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;

class EventServiceProvider extends ServiceProvider
{
    /**
     * The event listener mappings for the application.
     *
     * @var array
     */
    protected $listen = [
        'App\Events\Event' => [
            'App\Listeners\EventListener',
        ],
        ImageWasUploaded::class => [
         '\App\Listeners\ResizeUploadedImage',
     ],       
 ];

And in my event listener app\Listeners\ResizeUploadedImage.php (I decided to use 1100 px maximal width):

namespace App\Listeners;

use UniSharp\LaravelFilemanager\Events\ImageWasUploaded;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Contracts\Queue\ShouldQueue;
use Image;

class ResizeUploadedImage
{
    /**
     * Create the event listener.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Handle the event.
     *
     * @param  object  $event
     * @return void
     */
    public function handle(ImageWasUploaded $event)
    {
        $path = $event->path();
        $image = Image::make($path);
        if($image->width() < 1100) {
            return;
        }
        // resize the image to a width of 1100 and constrain aspect ratio (auto height)
        $image->resize(1100, null, function ($constraint) {
            $constraint->aspectRatio();
        })->save($path);
    }
}
Feb
16
3 months ago
Activity icon

Replied to Resize And Optimize Images Upon Upload With Laravel Filemanager

Sti3bas; My first tryout ended with an error message after image upload (Object object).

screen dump

If I can't figure it out I will post a question in the Support section. Thanks a lot again.

Activity icon

Replied to Resize And Optimize Images Upon Upload With Laravel Filemanager

Tray2: Since I want to automatically resize images uploaded with Laravel Filemanager, I would still have to listen for upload events from Laravel Filemanager? That's what you meant? Then I can use Intervention in my custom UploadListener class to resize the image. Not sure though exactly where to put my custom code to do this.

Activity icon

Replied to Resize And Optimize Images Upon Upload With Laravel Filemanager

Thanks Sti3bas! I will give it a read. Sounds like the way to go.

Activity icon

Started a new Conversation Resize And Optimize Images Upon Upload With Laravel Filemanager

I am using Laravel Filemanager on my 5.7 site. I find this package really useful and it ticks all boxes except one. It would be great if images could be resized automatically on upload, if they are bigger than for ex. 1000 px width. Any ideas of how I can accomplish that? Anyone who has already done it?

Jan
28
3 months ago
Activity icon

Replied to $ Is Not Defined Vs #app Is Not Found

Nakov: thanks I wrote my last comment before I saw your post. I will do as you suggest. Thanks for taking time.

Activity icon

Replied to $ Is Not Defined Vs #app Is Not Found

I suppose I have to comment out everything about jquery in the resources/assets/js/app.js and then recompile and just load jQuery the old fashioned way in the head section separately?

Activity icon

Replied to $ Is Not Defined Vs #app Is Not Found

Nakov: when I try to use defer on the app.js script, it's the same thing. Vue starts working and the Jquery scripts stops working.

Activity icon

Replied to $ Is Not Defined Vs #app Is Not Found

skauk: Jquery is installed and is working as long as I load app.js before the scripts depending on it. My question is how I can load jquery BEFORE the scripts in the DOM has loaded, and at the same time load the compiled `app.js* just before the ending BODY tag.

Activity icon

Replied to $ Is Not Defined Vs #app Is Not Found

Nakov: Well, just below the starting body tag I do have the wrapper as you suggest. So the whole content has such a wrapper with the "#app" id. The Vue problem begins when I call the compiled app.js before the DOM has been loaded. Vue does work when I call app.js after the DOM has loaded. But at that point my Jquery depending scripts stops working, because they need Jquery to be loaded before they are called. So it's one or the other :-)

Activity icon

Started a new Conversation $ Is Not Defined Vs #app Is Not Found

I am sure this question is really silly, but please bare with me. I would like to learn the best way to solve this problem.

In the head section of my layouts/app.blade.php I call the public/js/app.js script that has been compiled by Laravel-Mix. Among other things Jquery is added in that file.

So far so good, everything works. BUT, now I want to add my first Vue components using the example component as a starting point, provided as default in the Laravel project.

When trying this new Vue function out the console complains about not finding the "#app" element. So instead of calling public/js/app.js in the head section I move that call to a position just before the ending body tag, after the content is rendered.

Now, the Vue function starts to work BUT all custom scripts depending on jQuery in the blade templates stops working and the console complains about $ is not defined.

So I figure that I need to load Jquery in the head section and public/js/app.js just before the body tag. But that would mean that I load Jquery twice. Is there a standard solution to this?

Jan
25
4 months ago
Activity icon

Replied to Unisharp Laravel Filemanager Can't Be Found After Version Upgrade

Yes, it's set to true. All settings in config/lfm.php is as they were before the upgrade. I have now reverted back to version 1.9.2 and everything works again.

Activity icon

Started a new Conversation Unisharp Laravel Filemanager Can't Be Found After Version Upgrade

I wanted to upgrade Laravel Filemanager by Unisharp to the latest version, so I changed that row in my composer.json to "unisharp/laravel-filemanager": "^2.0.0", (before I had version 1.9.2) and followed these instructions:

 composer update unisharp/laravel-filemanager

 php artisan vendor:publish --tag=lfm_view --force
 php artisan vendor:publish --tag=lfm_public --force
 php artisan vendor:publish --tag=lfm_config --force

 php artisan route:clear
 php artisan config:clear

Unfortunately after this, when I try to open the filemanager the filemanager window opens, but with a 404 message. Since I backed up my old config/lfm.phpI copied the contents of that file into the new one, with the same result. Among other things the predefined routes from the package is set to true etc.

Reading up on the matter I saw a tip that the UniSharp\LaravelFilemanager\LaravelFilemanagerServiceProvider::class,should be inserted before App\Providers\RouteServiceProvider::class, in config/app.php which it is already is.

Can anyone help me?

Jan
03
4 months ago
Activity icon

Replied to .htaccess Problem – Fonts Not Found In Public Folder

Wow, thanks for taking the time to answer. That was the guide I didn't got to work the first time around, but I will try again. I am sure you are correct and I will do as you suggest. Better safe than sorry. Thanks again.

Jan
02
4 months ago
Activity icon

Replied to .htaccess Problem – Fonts Not Found In Public Folder

Snapey: I should have mentioned in my response that I have now skipped the subfolder and loaded everything in the public_html folder. So the .env file is located in www.example.com/.env, but that URL gives me a 403 Forbidden message. Maybe the shared host I am using have some kind of protection against accessing dot files in the public_html folder.

Activity icon

Replied to .htaccess Problem – Fonts Not Found In Public Folder

Snapey and jlrdw: Thanks a lot, now I have been reading up on the security matter of the .env file and I will follow those guides and change the setup on the production server. But I am still curious... when I type the URL www.mysite.com/.env I get a 403 Forbidden Screen. To mee that was proof of that file not being exposed, but apparently it's not?

Jan
01
4 months ago
Activity icon

Replied to .htaccess Problem – Fonts Not Found In Public Folder

Thanks pdlbibek, I saw your suggestion 1 minute too late :-|. I have now loaded the project directly in the public_html folder and everything works. I will save your answer and try it out the next time I have this same problems. Thanks again.

Activity icon

Replied to .htaccess Problem – Fonts Not Found In Public Folder

Thanks jlrdw, for the suggestion. I have tried for a couple of hours to follow the instructions in the linked article, and also in the related article with the project folder located at the same level as the root folder. It just won't work. I keep looking. At least the setup in my question works to 95%, even it's with ugly URLs. EDITED... I skipped the idea to locate the project in a subfolder and just loaded everything directly in the public_html folder and now everything works, including the awesome fonts :-).

Dec
31
4 months ago
Activity icon

Started a new Conversation .htaccess Problem – Fonts Not Found In Public Folder

I have my Laravel site in a subfolder in the public_html folder. The setup is like this:

public_html
    laravel_folder
        app
        bootstrap
        config
        database
        nbproject
        node_modules
        public
            css
            fonts
                vendor
                    font-awesome
        and so on...

I have 2 problems, that I think depend on the same thing. Fonts that exist in the public folder are not found (404) and the URLs are for ex shown like this:

www.example.com/laravel_folder/public/recipes 

...with the laravel installation folder and public folder always visible in the URL. So I am thinking that this is a .htaccess problem. This is what I have so far in .htaccess in the public_html folder:

<IfModule mod_rewrite.c>

    Options +FollowSymLinks

    RewriteEngine On
    RedirectMatch ^/$ /cookbook/public/

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

And this is the .htaccess in the Laravel installation folder:

<IfModule mod_rewrite.c>
    RewriteEngine On
   RewriteCond %{REQUEST_URI} !^public
   RewriteRule ^(.*)$ public/ [L]
</IfModule>

...and in the public folder:

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes

    </IfModule>

    RewriteEngine On
    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Can somebody see what I should alter, to get rid of /laravel_folder/public/ in the URLs? I guess that my missing fonts also depends on this same issue. They exist in the public folder but cannot be found.

Dec
16
5 months ago
Activity icon

Replied to Toggle Class If At Least One Of The Checkboxes Are Checked

Thanks Spamhead2k and bugshya! That worked. The only thing now would perhaps be that arrow functions are not supported in IE. But that's another question I guess. Thanks again!

Activity icon

Replied to Toggle Class If At Least One Of The Checkboxes Are Checked

Thanks bugshya, that makes sense. I used the event and listened for it in the modal component, like this:

Vue.component('modal', {
  template: `
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">
          <slot name="header"></slot>
        </p>
        <button class="delete" aria-label="close" @click="$emit('close')"></button>
      </header>
      <section class="modal-card-body">
        <div class="box">
          <artikel-lista></artikel-lista>
        </div>
      </section>
      <footer class="modal-card-foot">
        <slot name="footer">
          <button @click="submit" class="button" :class="{grey:toggleClass}">Lägg till</button>
          <button class="button" :class="{green:toggleClass}" @click="$emit('close')">Nej tack, fortsätt till varukorgen</button>
        </slot>
      </footer>
    </div>
  </div>
  `,
  data(){
    return{
      toggleClass: true,
    }
  },

  created(){
    Event.$on('input', function (checked){
    if(checked === false){
      window.count--;
    }else{
      window.count++;
    }

    if(window.count == 0){
      this.toggleClass = true;
    }else{
      this.toggleClass = false;
    }
    console.log(this.toggleClass); // here it toggles as I want, but that does not effect toggleClass in the data function
  });
},

});

In the beginning of the file I declare count as a window variable. In the created function I listen for an event that triggers when a checkbox is clicked. The payload is false for unticking and true for ticking, I keep track of how many boxes are checked and let the variable this.toggleClass toggle between true (any checkbox checked) and false (no checkboxes checked), exactly as I want. The problem is that it does not effect the variable toggleClass.

Why doesn't toggleClass inside the created function have any affect on toggleClass in the data function?

Dec
13
5 months ago
Activity icon

Started a new Conversation Toggle Class If At Least One Of The Checkboxes Are Checked

I have a custom element called "modal", used like this in my html:

<div id="root" class="container">
  <modal v-if="showModal" @close="showModal=false">
    <template slot="header">Tips på kompletterande artiklar...</template>
  </modal>
</div>

This modal is made up of custom elements, created with Vue components. The modal component looks like this:

Vue.component('modal', {
  template: `
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">
          <slot name="header"></slot>
        </p>
        <button class="delete" aria-label="close" @click="$emit('close')"></button>
      </header>
      <section class="modal-card-body">
        <div class="box">
           <artikel-lista></artikel-lista>
        </div>
      </section>
      <footer class="modal-card-foot">
        <slot name="footer">
          <button @click="submit" class="button" :class="{grey:toggleclass}">Lägg till</button>
          <button class="button" :class="{green:toggleclass}" @click="$emit('close')">Nej tack, fortsätt till varukorgen</button>
        </slot>
      </footer>
    </div>
  </div>
  `,
  data(){
    return{
      toggleclass: true
    }
  },
  methods:{
    submit(){
      Event.$emit('submit');
    },
  }
});

The custom element "artikel-lista" from the template above is made up of another Vue component, like this:

Vue.component('artikel-lista', {
  template:`
  <ul>
    <artikel v-model="toggle" v-for="artikel in artiklar" :key="artikel.sku">{{ artikel.title }} Pris: {{artikel.price}} <a :href="artikel.link" target="_blank" class="button tiny">Läs mer</a></artikel>
  </ul>
  `,

  data(){
    return{
      artiklar: App.artiklar,
      key:"",
      toggle:false
    }
  },

  created(){
    Event.$on('submit', () =>
    // coming soon

  );
},
});

And the custom element "artikel" from the template above is created with this Vue component:

Vue.component('artikel',{
  template: `<li style="list-style-type:none;"><input @input="toggle($event)" :checked="toggled" v-bind:value="toggle" type="checkbox" class="kryssruta"/><span></span><slot></slot></li>`,

  data(){
    return{
      toggled:this.value,
    }
  },
  methods: {
    toggle: function(value) {
      this.toggled = ! this.toggled;
      this.$emit('input', this.toggled);
    },
  },

  props: {
    value: {
      type: Boolean,
      default:false,
    },
  },
});

Now to my problem... the modal shows as it should, and the body area in the modal is filled with list elements with contained checkboxes, with the help of a v-for statement. All of this works, but I also want to toggle the button class "grey" in the modal template when at least one checkbox is checked (for now I have just set it to true). And I can't figure out how to do that...

I used the method described here: https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components for using V-model on a component.

My solution above seems to work at first as I tick the boxes. But as soon I remove a tick in one of the boxes the variable "toggle" gets a false value in the custom component "artikel-lista". I need it to stay true as long as at least one box is ticked. But how...?

Did any of you understand what I am asking? Please let me know if I can clarify. The method "toggle" in the component "artikel" just above emits false if a box is unticked and true if it is ticked. Ths event is then used in the v-model in the component "artikel-lista".