External link attributes?

Permalink 4 users found helpful
Is it possible to assign attributes to an external link? When I click on the external link in the site map, none of the typical options (like "edit") appear. I would like to be able to add a description to the external link, so that it can be displayed in a page list properly. Has anyone else ran into this?

hursey013
View Replies:
Mnkras replied on at Permalink Reply
Mnkras
yea external links need more options, like if they open in a new window or the same one
hursey013 replied on at Permalink Reply
hursey013
I didn't think it'd actually work, but I just used Firebug and manually changed the cID in the "Properties" link of another page to the cID of my external link. This allowed me to bring up the Properties window for the external link and I was able to add in a description that way... who knew.
Mnkras replied on at Permalink Reply
Mnkras
ha, thats awesome

now an easy way needs to be added to the core XD
jaline replied on at Permalink Reply
jaline
Hey, how exactly did you do this? I tried this method in the site map section of the Dashboard and it didn't seem to work. Do you have the steps? I used Firebug as well, and I'm trying to get the attributes to work for external links. Thanks.

EDIT: nevermind, I forgot to change the most important cID, and changed the other IDs instead. It's just easier if you change all 3 of the ones that show up for each link to make sure it works.
mrjcgoodwin replied on at Permalink Reply
mrjcgoodwin
Brilliant! Also works in Chrome Dev tools panel
foster replied on at Permalink Reply
foster
Thank you so much for posting this trick - and yes, it still works in 5.5.2!
kricir replied on at Permalink Reply
kricir
Thanks for the tip...

Concrete 5.6.3.1 You only need to inspect element and remove "Link" from tree-node-alias on the Div tag
RyujiS replied on at Permalink Reply
RyujiS
I would also request that the property editor can edit the path that appears when accessing to pages placed under the link page on the site map. Please find out another thread I started today for the context of how it's important.
edenxavier replied on at Permalink Reply
edenxavier
Anyone found a more elegant workaround? Hursey's workaround works perfectly; I had to use it just a minute ago for a multilingual website. I had to use it on-top of a image nav hack from codeblog.ch. The image hack required access to attributes and well, lo and behold, one of the links for the autonav was an external link. Hopefully the option for attributes for external links gets some consideration.
jaline replied on at Permalink Reply
jaline
Hey, this method worked for me too. Amazing! Too bad Concrete doesn't have this implemented yet.
Xyllomer replied on at Permalink Reply
Xyllomer
On a related note, does anyone know how or where I would modify C5 core code to automate adding an icon to an external link, a la Wikipedia?

I understand perfectly well how to do this in CSS and to apply said style to every external link on my site manually. My question is automating it so that I don't have to call the style manually for every external link.
jordanlev replied on at Permalink Reply
jordanlev
If you don't care about IE6 compatibility, you could use a CSS attribute selector:
#nav a[target=_blank] {
    /* background image or whatever styles you want here */
}


If that's no good, you could create a custom template for the autonav block:

* Copy YOURSITE/concrete/blocks/autonav/view.php to a new folder you'll create: YOURSITE/blocks/autonav/templates/

* Rename that newly-copied file to "style_external_links.php"

