HansSchouten / PHPageBuilder

A drag and drop page builder to manage pages in any PHP project
https://www.phpagebuilder.com
MIT License
721 stars 177 forks source link

Upload image inside div #99

Open somato-tomato opened 2 years ago

somato-tomato commented 2 years ago

i try to using upload image inside div but when i click the image, upload modal not showing. this my view.html

<div class="team-profile">
    <div class="team-member row">
        <div class="team-photo col-md-4 col-sm-5 col-xs-12">
            <img alt="" src="...">
        </div>
        <div class="team-info col-md-8 col-sm-7 col-xs-12">
            <h3 class="name">Andrew Cole</h3>
            <p class="sub-title">- Managing Director and Chief Executive Officer</p>
            <p>Lorem ipsum dolor sit amet consectetur to adipiscing elit, sed dot eiusmod tempor incididunt labore et dolore magna aliqua. Veniam quis nostrud exercitation ullamco laboris nisiut. Lorem ipsum dolor sit amet consectetur to adipiscing elit, sed dot eiusmod tempor incididunt labore et dolore magna aliqua. Veniam quis nostrud exercitation ullamco laboris nisiut.</p>
            <p>Lorem ipsum dolor sit amet consectetur to adipiscing elit, sed dot eiusmod tempor incididunt labore et dolore magna aliqua. Veniam quis nostrud exercitation ullamco laboris nisiut consectetur to adipiscing elit eiusmod.</p>
        </div>
    </div>
</div>
tkorkunckaya commented 2 years ago

Are you using an actual image in the src tag? Are you double clicking the image, modal opens with double click.

You can also include a block inside the block for easier content editing.

<div class="row align-items-center justify-content-between mb-5">
  <div class="col-md-7 col-lg-6">
    <div class="feature-content-wrap" phpb-blocks-container>
      [block slug="content-with-title-and-text"]
    </div>
  </div>
  <div class="col-md-5 col-lg-6 d-none d-md-block d-lg-block">
    <div class="feature-img-wrap text-center" phpb-blocks-container>
      [block slug="content-image"]
    </div>
  </div>
</div>

You can make this a block then create two other blocks for reusing anywhere in your site: As an example image only block:

<img src="/themes/fil/img/feature-new-1.svg" class="img-fluid" alt="server room">

When you drag drop the first block in your page, it will automatically include two other blocks: content-with-title-and-text and content-image. You can change the image, double clicking on it or delete the block and insert an other block etc Screenshot-20220317223831-993x492 .