Keyword modifier - asset listing alternate left / right image and text

(Innes Zenati) #1

Matrix Version:6.46.0

Looking for some help within an asset listing (1 row / 2 columns) using bootstrap classes (using container fluid / d-flex classes) to align image to left and text to right. It lists all assets in the same format, Is there an easy way to alternate this so it left / right & right / left when printing the child pages?

Similar to this - https://sainsburys.jobs/working-for-us

I have tried using the new component service to build the landing page but the align text left / right isnt working.

Thanks

(Innes Zenati) #2

Got this working using a begin asset keyword modifier:

%begin_asset_metadata_image.layout_key^eq:left%  
<li class="landing-section">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <img src="%asset_thumbnail_url%">   
</div>

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <h2>%asset_name_linked%</h2>
    <p>%asset_metadata_asset.description%</p>
</div>

%else_begin_asset_metadata_image.layout_key^eq:right%
<li class="landing-section">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <h2>%asset_name_linked%</h2>
    <p>%asset_metadata_asset.description%</p>
</div>

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <img src="%asset_thumbnail_url%"> 
</div>
%end_asset%

Thanks again to @harinder.singh