* Edit that file, find this chunk of code:
if ($c->getCollectionID() == $_c->getCollectionID()) { 
   echo('<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" ' . $target . ' href="' . $pageLink . '">' . $ni->getName() . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
   echo('<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '" ' . $target . '>' . $ni->getName() . '</a>');
} else {
   echo('<li><a href="' . $pageLink . '" ' . $target . ' >' . $ni->getName() . '</a>');
}

and replace it with this:
if ($c->getCollectionID() == $_c->getCollectionID()) { 
   echo('<li class="nav-selected nav-path-selected' . (($target=='target="blank"') ? ' nav-external' : '') . '"><a class="nav-selected nav-path-selected" ' . $target . ' href="' . $pageLink . '">' . $ni->getName() . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
   echo('<li class="nav-path-selected' . (($target=='target="blank"') ? ' nav-external' : '') . '"><a class="nav-path-selected" href="' . $pageLink . '" ' . $target . '>' . $ni->getName() . '</a>');
} else {
   echo('<li' . (($target=='target="blank"') ? ' class="nav-external"' : '') . '><a href="' . $pageLink . '" ' . $target . ' >' . $ni->getName() . '</a>');
}


* Now go to the page (or pages) with the autonav block, enter edit mode, click on the block, choose "Custom Template", and pick "Style External Links" from the menu.

* Now all external links should have the "nav-external" class on the LI, so you can style them like this:
#nav li.nav-external a {
  /* background image or whatever styles you want here */
}


Hope that helps!

-Jordan
Xyllomer replied on at Permalink Reply
Xyllomer
That is helpful in a sense, but what of external links that I don't open in a new window (target blank)? Also, while it is helpful to know this for modifying external links that open in new windows in the nav block, I meant generally, on the entire site. For example if a user is entering content on a page, and adds in the middle of that block of content, "and here is my favourite link to that subject (insert link to Wikipedia here), blah blah blah" - > they will not know to call the CSS style for an external link in the text editor. And, well, they shouldn't have to know, either, that is why we designers are here. So, how would one go about automating that?
jordanlev replied on at Permalink Reply
jordanlev
Oops, my apologies -- I mistakenly was thinking only of links that open up in new windows, not all external links.

Well there is another attribute selector you can use for external links:
a[href^="http:"]

although this might not work depending on if concrete5 is outputting fully-qualified URL's or not. You might want to dig around and find a selector that works on "all a tags whose href does NOT start with YOURDOMAIN.COM" - I believe I saw something like this once but cannot find it now.
Xyllomer replied on at Permalink Reply
Xyllomer
Hmm, alright, I will dig around then - thanks for the speedy and helpful reply!
LX666 replied on at Permalink Reply
A more convenient solution than to trickle with Firebug is to go to the page search tab (/dashboard/sitemap/search/), there you will not only find your pages, but also external links.

By clicking on it, you get the same options as a normal page and you will be able to add even your own attributes to an external link.

rgds, Alex.

-- Edit:
Nevertheless it would be great to have some kind of a stripped down functionality directly in the sitemap -- you won't need things like choosing a design or setting a meta description for an external link, but attributes would make sense.
adz replied on at Permalink Reply
adz
There are two ways of doing this,

One you go to the sitemap search page and find it and you can access it, or you can modify your ccm.app.js file so that it will display the properties option on your drop down.

To do this, you need to find this part of the code:

e.cAlias=="LINK"&&e.canEditProperties&&(r+='<li><a class="ccm-menu-icon ccm-icon-edit-external-link" dialog-width="350" dialog-height="170" dialog-title="'+ccmi18n_sitemap.editExternalLink+'" dialog-modal="false" dialog-append-buttons="true" id="menuLink'+e.cID+'" href="'+CCM_TOOLS_PATH+"/edit_collection_popup.php?rel=SITEMAP&cID="+e.cID+'&ctask=edit_external">'+ccmi18n_sitemap.editExternalLink+"</a></li>");


and change it to this

e.cAlias=="LINK"&&e.canEditProperties&&(r+='<li><a class="ccm-menu-icon ccm-icon-properties-menu" dialog-width="670" dialog-height="360" dialog-append-buttons="true" dialog-modal="false" dialog-title="' + ccmi18n_sitemap.pagePropertiesTitle + '" id="menuProperties'+e.cID+'" href="' + CCM_TOOLS_PATH + '/edit_collection_popup.php?rel=SITEMAP&cID='+e.cID+'&ctask=edit_metadata">'+ccmi18n_sitemap.pageProperties+'<\/a><\/li><li><a class="ccm-menu-icon ccm-icon-edit-external-link" dialog-width="350" dialog-height="170" dialog-title="'+ccmi18n_sitemap.editExternalLink+'" dialog-modal="false" dialog-append-buttons="true" id="menuLink'+e.cID+'" href="'+CCM_TOOLS_PATH+"/edit_collection_popup.php?rel=SITEMAP&cID="+e.cID+'&ctask=edit_external">'+ccmi18n_sitemap.editExternalLink+"</a></li>");



This now puts a properties button in the drop down for you.


Adam.
PatrickHenry replied on at Permalink Reply
PatrickHenry
Both methods work, but the Page Search feature is the most robust.
I love your second method, but might I add a bit of advice for noobs, the file mentioned that needs editing—
ccm.app.js
—is found in the
site_root/concrete/js
folder.
The concrete folder is what's powering your website, so don't be playing around in there.
But you need to go there to COPY the ccm.app.js file limegreentangerine/Adam cites for editing.
Then, paste a copy in the
site_root/js
folder.
This will allow your update to remain in tack if you update concrete5 core.
In fact, it's best practice to do any and all over-rides this way.

That being said, this is awesome, but for some reason Adam it works perfect for me as admin, but my most powerful editors can see it in the pop-up, but the window doesn't show anything, just the tabs. Odd.

So, I went to pg. search method as admin and set some permissions on it as it had none. So I added only those needed for an external link. No Design or anything like that. Namely, Pg. Permissions, delete, move, etc. After doing that, it works for my power editors.

Any insight into how they can see it when they create an alias by default? Otherwise, I've gotta set permissions for any external link someone creates. Not ideal.
My power editors have all the main permissions except empty trash, I think.

Thanks again, this is killer. It needs to be part of the core.
Briann replied on at Permalink Reply
Excellent solution! Thanks, both of you.
The only thing that hasn't been mentioned yet, is that (apparently) in newer versions of C5 (in my case 5.6.2.1) some things have changed in the javascript file.

You should look for the following code:
if(obj.cAlias=="LINK"&&obj.canEditProperties){html+='<li><a class="ccm-menu-icon ccm-icon-edit-external-link" dialog-width="350" dialog-height="170" dialog-title="'+ccmi18n_sitemap.editExternalLink+'" dialog-modal="false" dialog-append-buttons="true" id="menuLink'+obj.cID+'" href="'+CCM_TOOLS_PATH+"/edit_collection_popup.php?rel=SITEMAP&cID="+obj.cID+'&ctask=edit_external">'+ccmi18n_sitemap.editExternalLink+"</a></li>"}


And replace it with:
if(obj.cAlias=="LINK"&&obj.canEditProperties){html+='<li><a class="ccm-menu-icon ccm-icon-properties-menu" dialog-width="670" dialog-height="360" dialog-append-buttons="true" dialog-modal="false" dialog-title="' + ccmi18n_sitemap.pagePropertiesTitle + '" id="menuProperties'+obj.cID+'" href="' + CCM_TOOLS_PATH + '/edit_collection_popup.php?rel=SITEMAP&cID='+obj.cID+'&ctask=edit_metadata">'+ccmi18n_sitemap.pageProperties+'<\/a><\/li><li><a class="ccm-menu-icon ccm-icon-edit-external-link" dialog-width="350" dialog-height="170" dialog-title="'+ccmi18n_sitemap.editExternalLink+'" dialog-modal="false" dialog-append-buttons="true" id="menuLink'+obj.cID+'" href="'+CCM_TOOLS_PATH+"/edit_collection_popup.php?rel=SITEMAP&cID="+obj.cID+'&ctask=edit_external">'+ccmi18n_sitemap.editExternalLink+"</a></li>"}


Hope this is helpful to someone.
PatrickHenry replied on at Permalink Reply
PatrickHenry
Right on!
I'd like to issue another word, this time of caution.
I ended up removing this. It was very useful during the build process, but we're beyond that now (2,000+ pgs deep and counting) and it's easy enough now to just use Dashboard/Page Search method since we're not creating these en masse anymore.
My caution on this is that it may cause other features of c5 to behave unexpectedly, especially packages.
I can't recall the issue now, it's been a few months ago, but over-riding the ccm.app.js file did cause some unexpected—and undesirable—issues later on. We identified it as the over-ride that was causing the issue and removed it…it'd served it's purpose at that point…and all was well again.
Granted, it may have been b/c I updated the core and didn't think to go and update the override ccm.app.js file w/ the core's new file. Highly likely that was the issue really. But my point is that the ccm.app.js file is a pretty crucial file that does get core updates often. It's difficult to remember to update your override, so just a word of caution to others out there.
Briann replied on at Permalink Reply
Thanks for your word of caution, I will definitely keep that in mind!

In our situation this will be used as a major feature to keep the site up to date (continuously new external links will be added), so I will stick with the override for now.
Briann replied on at Permalink Reply
Apparently, things have changed again in 5.6.3.1.

In case you want to make this modication, you should change (in your override of ccm.app.js):

"LINK"==a.cAlias&&a.canEditProperties&&(d+='<li><a class="ccm-menu-icon ccm-icon-edit-external-link" dialog-width="350" dialog-height="170" dialog-title="'+ccmi18n_sitemap.editExternalLink+'" dialog-modal="false" dialog-append-buttons="true" id="menuLink'+a.cID+'" href="'+CCM_TOOLS_PATH+"/edit_collection_popup.php?rel=SITEMAP&cID="+a.cID+'&ctask=edit_external">'+ccmi18n_sitemap.editExternalLink+"</a></li>")


to:

"LINK"==a.cAlias&&a.canEditProperties&&(d+='<li><a class="ccm-menu-icon ccm-icon-properties-menu" dialog-width="670" dialog-height="360" dialog-append-buttons="true" dialog-modal="false" dialog-title="' + ccmi18n_sitemap.pagePropertiesTitle + '" id="menuProperties'+a.cID+'" href="' + CCM_TOOLS_PATH + '/edit_collection_popup.php?rel=SITEMAP&cID='+a.cID+'&ctask=edit_metadata">'+ccmi18n_sitemap.pageProperties+'<\/a><\/li><li><a class="ccm-menu-icon ccm-icon-edit-external-link" dialog-width="350" dialog-height="170" dialog-title="'+ccmi18n_sitemap.editExternalLink+'" dialog-modal="false" dialog-append-buttons="true" id="menuLink'+a.cID+'" href="'+CCM_TOOLS_PATH+"/edit_collection_popup.php?rel=SITEMAP&cID="+a.cID+'&ctask=edit_external">'+ccmi18n_sitemap.editExternalLink+"</a></li>")


Hope this is useful for someone.
tabercreative replied on at Permalink Reply
tabercreative
Have you had any trouble with the attributes being ignored?

Exclude from Nav and Exclude from Page List seem to be ignored entirely. The page list and autonav blocks display the external links regardless.
Briann replied on at Permalink Reply
I just checked for you with the attribute Exclude from Nav.
However, it is working just fine for me.
goodnightfirefly replied on at Permalink Reply
goodnightfirefly
I've made a pull request that allows attributes and permissions for external links, and is currently under discussion https://github.com/concrete5/concrete5-5.7.0/pull/2089...
tabercreative replied on at Permalink Reply
tabercreative
Any ideas how to apply this in 5.6.3.3? I have several sites that could use this.
mrjcgoodwin replied on at Permalink Reply
mrjcgoodwin
Just curious as to whether this progressed any further towards being included in the official releases?
mrjcgoodwin replied on at Permalink Reply
mrjcgoodwin
@tabercreative Revisiting an old thread I know, but can confirm this hack as per Briann's post above is still working for me in 5.6.3.4 - using it for apply link-specific classes for a single page template with smooth scrolling anchor links.