Link Quote To URL

Hi.

I think I can help.

I love Quotes Collection. I’ve got Version 1.5.9 in xampp in localhost running on my laptop. Site’s not online yet, but I’ve been able to use html and css in my quotes, adding a drop-cap code to enlarge the opening quotation mark, and even adding an image above each quote. I don’t see any reason why you can’t put a manual link around the text of your quote to link it to the url of your post. You’d probably have to use a snippet of css to remove the link underline. I’m no pro at any of this, I just fiddled around until things worked.

Here’s my quote from William Blackstone in the Quotes Collection panel.

1 – https://bit.ly/2NEU9CN

Here’s my code for that, written right into the Quotes Collection panel where the quote goes:

<br /><span style="float:left;color:#D4D4C7;font-size:44px;line-height:35px;padding-top:3px;padding-right:3px;font-family: Times, serif, Georgia">"</span>...but every wanton and causeless restraint of the will of the subject, whether practiced by a monarch, a nobility, or a popular assembly, is a degree of tyranny.</p>

If I now want to link that quote content to a post url, I add:

xxxxx

with xxxx being the place holder for the whole content of the quote.

The result is a blue link on the quote TEXT in the Quotes Collection panel (no highlight in this case shows up on the image even though it’s included inside the link around the quote):

https://bit.ly/3bkBNz8

Here’s how that looks on the site (no change in appearance by default):

https://bit.ly/3pFlJgo

Now, if I hover the cursor over the text of the quote, the text changes color and is underlined:

https://bit.ly/3dxEC2I

Clicking it actually brings up the desired page added with the regular html link code.

If you don’t like the underline and highlighting on your quote content when you hover the cursor over it, you can use a bit of css locally to remove the link’s “text decoration”. Here’s a quick sample online of how to configure your link to do that:

https://support.e2ma.net/s/article/Remove-underline-from-links

I hope that helps.

And I hope the example above will give everyone using Quotes Collection ideas on how to dress up quotes with an image and css. There seem to be a lot of posibilities with this great plugin.

Don’t worry about that broken image, it’s because it’s not online, it’s in my localhost. Substitute any image you like for your own quotes if you want to try this.

Oops, something’s missing, the LINK code:

<a href="https://localhost/Confederation_of_Canada_as_a_War_Measure/about/w-p-m-kennedy-1922-the-confederation-idea/">xxxxx</a>

Hi nsim2021, thanks for your response! I’m a css noob, and prefer to use plugins as-is, so am keeping my fingers crossed for a url solution from the developer.

Hi. You don’t need css to put the link around it. I just happened to use my own existing quote as an example, it already has css in it by me for other purposes.

It’s very simple to add a link from your quote to a desired page. Put the ordinary link code in front of your quote content:

<a href="https://PAGE.html">

And put this after your quote content:

</a>

Problem solved.

Oh, that simple! That works like a charm, thanks!

Only downside is that the target=’_blank’ doesn’t save (disappears from the field), so the quote source page loads in my site’s tab.

Glad to hear it.

First, are you sure you want a lot of new pages to load? They will clutter up the visitor’s browser….

Meantime, I’ll have to work on this question, I’ll get back to you.

Thanks, @nsim2021! Yes, I do want the links to open new tabs. My policy is to open internal links (within the site) in the same tab, but external links, like quote sources, in new tabs. That way, I don’t send people away from my site.

In any case, it should be a simple matter of accepting the A tag literally, with whatever attributes I want to add, shouldn’t it?

• This reply was modified 3 years, 8 months ago by Floris.