web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
🚀 Season of Sharing Community Challenge Launch!
Ask A Community Pro - Series II
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / How can I Show title w...
Power Pages
Answered

How can I Show title with Image In Knowledge base article category in the portal

(0) ShareShare
ReportReport
Posted on by MOHAMMAD 105

In my portal, The knowledge-based Home is showing list of category title

Atiour_0-1646392814824.png

I want to show the image with the title for each category in the list. 

 

The category table has no logo field I add a new image field and also add the field into the form.

Atiour_1-1646393045592.png

Into Portal Management Web Template=>Knowledge Base - Home

I add the new field for the image

Atiour_2-1646393200171.png

 

But the image is not shown in the list

Atiour_3-1646393339219.png

 

Note that this portal will be used for anonymous users.  No user login is required.

 

 

 

 

 

Categories:
Power Apps portals
I have the same question (0)
  • Christian Leverenz Profile Picture
    Christian Leverenz 1,214 on at

    Hi @Atiour ,

    not sure, but i can imag(in)e two things:

    • the src-attribute of the img tag should be enclosed in quotes, so instad of <img src={{ mypictuee }}... it shoud be <img src="{{ mypictuee }}"...
    • i do not know, how the image is saved in the image attribute, never had a look. but i assume, that it is a base64 encoded string. If yes, i would try as src tag: <img src="data&colon;image/png;base64,{{ mypicture }}"  (see here for more info : https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html )

    May be, you only have to add the data: string literal. Try to display the content of the field in a div, this will give you an idea whats going on 🙂

     

    Hope it points in the right direction,

      Christian

     

    PS will definitely try myself as this is a brilliant idea 🙂

  • Verified answer
    Christian Leverenz Profile Picture
    Christian Leverenz 1,214 on at

    Hi @Atiour ,

    just gave it a try, the image is stored somewhere else and a url is stored in the imagefield (used fetch to verify). The url starts with /Image/download.aspx which will definitely not be accessible anonymous via portal. 

    Hm, i searched the diocumentation but did not find a page describing the supported dataverse types for portals. May be, images are not supported (yet).
    I am pretty sure that a custom (or virtual) entity with converted pictures could help, but this is not, what you want 😞


    A fast solution could be, to upload the images as webfiles and place (instead of the picture itself) a reference to  the webfile in the configurations. Instead of the imageupload you could use /mypicture.jpg then afterwards.

     

    Many of our clients do it like that, because they have their images in CDNs and reference them there.

     

    Hopefully not just another silly idea by me and it helps a little bit 🙂

      Christian

  • MOHAMMAD Profile Picture
    MOHAMMAD 105 on at

    Hi @chleverenz 

    Thank you for your theoretical response.

    I think you are right. I need to create web file. I need to check how i can add a web file when i will add a new category with image.

     

    Regards

    Mohammad

     

  • ragavanrajan Profile Picture
    ragavanrajan 7,044 Most Valuable Professional on at

    Hi @Atiour 

     

    The simple way I would think is to use the File column in the portal. 

     

    In your environment

    Dataverse > Tables> Knowledge Article 

     

    2. Add a new column like below and set the type as "file". Add any additional field as per your choice 

     

    ragavanrajan_0-1646691983081.png

     

    3. Save and close the table 

     

    Modify the main form or relevant BPF to add the newly added file column. 

     

    Note: When uploading your image file make sure you choose "Home" as a parent. So the image will be served from \ (root) URL 

     

    In your knowledge web template. Include the newly added fields. 

     

     

    Hope it helps. 
    ------------

    If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

     

     

  • MOHAMMAD Profile Picture
    MOHAMMAD 105 on at

    I have created some web files into the portal for my category.

    I do not automate the process because no the category is less for my case.

     

    I add a new text field into the category entity where I just keep the web file name per category item.

    The new field is not showing into the liquid (Knowledge-based Home) web template.

    I customize the code add fetch XML query

     

    {% extends 'layout_1_column' %}
{% block main %}
 {% include 'Page Copy' %}
 {% assign category_url = sitemarkers['Category'].url %}
 {% assign count = count | default: 0 %}
 {% assign categories = knowledge.categories | top_level: count %}
 {% if categories %}
 <div class="list-group unstyled">
 {% for category in categories %}
	 {% assign portalcategorynumber = category.categorynumber %}
	 {% fetchxml knowledgearticlecategorydetails_query %}
 <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="true">
 <entity name="category">
 <attribute name="categorynumber" />
 <attribute name="crm1st_webfile" />
 <attribute name="title" /> 
		 <filter>
 <condition attribute="categorynumber" operator="eq" value="{{portalcategorynumber}}" />
 </filter> 
 </entity>
 </fetch>
 {% endfetchxml %}
	{% assign categorydetails = knowledgearticlecategorydetails_query.results.entities %}
	{% if categorydetails.size > 0 %}
 {% for categorydetailsitem in categorydetails %}
		 {% assign portalcategorywebfile = "https://yourwebsite.com/"| append: categorydetailsitem.crm1st_webfile %}
 {% endfor %}
 {% endif %}
 <a href="{{ category_url | add_query: 'id', category.categorynumber }}" class="list-group-item">
		 {% if portalcategorywebfile %}
				{{ category.title }} <img src="{{portalcategorywebfile}}"/>
			{% else %}
			 {{ category.title }}
			{% endif %}
 </a>
 {% endfor %}
 </div>
 {% endif %}
{% endblock %}

     

    and my output look like

    Atiour_0-1646825771437.png

     

     

     

     

     

     

     

  • Christian Leverenz Profile Picture
    Christian Leverenz 1,214 on at

    Hi @Atiour ,

     

    looks great, thanks for accepting as solution and for posting the code.

     

    One minor hint: i think, you can omit the "https://yourwebsite.com" part and just start with a "/". Then you do not have to change the code, when the portal is transported from a test to a prod environment 🙂 

     

    Have fun,

      Christian

  • MOHAMMAD Profile Picture
    MOHAMMAD 105 on at

    Thank you.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
🚀 Season of Sharing Community Challenge Launch!
Ask A Community Pro - Series II

Quick Links

Season of Sharing Community Challenge Launch!

Jump in, show your community spirit, and win prizes!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the April Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
11manish Profile Picture

11manish 36

#2
Valantis Profile Picture

Valantis 32

#3
omkarsupreme Profile Picture

omkarsupreme 25

Last 30 days Overall leaderboard

Featured topics

Solution to LinkedIn Authentication in Power Apps Portals
Welcome to the Power Pages forum!

Product updates

Microsoft Power Platform Community release plans