이미지 위의 구름 올리기 업로드 위젯

Question

나는 이미지와 구름 업로드 위젯이 있습니다. 위젯은 하나의 href와 몇 줄의 자바 스크립트가있는 버튼으로 화면에 표시됩니다. 위젯 버튼을 이미지 위에 직접 놓고 싶습니다만, 포맷팅 권리를 얻는 데 어려움을 겪고 있습니다. 이것들은 모두 Strikingly 사이트에서 호스팅됩니다.

<div id="picture" data-reactid="107"> 

<img 
width="600" 
height="600" 
src="//res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_9000,w_1200,f_auto/v1/7607/107c9c89-b233-482f-8f88-a106232d0f79_4_tidnqb.png" 
class="lazyautosizes lazyloaded" 
data-src="//res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_9000,w_1200,f_auto/v1/7607/107c9c89-b233-482f-8f88-a106232d0f79_4_tidnqb.png" 
data-sizes="auto" 
data-reactid="108" 
sizes="600px"> 

     <input style="position:absolute;width:80px;left:120px;top:180px;" 

     <a href="#" id="opener"></a> 

     <script type="text/javascript"> 
     $("#opener").cloudinary_upload_widget({ 
      cloud_name: "CloudicusNamicus", 
      upload_preset : "preset", 
      cropping: "server", 
      cropping_aspect_ratio: "1", 
      cropping_show_dimensions: "true", 
      theme: "white", 

      // pixels 
      max_image_width: 1055, 
      max_image_height: 1055, 
      min_image_height: 350, 
      min_image_width: 350, 

      gravity: "custom", 
      moderation: "webpurify", 
      thumbnail_transformation : 'g_center,l_old-overlay.png,fl_relative,w_1.0,h_1.0/c_scale' 
     }), function(error, result) {console.log(error, result)}; 

     </script> 
     </input> 
</div> 

Answer 1

쉬운 해결책은 여기에 있습니다. 밖으로 나가서 이미지 정렬을 중앙에 맞추고 몇 줄 바꿈을 추가 한 다음 아래에 단추를 놓으십시오.

<div align="center" ><img src="//res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_9000,w_1200,f_auto/v1/7607/107c9c89-b233-482f-8f88-a106232d0f79_4_tidnqb.png" data-sizes="auto" data-reactid="108" sizes="400px"> 

<div id="button" align="center"> 

    <a href="#" id="opener"></a> 

    <script type="text/javascript"> 
    $("#opener").cloudinary_upload_widget({ 
     cropping: "server", 
     cropping_aspect_ratio: "1", 
     cropping_show_dimensions: "true", 
     theme: "white", 

     // pixels 
     max_image_width: 1055, 
     max_image_height: 1055, 
     min_image_height: 350, 
     min_image_width: 350, 

     gravity: "custom", 
     moderation: "webpurify", 
     thumbnail_transformation : 'g_center,l_old-overlay.png,fl_relative,w_1.0,h_1.0/c_scale' 
    }, function(error, result) {console.log(error, result)}); 

    </script> 

</div>