<div class="profile-square">
<img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div>
<div class="profile-square">
{% block profile_image %}
{% include '@images--img' with profile_image only %}
{% endblock profile_image %}
</div>
{
"profile_image": {
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
}
}
.profile {
&-square {
position: relative;
height: auto;
max-width: 200px;
width: 100%;
overflow: hidden;
overflow-wrap: break-word;
img {
max-width: 100%;
}
}
&-circle {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
overflow: hidden;
img {
max-width: 100%;
}
}
&-rounded_box {
position: relative;
height: 200px;
width: 200px;
border-radius: 25%;
overflow: hidden;
img {
max-width: 100%;
}
}
}
Display the regular profile image option.