Posted by nathancraig on Wed, Oct 28, 2020 - 5:42pm

Hi I'm a brand new Backdrop user, and really liking it very much. I'm using Backdrop to set up a site for our coalition to end private prisons in our state. I'd like to make an attractive list of partner orgs with their logos and links to their sites.

  • I started out with partners as a bulleted list.
  • I'd like to include partner logos and names as nice neat boxes similar to the screen shots of the triplo website shown below.
  • I'm not sure how to do this.

Would someone be so kind as to point me in the right direction?

Below is an approach I tired that works but isn't quite there yet. I could use a bit of help with the finishing touches or perhaps there's another approach to consider.

With guidance from @klonos I tried:

  • Creating a new content type `partners` that in addition to tile and body contained a logo and link.
  • Create a new node for each partner
  • Having created those nodes, create a view that was output as a table.
  • This was nice an approximation and works for the time being. Side Note: I'm not quite clear how to format the table (i.e. center it and set border = 0). I think this requires hand coding, which is fine, but not quite sure what file that would be.

Setting view output as a grid rather than table is closer to what I was looking for. However, I don't know how to leave off author information or perhaps make the logos themselves links to the various orgs (see screenshot below). I'm guessing coding this is going to be similar to the table above. Again, I'm not quite sure what file to modify to make these changes.

Anyway, the first goal was to try to create a set of blocks with links to the org pages associated with the logos. The grid output of a view is pretty close. Any ideas about how fine tune this, or insight if there's another way, would be much appreciated. Thank you in advance for your time.

Accepted answer

Making the logos link to a URL

There's a few things you can try in Views:

  1. Edit the Link field and try setting the Formatter to 'URL, absolute'
  2. Edit the Logo field and, near where you enter the link token, tick the 'Use absolute path' box

BTW, you correctly entered the token the first time as '[field_link]' (the other one you tried definitely won't work). Think of tokens in Backdrop like shortcodes in Wordpress.

If that still doesn't work, take a look at the URL you're entering in the Link field when you create Partner content. Is it a full URL there?

Make the unordered list into more than one column

Yes, this is definitely a CSS thing. On your site will be a theme (check the 'Appearance' link in the admin bar). This controls the look and design of the site. The default theme, if you haven't installed/enabled a different one, is called Basis. However, Basis is a core theme and it's not recommended to add or change CSS in core themes. You're supposed to make a sub-theme of Basis and make your desired changes there. Fortunately, someone's already done that for you!

Thesis (https://backdropcms.org/project/thesis) is a sub-theme of Basis that you can install and enable. Your site will look the same, since Thesis merely acts as a place for you to make your own changes. So install Thesis, make it the default theme, then edit the css/skin-thesis.css and make your changes there.

You can read about themes and installing new ones here: https://backdropcms.org/user-guide/themes

Let me know if that helps. Happy to give more advice/support if not.

Comments

Wed, Oct 28, 2020 - 6:59pm by BWPanda (not verified)

You're on the right track with setting up a new 'Partner's content type and using Views to output the information.

Most (if not all) of what you want to do should be possible using the Views UI, so you shouldn't need any custon code.

Firstly, make sure your view is set to show Fields, not Content:

Then you can specify exactly what fields/information gets output (i.e. if you don't want Authoring info displayed, just don't add that field).

To make the logos/images link to the organisation's website, add the Link field from your content type, set it to 'Exclude from display' (so that you can use the URL but users won't see it) and set the Formatter to 'URL, as plain text'. Now you have the plain URL of the organisation available to use in the view.

Now edit your Logo/image field, expand the 'Rewrite results' section and tick 'Output this field as a link'. Now you need to find the special code for the hidden URL. Scroll down and expand the 'Replacement patterns' section. Find the '[token]' for your Link field, then copy and paste that into the 'Link path' field above.

You can do the same thing for any other fields you want to link to the organisation's website.

Let us know how you go with that.

Thu, Oct 29, 2020 - 1:24pm by nathancraig

@BWPanda Very cool, your suggestion certainly moved the process forward. I was not aware of these various options previously. There are two remaining issues I'm not clear on.

Making the logos link to a url.

Right now, the logos are links but they don't point to the right url. Rather than pointing to an external url, they point to poppnm.org/<LINK TITLE> .

  • When editing the view, click on Fields > Content:Logo
  • Scroll down and expand Rewrite results, click "Output this field as a link"
  • Scroll down to and expand "Replacement patterns".
  • Here I see the text "[field_link] == Content: Link"
  • In the "Link path" field, I've tried two versions and both link to https://poppnm.org/<LINK TITLE>
    • [field_link]
    • [field_link] == Content: Link

I tried ticking "External server URL" but that didn't seem to do the trick either. Is there something I'm not setting up properly so that the URL rather than the link title is used?

Make the unordered list into more than one Col

Is there a way to make the unordered list into more than one col, and perhaps center it on the page? Does this need to be done with css? If it does, I'm not sure where to go to edit the css. Sorry if this last question seems obvious. I have done a very limited amount of css editing previously. In context of this CMS, I'm just not sure what field or file to edit so I'm altering the correct object.

Fri, Oct 30, 2020 - 10:30pm by BWPanda (not verified)

Making the logos link to a URL

There's a few things you can try in Views:

  1. Edit the Link field and try setting the Formatter to 'URL, absolute'
  2. Edit the Logo field and, near where you enter the link token, tick the 'Use absolute path' box

BTW, you correctly entered the token the first time as '[field_link]' (the other one you tried definitely won't work). Think of tokens in Backdrop like shortcodes in Wordpress.

If that still doesn't work, take a look at the URL you're entering in the Link field when you create Partner content. Is it a full URL there?

Make the unordered list into more than one column

Yes, this is definitely a CSS thing. On your site will be a theme (check the 'Appearance' link in the admin bar). This controls the look and design of the site. The default theme, if you haven't installed/enabled a different one, is called Basis. However, Basis is a core theme and it's not recommended to add or change CSS in core themes. You're supposed to make a sub-theme of Basis and make your desired changes there. Fortunately, someone's already done that for you!

Thesis (https://backdropcms.org/project/thesis) is a sub-theme of Basis that you can install and enable. Your site will look the same, since Thesis merely acts as a place for you to make your own changes. So install Thesis, make it the default theme, then edit the css/skin-thesis.css and make your changes there.

You can read about themes and installing new ones here: https://backdropcms.org/user-guide/themes

Let me know if that helps. Happy to give more advice/support if not.

Sat, Oct 31, 2020 - 11:19am by nathancraig

@BWPanda, thanks that worked! I never would have guessed it so this was a big help and led me to understand things much better. To summarize here's what worked:

  • create a custom content type `partners` that includes logo and url
  • create new node for each partner
  • create a view that is output as an unformatted list
  • add the desired fields (link, title, and logo). Place the logo later in the list than any other fields that may need to be accessed.
  • in the view, edit the link filed and set `Formatter` to `URL, absolute`
  • in the view, edit the logo field. Under `Rewrite results` tick `output this field as a link` Under the `link path` enter [field_link] and tick `absolute path`

I'll work on the theme and cols in the coming days, but this carried things forward considerably. Thank you so much.