How to set the size of image and text inside QTextEdit using QTextDocumentFragment

Question

Following my previous post I am implementing a command log using QTextEdit . The way it works is that every time the user interacts with the user interface the action is recorded inside a QTextEdit Command Log shown below. I successfully associate an image to every action (eg pushing a button, checking a box etc) but as you see in the print screen below the image is not resizing and everytime the user does something, instead of having an additional line, the image is put next to the other:

What is happening:

What is expected:

Below the snipped of code:

mainwindow.h

private
    QTextEdit *mNewText;

mainwindow.cpp

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
// Adding object to the DockWidget
    mNewText = new QTextEdit;
    mNewText->setReadOnly(true);
    mNewText->setStyleSheet("background-color: light grey;");
    mNewText->setMinimumHeight(50);
    mNewText->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    mDockWidget_A->setWidget(mNewText);
    addDockWidget(Qt::BottomDockWidgetArea, mDockWidget_A);
    resizeDocks({mDockWidget_A}, {200}, Qt::Horizontal);
}

void MainWindow::on_originalmgA_clicked()
{
    imageOriginlUploadA();
    QTextDocumentFragment fragment;
    fragment = QTextDocumentFragment::fromHtml("<img src='/home/path/toDesktop/working.png'>");
    mNewText->textCursor().insertFragment(fragment);
    mNewText->setVisible(true);
}

// Here we record the activity of loading images using a QPushButton

void MainWindow::imageOriginlUploadB()
{
    dir_Original_B = QFileDialog::getExistingDirectory(this, tr("Choose an image directory to load"),
                                                     filesListRight, QFileDialog::ShowDirsOnly | QFileDialog::DontResolveSymlinks);
    if(dir_Original_B.length() > 0){
        QImage image;
        QDir dirBObj(dir_Original_B);
        QStringList filesListRight = dirBObj.entryList(QDir::NoDotAndDotDot | QDir::System | QDir::Hidden  | QDir::AllDirs | QDir::Files, QDir::DirsFirst);
        ui->labelOrigImageB->setPixmap(QPixmap::fromImage(image.scaled(125,125,Qt::KeepAspectRatio,Qt::SmoothTransformation)));
        for ( int i = 0 ; i < filesListRight.size() ; i++ )
        {
            ui->listWidgetOriginalImgB->addItem(filesListRight.at(i));
        }
        ui->listWidgetOriginalImgB->update();
        ui->labelOrigImageB->show();
    }
}

// Here for example we record the activity of a Checkbox

void MainWindow::on_checkBoxScreen_A_toggled(bool checked)
{
    if(ui->checkBoxScreen_A->isEnabled()) {
        if(checked)
        {
            ui->checkBoxScreen_A->setText("Active");
            ui->saveToFile_A->setEnabled(true);
            ui->saveToFile_A->setStyleSheet("QPushButton{ background-color: green }");

            QTextDocumentFragment fragment;
            fragment = QTextDocumentFragment::fromHtml("<img src='/home/path/toDesktop/working.png'>");
            mNewText->textCursor().insertFragment(fragment);
            mNewText->setVisible(true);
        }
        else {
            ui->checkBoxScreen_A->setText("Inactive");
            ui->saveToFile_A->setEnabled(false);
            ui->saveToFile_A->setStyleSheet("QPushButton{ background-color: grey }");
        }
    }
}

I found this useful source that helped on how to take care of the image inside QTextEdit . However I didn't found anything that clearly explain on how to resize the QTextDocumentFragment inside a QTextEdit and its related text as shown:

How to set the size of image and text inside QTextEdit using QTextDocumentFragment ?

Anyone who can provide any insight would be greatly helpful.

Answer 1

Since you are using HTML you must use the width and height attributes of the img tag:

#include <QtWidgets>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QTextEdit w;
    QSize s{16, 16};
    for (int i=0; i<4; ++i) {
        s *= 2;
        QTextDocumentFragment fragment;
        fragment = QTextDocumentFragment::fromHtml(
                    QString(R"(<img src=':/qt-logo.png' height="%1" width="%2">)")
                    .arg(s.width())
                    .arg(s.height()));
        w.textCursor().insertFragment(fragment);
    }
    w.resize(640, 480);
    w.show();
    return a.exec();
}