Media manager does not work on frontend with joomla 4

sitelle

Hi,
I have got several websites running with Joomlart templates. I have moved them to Joomla 4 and I have the media manager on the frontend that does not work since. This happens with the company template and also on other websites built under Purity 3.
On all cases the media manager works with Cassiopea template.
Can you please tell me what I should do ?

saguaros

You can backup your site and try with my solution here: https://www.joomlart.com/forums/d/42690-media-manager-button-from-the-front-of-the-site-does-not-work/12

sitelle

Hi,
Thank you for the reply.
I had - and have again - tried this solution on another website, without any result.

After more checks, I know now that this happens with your templates and Tinymce.
With JCE, the media manager works well on the frontend.

Can you please search for a solution ?

saguaros

Did you try to update T3 framework also?

And remember to compile less to css.

sitelle

I have applied the fix and compiled less to CSS.
This does not change anything and does not solve my problem.

saguaros

sitelle It's weird that the code doesn't apply into your site so I updated this code manually for you:

.j40,
.j42 {
  .joomla-modal.show {
    background-color: rgba(0,0,0,0.5);
    opacity: 1;

    .modal-dialog {
      top: 50%;
      transform: translateY(-50%);

      .modal-content {
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
      }
    }
  }

  .jviewport-width80 {
    width: 80vw;
  }

  .jviewport-height70 {
    height: 70vh;
  }
  .jviewport-height60 {
    height: 90vh;
  }

  .modal-header {
    align-items: center;
    border-bottom: 1px solid #ddd;
    display: flex;
    padding: 12px 16px;
    justify-content: space-between;

    h3 {
      font-size: 24px;
      font-weight: 500;
    }
  }

  .modal-body {
    overflow: hidden;
    padding: 0;
  }

  .iframe {
    border: 0;
    height: 100%;
    width: 100%;
  }

  [role=tooltip]:not(.show) {
    right: 5em;
    z-index: 1070;
    display: none;
    max-width: 100%;
    padding: .5em;
    margin: .5em;
    color: #000;
    text-align: start;
    background: #fff;
    border: 1px solid #6d757e;
    border-radius: .25rem;
  }

}


// Front-end edit
// --------------
.j40 {
  .btn-toolbar,
  .js-stools-container-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
  }

  .ordering-select {
    display: flex;
    align-items: center;
  }

  .btn-group {
    margin-right: @t3-global-margin / 2;
  }

  .js-stools-container-filters {
    display: none;
    margin-top: @t3-global-margin;

    &.js-stools-container-filters-visible {
      display: flex;
    }

    .js-stools-field-filter {
      margin-right: @t3-global-margin / 2;

      &:last-child {
        margin-right: 0;
      }
    }

    .choices {
      .choices__inner {
        border: 0;
        min-height: auto;
        padding: 0;

        input {
          margin-bottom: 0;
        }
      }
    }
  }
}

I put into file: /templates/ja_company/local/css/themes/insectokill/template.css

Kindly check.

sitelle

OK it works now. Thank you very much.

saguaros

You're so welcome!