Add Link to Featured Image for Front Page

On each of the 3 pages that you want to link to, set a featured image (bottom right of each page’s edit panel). Then choose those pages in Appearance > Customize > Front Page.

Thanks for the response, I do appreciate help!

I don’t have any problem getting the images to show up on the front page, I do know about that.

What I am trying to do is to make those images “linkable” so that viewers can click on the image and be taken to the relevant page.

In other themes and media management this option exists, but I can’t see how to do it here.

Nicolas says that he will include this feature in the future plugin release but in the meantime is there a simple way to do this?

If it requires a code snippet I could not find one on the TC site.

Thanks, Tom

The way I achieve it is to use the Redirection plugin.

Check out the link that the image is pointing to, and then redirect that link to the external link.

For example, a page set up for Products would be pointing to https://www.mysite.dev/products/. Using redirection, I can point it:
/products/ redirect to https://www.newsite.dev/page

That would work, if the the image had a link.

I am trying to figure out how to add a link to the featured image.

This is easy of course in any media placement, just add the html. But I cannot find any place to add that to the featured image in the customizr theme.

Should be a simple fix but I haven’t found it yet.

Thanks, Tom

I explained above. You need to go to the page and add the featured image to the page. Then in Appearance > Customize > Front page, you add that page to your featured pages.

So you don’t add a link to the image. You add an image to the page and add the page to your featured pages. The image is thereby linked.

If your images are not being linked properly, then maybe you have a plugin conflict. A link to your site would help diagnosis.

Hi Electric Feet,

I apologize for not leaving a link to the site, big oversight.

It is https://www.greatoralhealth.com.

Thanks for repeating the answer, it helps.

I do believe I followed that path of instruction, but the featured image being pulled does not link, only the read more button.

Tom

The featured images (e.g. The thumbs up) are linking through fine for me.

Maybe this is helpful…maybe not…I am not an expert and I have not used the featured pages functionality so I have no particular experience here…but…

When I visited your site…only the top left portion of the images link through…the round-div is not lined up with the thumb-wrapper…something is interfering here…

On a side note…your facebook icons have issues as well…

Maybe plugin conflicts?

Edit: I also notice you have duplicate css entries…are you entering the same css changes in two separate places?

Hmmm, this is interesting.

Electricfeet, you are right that the images link but as the other fellow commented they only link in the upper left corner.

This is not a plug-in conflict, as that likely would not allow any linking at all.

It may be with the CSS I had to come up with to disable the “round div” default styling as I want the full square to appear and also I had to disable the default zoom effect.

I used code snippets from the documentation but there must be a user error on my end or a mod that needs “mod-ing”

Anyways, thanks a lot to you both. At least I now know which tree in the forest to bark at.

Tom

Electricfeet, you are right that the images link but as the other fellow commented they only link in the upper left corner.

This is not a plug-in conflict, as that likely would not allow any linking at all.

You seem to have code in a child theme and in the Custom CSS. Together they are shifting the anchor out of range.

Okay…I am not an expert, but try this…

First, clear out your duplicate css…use either custom css or child themes stylesheet, not both…

Next, replace this:

.round-div {
  display: block;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: absolute;
  width: 170px;
  height: 170px;
  z-index: 99;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 900px;
  border: 0px solid #fafafa;
  border-image: none;
  top: -66px;
  left: -54px;
}

With this:

.round-div {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-color: transparent;
}

Thanks,

It now works beautifully.

I had multiple issues beyond this with caching and some plugins that someone else added that was preventing changes from the style.css sheet taking effect, hence the duplicate CSS. A mess to clean up but after a few hours and some help from wpengine (big thanks) it was all clear.

Added your simplified CSS and it is good.

Tom

Just as a note to Nicholas, the theme developer.

The premium plug-in, FPU, still overwrites this styling. I reactivated it, saw that it put the round-div styling back and so deactivated it.

Really should be an option.

Thanks, Tom

You are welcome…

But…just checked and it is still not perfect…on smaller viewports it defaults back to zoom effect and the underlying images do not resize…do not know what it is supposed to do, as I mentioned earlier, I have not used this feature of Customizr…so will have to see if I can figure out how to address that as well…

Edit: didn’t realize you had the fp unlimited plugin…maybe it is slightly different…

What styling did you lose when you reactivated the fpu plugin? If it was just the zoom effect, try adding this to the round-div code I gave you above somewhere between the { } and see if it helps:

-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;

If it is something else…the fpu plugin has a dedicated forum here.