Using keywords to insert image, caption and alt text


#1

Matrix Version: V5.5

I’m trying to make it easier to load images onto our pages using keywords to include the relevant title, caption and alt text. When I create a lightbox gallery via nested content, this code works perfectly and pulls in the correct information for each image:

<a href="./?a=%asset_assetid%" title="%asset_attribute_title%">
	<div>
		<img src="./?a=%asset_assetid%" alt="%asset_attribute_alt%"/>
	</div>
	<p>%asset_attribute_caption%</p>
</a> 

My problem is when I try similar code to add just one image directly to a page (not nested). The following code works fine but I need to manually add the asset number 5 times to make sure it targets the correct information from the image asset.

<a href="./?a=12345" title="%globals_asset_attribute_title:12345%">
	<div>
		<img src="./?a=12345" alt="%globals_asset_attribute_alt:12345%"/>
	</div>
    <p>%globals_asset_attribute_caption:12345%</p>
</a>

It would be awesome if I could set the asset number once and it was automatically used in all 5 locations that it is required.

So my question is, does anyone know if there is a way that I can write this code and only have to write the asset number one time (without using asset listing or nested content)?

Thanks


(Harinder Singh) #2

I think this keyword will do the job for you.

%globals_asset_contents_paint_layout_id_<paint_layout_id>:<assetid>%

and add the following in your paint layout bodycopy

<a href="%asset_url%" title="%asset_attribute_title%">
	<div>
		<img src="%asset_url%" alt="%asset_attribute_alt%"/>
	</div>
    <p>%asset_attribute_caption%</p>
</a>

#3

Thanks for that.

Is there any way to do it without using a paint layout either? I’m trying to just use code on the page so that I can keep control of the classes used as it changes depending on how I want the image to view. Paint layouts could end up being more work than just updating the asset number on some of my smaller sites. Could be handy on my larger sites though but still looking for an ‘inline code’ solution so to speak.


(Chris Horikx) #4

I use a standard page asset that I nest in with a with_get modifier:

so a standalone Standard Page asset sits somewhere with the following code inside:

%begin_nested_get_imgtype^eq:%
<a href="%nested_get_imgsrc^as_asset:asset_url%" title="%nested_get_imgsrc^as_asset:asset_attribute_title%">
    <div>
	    <img src="%nested_get_imgsrc^as_asset:asset_url%" alt="%nested_get_imgsrc^as_asset:asset_attribute_alt%"/>
	</div>
    <p>%nested_get_imgsrc^as_asset:asset_attribute_caption%</p>
</a>
%end_nested%

Then inside the page where the image is you use:

%globals_asset_contents_raw:assetidofstdpage^with_get:imgsrc=assetidofimage%

I have included the %begin_nested_get_imgtype^eq:% to show that you can include an &imgtype=figure or &imgalign=fullwidth etc.

Note: Known to have issues with cache with multiple references per page so some trickery is needed. @Bart is there a way to nest assets this way without invoking multi-use-same-asset-caching?


(Bart Banda) #5

Not sure what you mean @Chris_Horikx? We did fix some nest caching bugs a while ago, so it may not be an issue anymore in the latest versions of Matrix?