Jonjie
1 month ago
260
9
Laravel

Coverphoto-like facebook package for laravel

Posted 1 month ago by Jonjie

Hi. Do you have any suggestion on how can I integrate a cover photo like the facebook has?

I'm already following this, but I got an error:

Link

https://www.scoopism.com/laravel/add-cover-image-like-facebook-adjust-position-image/

Error

TypeError: Cannot read property 'requestContent' of undefined

UPDATE with Code

Controller

public function saveCoverPhoto(Request $request)
    {
        $file = $request->file('cover_photo');
        $rules = ['cover_photo' => 'required|mimes:png,gif,jpeg,jpg']; //'required|mimes:png,gif,jpeg,txt,pdf,doc'
        $validator = Validator::make(['cover_photo'=> $file], $rules);
        
        if($validator->passes()){
            $user = Auth::user();
            $current_cover_photo = $user->addMediaFromRequest('cover_photo')->toMediaCollection('coverphoto');
            
            $bgSave='<img src="'. Auth::user()->getMedia('coverphoto')->last()->getFullUrl() .'"  id="timelineBGload" class="headerimage ui-corner-all " style="top:0px;width:100%"/>';
            $bgSave .="<div class='btn-save-drag'><p style='background-color:white; font-size: 0.8em;'>Drag and adjust the image</p><button class='bgSave btn btn-info bg-lg'>Save</button></div>";
            $bgSave .= "<script>$('.headerimage').on('mouseover',function()
              {

                var y1 = $('#adjimage').height();
                var y2 =  $('.headerimage').height();

                $(this).draggable({

                  scroll: false,
                  axis: 'y',
                  drag: function(event, ui) {
                    if(ui.position.top >= 0)
                    {
                    ui.position.top = 0;
                    }
                    else if(ui.position.top <= y1 - y2)
                    {
                    ui.position.top = y1 - y2;
                    }
                },
                stop: function(event, ui)
                {
                }
              });
              });
              $('.bgSave').on('click',function ()
                  {
                    var p = $('#timelineBGload').attr('style');
                    var Y =p.split('top:');
                    var Z=Y[1].split(';');
                    var dataString ='position='+Z[0];
                    $.ajax({
                      type: 'POST',
                      url: '";
                     $bgSave .= route('save.position.cover-photo', ['id' => $current_cover_photo->id]);
                     $bgSave .="',
                      data: dataString,
                      cache: false,
                       headers: {
                        'X-CSRF-TOKEN': '". csrf_token() ."'
                        },
                      success: function(html)
                      {
                        if(html)
                        {
                           location.reload(); 
                         
                          return false;
                        }
                      }
                    });
                  return false;
                  });
              

              </script>";
            return $bgSave;
        }
    }

    public function postImgAdjustpostion($id)
    {
      $cover_photo = Media::find($id);
      $cover_photo->custom_properties = '{"position": "' . request('position') . '", "generated_conversions": {"thumb": true}}';
      $cover_photo->save();
      return redirect()->back();
    }

web.php

Route::post('users/settings/cover-photo/save', [
    'as' => 'save.cover-photo',
    'uses' => '[email protected]'
  ]);
  Route::post('users/settings/cover-photo/{id}/position/save', [
    'as' => 'save.position.cover-photo',
    'uses' => '[email protected]'
  ]);

View

<div class="hovercover text-center" id="bgimage">
            @if(Auth::user()->getMedia('coverphoto')->last())
              <img src="{{ Auth::user()->getMedia('coverphoto')->last()->getFullUrl() }}" class="img-responsive" style="margin-top: 0px;">
            @else
              <img src="{{ asset('assets/img/black.jpg') }}" class="img-responsive" style="margin-top: display: none;">
            @endif
            <div class="hover-div">
              <form method="post" id="hoverform" action="{{ route('save.cover-photo') }}" enctype="multipart/form-data">
                @csrf
                <label for="coverPhoto" class="custom-file-upload" title="Change Cover Image">
                    <i class="fa fa-file-image-o"></i>&nbsp; Change Cover
                </label>
                <input id="coverPhoto" name="cover_photo" type="file">
              </form>
            </div>
            <div class="hovercover1 text-center" id="adjimage" style="display: none;"></div>
          </div>

<script type="text/javascript" src="{{asset('assets/js/cover-photo-js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/cover-photo-js/jquery-ui.min.js')}}"></script>
  <script type="text/javascript" src="{{asset('assets/js/cover-photo-js/jquery.wallform.js')}}"></script>
  <script type="text/javascript" src="{{asset('assets/js/cover-photo-js/jwincrop.js')}}"></script>
  <script>
      $(function(){
        
          $('#coverPhoto').on('change',function(){
            $("#hoverform").ajaxForm({
                target: '#adjimage',
                success:function(){
                  $(".hover-div").hide();
                  $("#bgimage").hide();
                  $("#adjimage").show();
                }}).submit();
         });

        $('.hovercove').each(function() {
            //set size
            var th = $(this).height(),//box height
                tw = $(this).width(),//box width
                im = $(this).children('img'),//image
                ih = im.height(),//inital image height
                iw = im.width();//initial image width
            if (ih>iw) {//if portrait
                im.addClass('ww').removeClass('wh');//set width 100%
            } else {//if landscape
                im.addClass('wh').removeClass('ww');//set height 100%
            }
            //set offset
            var nh = im.height(),//new image height
                nw = im.width(),//new image width
                hd = (nh-th)/2,//half dif img/box height
                wd = (nw-tw)/2;//half dif img/box width
            if (nh<nw) {//if portrait
                im.css({marginLeft: '-'+wd+'px', marginTop: 0});//offset left
            } else {//if landscape
                im.css({marginTop: '-'+hd+'px', marginLeft: 0});//offset top
            }
        });

      });
  </script>

Please sign in or create an account to participate in this conversation.