How to link an image with a topic page as a hyperlink in nopCommerce

There are times when store owners wants to use image as a hyperlink. This allows store owner to post an image (like product catalog, product gallery etc) and link a web page to it so that particular page will open when the image is clicked by the customer. 

Today, we will go over the process of linking an image with a topic page as a hyperlink in nopCommerce.

In this example, we will add the image hyperlink on the public store homepage.


nopcommerce image topic

Let's open the "index.cshtml" and place the image link here:

    Layout = "~/Views/Shared/_ColumnsOne.cshtml";
<div class="page home-page">
    <div class="page-body">
        @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
        <!--Let us place the image link here-->
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Action("HomepageProducts", "Product")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Action("HomePageNews", "News")
        @Html.Action("HomePagePolls", "Poll")

For this example, we will use nopCommerce logo as an image:

A simple, image hyperlink will look like this:

<!--Let us place the image link here-->
       <!-- start -->
       <a href=""><img src="" alt="nopCommerce logo" border="0"></a>
       <!-- end -->

But, we need to link a topic page with the image so we will use this code:

<!--Let us place the image link here-->
      <!-- start -->
      <a href="@Url.RouteUrl("ContactUs")">
          <img src="" alt="nopCommerce logo" border="0">
      <!-- end -->

As per the above code, "ContactUs" page has been linked with the nopCommerce logo image. This is how it looks on the homepage:

nopcommerce image topic

A copy of this article is also available on Arvixe Blog.

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment