Building a Wrapper from Scratch: Head

Aaron Rothberg · April 2018

I'm trying to change the picture in the Header portion of the wrapper, but I don't know how to unpack the URL below to replace it with a link to my new image in the Image Library. I can see this isn't a direct link to the file location of the image so I'm guessing I need to use the GUI to update the link rather than explicitly linking to my image in the folder hierarchy, if that makes sense.

********************

<meta property="og:description" content="[[E130:"[[C1:title_field]]" ".." "" replaceall ]]" />

<meta property="og:image" content="http://[[S29:DOMAIN]][[E130:"[[C4:graphic_upload]]" ".." "" replaceall ]]" />

<meta property="og:image:width" content="300">

<meta property="og:image:height" content="300">

<meta property="og:image:type" content="image/jpeg" />

::

********************

71033d8176f531ed68384b01d60d7513-huge-he

Jeremy Reynolds · April 2018

You can leave that block as-is, it's conditionalized to only trigger on a participant page and puts in the user's photo. You want the code just below the red box in your image (the one ending in /necc/images/content/pagebuilder/slide-1-[[S80:trID]].jpg ).

Really, though, you probably don't need to edit anything. The code you posted should have a unique entry in your image library for every one of your events, called slide-1-####.jpg (change the hashes to match the event's ID number).

Aaron Rothberg · April 2018

Thanks Jeremy. Using your logic, I opted to change none of the code and simply renamed the picture I wanted to see at the top, but there's obviously something else I'm missing since that didn't work. I took the image I had previously uploaded and under Edit I changed the Graphic Title to slide-1-1060.jpg. That didn't work so I assumed it didn't rename the file so I tried to upload the same image again with the name slide-1-1060.jpg. Then I got an error message that an image with that name already existed so I changed the Graphic Title on the existing image to slide-4-1060.jpg then tried to upload an image named slide-1-1060.jpg and got the same error, the image already exists.

e81326bf8170c3c7dadf0c71b7e08f08-huge-he

Tanna Lewis · April 2018

Aaron, looks to me like the area you have in your screenshot is not for the top header event logo you are trying to change at all, but is related to displaying the participant image or else the first of your TR's slider images based on whether the user is on the personal page or not. Your logo must be getting called in elsewhere, perhaps even through a separate reusable pagebuilder page? Can you send more of the code from your header reusable?

Also, this relates back to what I mentioned on your other wrapper-related post - you may not need to be creating a new wrapper at all. These slider images are set up quite elegantly to dynamically grab the correct file based on the TR ID (as long as you've named the images correctly) - I would think there is no reason not the replicate the same thing with your logo image, if it isn't like that already. So are you sure you will need a separate wrapper anyway?

Aaron Rothberg · April 2018

"Your logo must be getting called in elsewhere"

Hi Tanna-

I think you're right. The page I was trying to edit is called copy_of_reus_Teamraiser_head_falmouth. Now that you've pointed out this is related to a participant image I see there's another wrapper page called copy_of_reus_Teamraiser_logo_falmouth and I think that's what's rendering the image I want to change. Thanks for the help. I'll take some time to re-read your comments and do some more research.

I did want to mention I'm creating a second wrapper not to replace images, but to modify the call to action buttons. Our current call to action buttons won't work for the second event and we will have both events listed publically at the same time.

While I try to figure out which pages to edit to replace that logo, I have a couple of more general questions regarding the number of Pages and naming conventions needed to make a complete functional wrapper.

Question 1: I see 12 pages were used to make up our initial wrapper. Is this true for all Team Raiser installs? Do you all have 12 pages that make up one wrapper? Will all wrappers have 12 pages?

Question 2: Is any part of the page name required for the wrapper page to function or are the page names simply for me to keep things straight as I design each wrapper?

Consider the page name: copy_of_reus_Teamraiser_calltoaction_falmouth

If I rename that page to CTA_Falmouth, will it remain fully functional or have I broken something by renaming the page?

Thanks again for your help everyone!

Tanna Lewis · April 2018

Yep, in your other post about the wrapper I suggested maybe just adding some js on the TR greeting page to hide the buttons you don't want to use - that way you can still just use the existing wrapper.

12 is a nice plumpy number of reusables - fingers crossed they are all doing some really cool stuff!

I think we typically have more like 4-6 for TR wrappers, but depends on if we are calling in special scripts or styles, too - can definitely be a lot more for a more robust TR, and depending on your strategy for creating separate elements to be shared across different TRs and pages! Lots of reusables is not necessarily a bad thing, especially if you are using them to minimize having to duplicate elements for different events!

EDIT: Oh, and question 2 - nope, as far as I know, no required format for the page names other than typical character restrictions (like no spaces) - just use a naming convention that works for you and makes them easy to identify/organize. When renaming an existing page that is already called into other pages, you will likely need to also update the code of the pages which are calling it to reflect its new name.

Good luck ma friend!

Tanna

Aaron Rothberg · April 2018

|> I suggested maybe just adding some js on the TR greeting page to hide the buttons you don't want to use

Oh! I missed that by adding it to the greeting page it would only affect that particular Team Raiser event! Thanks for that insight. Changing strategies now. ;D

Building a Wrapper from Scratch: Head

Comments

Categories