The gv-img tag enables a media selector control. The media selector control allows users to select governor media assets. As well as add, remove, and modify media galleries and images. The selected images url is inserted into the SRC attribute of the corresponding HTML element.
Tag
<img gv-img/>
Governor Expressions
@src
@alt
<div>
<img src="@src" alt="@alt" />
</div>
Helper Tags
-label
Basic
Example: index.html
<section>
<div class="hero-text" -block="Slide-1">
<img gv-img -label="Slide Image">
<h1 gv-text -label="Slide Title"></h1>
<p gv-textarea -label="Slide Text"></p>
</div>
<div class="hero-text" -block="Slide-2">
<img gv-img -label="Slide Image">
<h1 gv-text -label="Slide Title"></h1>
<p gv-textarea -label="Slide Text"></p>
</div>
</section>
Advanced
Example: index.html
<section class="slider" -block="Slider" gv-img -label="background image" style="background-image:url('@src');">
<!--Adding gv-img and using its @src for the media file path is an easy way to allow users to control background images -->
<div>
...
</div>
</section>
Pro Tips
Need to allow users to add their own custom background image to a div? Use Governor Expression @src to set the image path with inline-styles.