<ui:define name="centerPageContent">
<h:form id="profilePictureForm">
    <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
    <h:panelGrid columns="2">
        <p:imageCropper value="#{profilePicture.croppedImage}" image="#{profilePicture.sampleImage}" initialCoords="225,75,300,125" />
        <p:graphicImage id="localCroppedImage" value="../images/images1.jpg" /> </h:panelGrid>
    <p:commandButton value="Crop" action="#{profilePicture.crop}" update="localCroppedImage" /> </h:form>
</ui:define>
</ui:composition>