ChurchTrac: How To Embed Images in a Church Connect Page Card
ChurchTrac is a complete Church Management System (ChMS). As a paying customer, you have access to Church Connect, which is a member portal that can be accessed through a browser on any device, or installed as an app on any smartphone or tablet.
You may want to give your users access to a variety of different links (different group sign ups, or giving options, perhaps), but creating a card for each one on the Welcome Page would be overwhelming.
Church Connect allows images to be uploaded using a Gallery Card, but as of the writing of this post, there is no way to link those images to other pages or websites.
Instead, you may want to have a Page Card populated with different images that link to various places.
For example, our Ministry Training options would take up too much space on our Welcome Page.
So, I created one Page Card on the Welcome Page, and populated the Page Content with these images which function as buttons.
Most of these buttons link to a hidden Page Card with the appropriate training material on it. A few link to our main website or our Google Classroom, depending on where we have the content posted.
How to Embed Images in a Page Card in Church Connect
1) Create an account on an image hosting website. I like ImgBB because it’s simple to use, and it’s free!
2) Upload the images you would like to use as buttons. You can use any size for Church Connect, but I would aim for at least 600px wide.
3) Copy the full-linked html code. It should look something like this:
<a href=”https://ibb.co/CvrFph0″><img src=”https://i.ibb.co/ctmdKDT/SCA-Favicon-512.png” alt=”SCA-Favicon-512″ border=”0″></a>
href is the destination URL; img src is where your image is hosted.4) Log into your ChurchTrac.com account, and navigate to the Church Connect section (click Settings, then Church Connect).
5) Start a new Page Card, or click on one that you’ve previously created.
6) Click Edit Page Content.
7) Click the </> Code View button.
8) Paste the copied code from your image hosting website.
9) Paste or type the destination URL between the quotation marks after href= .
10) Add style=”width:100%” after border=”0″ and before the >. This allows the image to adapt to the user’s screen size.
11) Add a line break after the image by typing <br>
Here’s the full code of one of my linked images, embedded in a Page Card. The destination URL is the event registration inside ChurchTrac. If someone is logged in, they’ll be taken directly to the registration page. If they are not logged in, they’ll be taken to the Sign In page.
<a href=”https://pinewoods.churchtrac.com/connect?ei=4RSTD88″><img src=”https://i.ibb.co/zH6Mrc4/2021-John-1.jpg” alt=”2021-John-1″ border=”0″ style=”width:100%”></a><br>
That’s it! There are any number of use cases for this, and it greatly extends the functionality of your Page Cards within Church Connect.
Post a Comment