Contact Person Photo Block

With the Contact person photo Gutenberg block (immomakler/single-contact-photo) you output the photo of a property’s contact person. Together with the Contact details block and the contact form, this lets you build your own contact section in the detail view.

Requirements

• WordPress with the Gutenberg editor
• WP-ImmoMakler (any edition)
• A property in context: Place the block in a Site Editor template for the Property post type or on a template page — see Create Single Page.
• A photo of the contact person. How to add one is described in Adding a Contact Person Photo. If there is no photo, the block outputs nothing on the frontend.

Inserting the block

1. Open a template or template page

   Open the template for the Property post type in the Site Editor (requires a block theme) or the template page on which the detail view of your properties is built.

2. Insert the block

   Click the + icon and search for Contact person photo, or navigate to the Widgets category. Insert the block.

3. Set size and alignment

   In the sidebar under Photo, set the width and the aspect ratio. Choose the alignment (left, center, right) in the toolbar above the block.

4. Save

   In the editor, the block shows the contact person’s photo of the preview property. On each property page, the photo of the responsible contact person appears.

Options

Toolbar: Use Align to place the photo on the left (default), in the center, or on the right.

In the sidebar you will find the Photo panel with the following options:

Option	Default	Description
Width	automatic	Width of the photo in px, %, em, or rem.
Height	automatic	Height of the photo in px, %, em, or rem.
Aspect ratio	original	original, 3:2 or 4:3 (landscape format), 1:1 (square), 3:4 or 2:3 (portrait format). With a fixed aspect ratio, the photo is cropped from the center.
Outside distance / Inside distance	0	Margin and padding around the photo, adjustable for each side individually.
Corner radius	0	Rounds off the corners. Combined with the 1:1 aspect ratio and a radius of half the image width, this produces a round portrait.
“Randtyp”	None	Border style: None, “Einfach”, Dashed, Dotted, Double, or “Eingebettet”.
“Randbreite” / Border color	1px / theme default	Thickness and color of the border.

Tip

The block automatically uses the contact person’s salutation, title, name, and company as the image’s alt text.

You might also be interested in

• Contact Details — output the name, phone, email, and other details of the contact person
• Contact Form — output a property’s inquiry form
• Adding a Contact Person Photo — where the contact person’s photo comes from
• Create Single Page — build the detail view in the Site Editor or on a template page