+ Start a Discussion
Roger WickiRoger Wicki 

Attachment image & custom font in public visualforce page through site

Dear community

I am building a public visualforce page via site and I face some difficulties from internal testing to testing on the site. First of all I noticed that references to my sObject field were simply removed from the interface. No worries, I replaced them with simple input fields. But what I can't figure out is how I can load my custom font, saved as static resource into the public site. It worked with internal views but not on the site. Furthermore, I want to display an image that is stored as attachment depending on the parameter passed in the URL.

CSS-snippet:
/*---- General CSS ----*/
@font-face {
	font-family: Gravur; src: url('/resource/Gravur_CondensedLight');
}

@font-face {
	font-family: Gravur; font-weight: bold; src: url('/resource/Gravur_CondensedBold');
}

/*---- Page CSS ----*/
html
{
	font-family: Gravur;
	font-size: 16px;
}

/* And more irrelevant down below */

My Controller-snippet:
public class PartyRSVPController
{
	public String cmid {get;set;}
	public Boolean rendered {get; set;}
	public Boolean renderedError {get; set;}
	public Boolean success {get; set;}
	public CampaignMember aMember {get; set;}
	public Integer numGuests {get; set;}
	public Campaign aCampaign {get; set;}
	public String campaignImagePath {get; set;}
	public StaticResource res;
	
	public PartyRSVPController(){
		aMember = new CampaignMember();
		aCampaign = new Campaign();
		rendered = true;
		success = false;
		res = new StaticResource();
	}
	
	public void init() {
		cmid = System.currentPageReference().getParameters().get('cmid');
		if ( cmid == null || cmid.equals('') ) {
			rendered = false;
		}
		
		try {
			aMember = queryCampaignMember(cmid);
			aCampaign = queryCampaign(aMember.CampaignId);
		} catch(system.QueryException qe) {
			rendered = false;
		}
		
		campaignImagePath = '/servlet/servlet.FileDownload?file=' + aCampaign.CampaignImageId__c;
		renderedError = !rendered;
	}
}

My page-snippet
<apex:page showHeader="false" sidebar="false" showChat="false" controller="PartyRSVPController"  standardStylesheets="false" docType="html-5.0" title="Party RSVP" action="{!init}">
<apex:pageMessages />
	<apex:stylesheet value="{!$Resource.PartyRSVP}" />
	<apex:form styleClass="form">
		<apex:pageBlock >
			<section id="page_header">
				<apex:image value="{!$Resource.ArchitonicLogo}" alt="Architonic Logo"/>
			</section>
		</apex:pageBlock>
		<apex:pageBlock rendered="{!rendered}">
			<section id="page_content">
				<aside>
					<!-- apex:image url="{!URLFOR($Action.Attachment.Download, aCampaign.CampaignImageId__c)}" alt="Campaign Image" styleClass="image" /-->
					<apex:image value="{!campaignImagePath}" alt="Campaign Image" styleClass="image" />
				</aside>
				<article>
					Dear {!Salutation}<br/>
					<br/>
					We are delighted to have you at our event <b>{!aCampaign.CampaignNamePublic__c}</b>! Please let us know whether you bring any guests and how many you bring:<br/>
					<div>
						<apex:input value="{!numGuests}" type="number" styleClass="inputField" label="Guests"/>
						<apex:commandButton id="SubmitButton" title="RSVP" value="RSVP" action="{!submit}"/>
					</div>
				</article>
			</section>
		</apex:pageBlock>
	</apex:form>
</apex:page>

Generally, the stylesheet loadsbecause it displays my tags correctly, but the font doesn't load. As you can see I use font face for using fonts for both bold and normal display. I do suspect that the simple "src:url( '/resource/Gravur_CondensedLight')" is the source of the problem. I do however not know how to deal with it.

This is what it looks like:
User-added image

And this is how it is supposed to look like:
User-added image

Note that now we see a different font. As stated before, the image is saved as attachment on a sObject and it is (so far) referenced with the "/servlet/servlet.FileDownload?file=" syntax by passing the image id.

While I know that I can save the image as static resource and then display it accordingly, it is not an option due to the workflow requiring the users to be able to define the image dynamically without having access to static resources.

Does anybody have experience with this? Any hints towards a solution? Thanks ahead.

Best
Roger
Roger WickiRoger Wicki
If you are looking for definitions for methods like queryCampaign or queryCampaignMember or alike, they are defined further down, they are working and thus irrelevant to the snippets above.
Waqar Hussain SFWaqar Hussain SF
try below code snippet.
 
campaignImagePath = YourSiteName+'/servlet/servlet.FileDownload?file=' + aCampaign.CampaignImageId__c;

 
Waqar Hussain SFWaqar Hussain SF
If the image id is attachment id, then you can use below code.
Controller:
campaignImagePath = aCampaign.CampaignImageId__c;
Visualforce:
<img src="{!URLFOR($Action.Attachment.Download, CampaignImageId__c)}" />

Otherwise you can use the below code.
campaignImagePath ='/'+ YourSiteName+'/servlet/servlet.FileDownload?file=' + aCampaign.CampaignImageId__c;
Roger WickiRoger Wicki
Dear Waqar

Thanks for the input on the "yourSiteName". I didn't think of that. the URLFOR method doesn't work because the Action.Attachment.Download seem not to be available to a public site guest user. Using following it works:
campaignImagePath = '/rsvp/servlet/servlet.FileDownload?file=' + aCampaign.CampaignImageId__c;
where /rsvp/ is the site subdomain.
 
Roger WickiRoger Wicki
Does anybody have input to the font issue?