[MOVE layout instruction] How to get the value of 'element', 'destination' & after?

[john_sim]

<move element="category.image" destination="page.title.wrapper" after="page.main.title" /> 

A generic question.

Is there an easy way to find the name value of elements? I want to move elements around on a page. In this case, I'm looking for a way to append the category image to the page title.

Example

I would like to append the page title to the category image. So that the title is shown below the category image.

To get this done I'm using the default.xml of my theme @

app/design/frontend/company/thm/Magento_Theme/layout/default.xml

I've learned that moving elements can be done with the help of instructions inside an xml. Nice!

Just activated template hints in the frontend and Block Names to Hints.

This is where it confuses me. According to the manual, you can use the move instruction:

<move element="category.image" destination="page.title.wrapper" after="page.main.title" /> 

The above didn't work And I was guessing the values..

But in the frontend of the category page, I see the hints showing this for the title:

../vendor/magento/module-theme/view/frontend/templates/html/title.phtml

and:

Magento\Theme\Block\Html\Title

and this for the category image:

../vendor/magento/module-catalog/view/frontend/templates/category/image.phtml

and:

Magento\Catalog\Block\Category\View

It shows me a .phtml file and a generic path hint? But it doesn't tell me how I can fill in the ??'s in this:

<move element="??" destination="??" after="??" /> 

How do I now what value to use?

[john_sim · Accepted solution]

Found a way to retrieve it @ stackexchange :

- WORKAROUND -

------------------------------------------------

Content > Widgets > Add Widget
Type = CMS Static Block
Design Theme = [Your Theme]

Continue

Layout Updates > Add Layout
Display On = [Pick One]

Right click Inspect on "Please Select" underneath Container.
Expand the <select> element in Dev Tools
All the option value='s are your referenceContainer Names.

------------------------------------------------

THE RESULT

<option value="page.top">After Page Header</option>
<option value="top.container">After Page Header Top</option>
<option value="columns.top">Before Main Columns</option>
<option value="page.bottom">Before Page Footer</option>
<option value="page.bottom.container">Before Page Footer Container</option>
<option value="cms_footer_links_container">CMS Footer Links</option>
<option value="content">Main Content Area</option>
<option value="content.aside">Main Content Aside</option>
<option value="content.bottom">Main Content Bottom</option>
<option value="main">Main Content Container</option>
<option value="content.top">Main Content Top</option>
<option value="minicart.addons">Mini-cart promotion block</option>
<option value="before.body.end">Page Bottom</option>
<option value="footer">Page Footer</option>
<option value="footer-container">Page Footer Container</option>
<option value="header-wrapper">Page Header</option>
<option value="header.container">Page Header Container</option>
<option value="header.panel">Page Header Panel</option>
<option value="after.body.start">Page Top</option>
<option value="sidebar.additional">Sidebar Additional</option>
<option value="sidebar.main">Sidebar Main</option>

With all this information available in the core.. I wonder .. wouldn't it be handy to make this list available into the admin dashboard in a more UX friendly way?