Display Image as Button

Hi @alonagomez

Yes, it’s possible.
To do so, “Add New” View item, assign the Image field, Save.
Then copy the ‘Template Preview’ content into the ‘Custom Template’, modify the image markup as per my example below, to output a link instead of the image.

{% if image.value %}
	<a href='{{ image.value }}'>
	    Full size
	</a>
{% endif %}

You can now add the shortcode to your page, and come back to the View and add CSS in the ‘CSS & JS’ tab to style your button.

Thanks it worked. I created a button with padding and background. I have a problem on the CSS for the link color because the default value is “a”. How to customize the “a” name because it is conflict with the website link if I change it to color white?

https://pasteboard.co/VtwTU7VLQWZV.png

• This reply was modified 1 year ago by alonagomez.

Hi@alonagomez

You could try restricting the style to the specific button text, see below for an example. Paste it into your Views CSS & JS Tab in the CSS Code field.

#view .views-button a {
color: #ffffff;
}

You would also need to include a class for your template element.

{% if image.value %}
    <div class="views-button">
	    <a href='{{ image.value }}'>
	        Full size
	    </a>
    </div>
{% endif %}

Thanks it worked.