Overlay Cloudinary Upload Widget auf Bild

Question

Ich habe ein Bild und ein Cloudinary Upload-Widget. Das Widget wird auf dem Bildschirm als eine Schaltfläche angezeigt, mit einem href und ein paar Zeilen Javascript. Ich möchte den Widget-Button direkt über dem Bild platzieren, aber ich habe Schwierigkeiten, die Formatierung richtig zu machen. Diese werden beide auf einer Strikingly-Site gehostet.

<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

Einfache Lösung hier. Es stellte sich heraus, dass ich das Bild nur zentrieren musste, ein paar Zeilenumbrüche hinzufüge und dann den darunter liegenden Button fallen ließ.

<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>