Hueman: the next generation has arrived!

Hypotheses offers its users access to the graphic themes developed by WordPress teams in priority, to insure greater durability, consistency and long-term flexibility for the platform. Find all the graphic themes available in the “Appearance” category of the House of blogs.

The Hueman graphic theme is not developed by WordPress teams, and has been added on Hypotheses to provide a quality replacement for an obsolete graphic theme that has since been removed from the platform, Magazine Basic. Hueman features many customization options, more advanced than those of the graphic themes developed by WordPress teams. It is also the theme that, on Hypotheses, most closely resembles the magazine format.

Article summary:

A special header

One of the main graphic differences between Hueman and the other graphic themes available on Hypotheses is in the header area of the blog.

It can contain:

  • A logo, from Appearance > Customize > Web Page Design > Site identity. Check “Display a logo in the header” and select a logo below (recommended size: 250 x 100 pixels). Note: the presence of a logo disables the display of the blog title;
  • A header image from Appearance > Customize > Header Design > Header image. Check “Use a header banner image” and select an image below (recommended size: 1380 x 280 pixels,.jpg format and 72 DPI resolution). Several images can be loaded and randomly changed if you click on “Randomize uploaded headers”. You can choose to check “Display your logo or site title, and tagline on top of the header image” to keep these elements in the header of your blog in addition to the header image;
  • A widget in the header, from Appearance > Customize > Header Design > Header Advertisement Widget. Check “Display a widget in your header” and specify whether you want this widget to be displayed on a computer, mobile, or both. Then in Appearance > Customize > Dynamic Sidebars and Widgets > Header (next to the logo / title), click on “Add a widget” to select the one you want to add to the area.
Header Advertisement Widget customization with Hueman

The color and font of your blog’s subtitle (“tagline” field in Settings > General) cannot be customized with the Hueman graphic theme. If you want to use a header image in light tones where the white subtitle would not appear with enough contrast to be readable, you may need to choose a header image that integrates the title and subtitle into the image, then disable the display of these titles and subtitle by unchecking “Display your logo or site title, and tagline on top of the header image”.

Featured posts

Homepage of a blog with Hueman and a presentation in a single column

The Hueman graphic theme emphasizes the featured images, which are by default displayed on the homepage or even in a slideshow by default associated with the tickets (see below).

 

The featured images are different from the illustrations incorporated in the body of an article. They are the images selected in the “Featured Image” block in the right column of the editing interface of an article. You have the choice between uploading a new image file from your computer or choosing an image already present in the media library of your blog (recommended size: 720 x 340 pixels,.jpg format and 72 DPI resolution).

Like the “Read more…” marker, which is recommended to be included in each of your articles, keep in mind that assigning featured images to your articles is also a very good practice, which we advise you to put in place. This will save you the sometimes tedious work, if you decide to change the graphic theme and opt for a theme that strongly exploits the featured images (as is the case for Hueman).

A little clarification: the fact of defining a featured image does not, of course, prevent you from including as many images as you wish in your article to illustrate it.

Your articles as a carousel on the homepage

Customizing a carousel on the homepage with Hueman

One of the highlights of the Hueman graphic theme is the ability to display a carousel of articles on the homepage. This feature is activated in Appearance > Customize > Front Page Content, by checking “Feature posts on top of your blog”. More options then appear, including:

  • The slideshow displays a configurable number of articles in “Featured posts” ;
  • Automatically featured articles are the last posts published in a category that you determine in “Select a category to feature”. For example, you can create a category specifically for this feature (called “Featured” in the example) from Articles > Categories ;
  • So that the articles automatically pass through as a slideshow, you must click on “Animate your featured posts with a slideshow” and choose a speed (5000 is a reasonable speed). Note: clicking on the carousel’s scrolling arrows pauses it.

In order to ensure that the images are displayed optimally in carousel mode (and if you use the default settings for the width of your blog), we recommend that you use featured images with a size equal to 720 x 340 pixels on your notes. If you use smaller images, they will be enlarged and therefore pixelated. If you use larger images, the corresponding files will be unnecessarily large and will slow down the display of your blog for your readers. Try to respect this homothety as Hueman will crop your images to 720 x 340 pixels no matter what.

Two columns for your articles

Two-column presentation of the homepage of a blog in Hueman

In a magazine spirit, Hueman offers by default a two-column presentation of the articles excerpts, in the form of thumbnails, on the homepage and when browsing by category. The rectangular thumbnails of the featured images associated with the articles have a size of 520 x 245 pixels. If you use the featured carousel, however, plan to use 720 x 340 pixel featured images.

If you prefer a more classic layout, in a single column (as in our Anthology blog), you can check the box “Display your blog posts as a standard list” in Appearance > Customize > Front page content. The featured images will then be placed to the left of each article excerpt in the form of 320 x 320 pixel square thumbnails. If you use the featured carousel, however, plan to use 720 x 340 pixel featured images.

Always use a.jpg format and a resolution of 72 DPI for lighter images.

Optimal browsing

Navigation between articles

Hueman offers two interesting features, allowing your readers to navigate between your articles.

In Appearance > Customize > Main body design > Single post settings, you can choose to automatically display links to similar articles at the bottom of the articles pages. Similarity can be defined by the same category, or the same keywords/tags. Keep in mind, however, that these suggestions are random, whether they are made on the basis of categories or keywords.

You can also choose, still in Appearance > Customize > Main Body design > Single posts settings, to display on the articles a navigational link to the previous and following articles, under the content or in the widget sidebars if they are enabled.

Three different menu locations

Hueman has another useful feature that makes for a simple and enjoyable browsing experience. This is the option of including three separate menus where you can arrange your articles categories or pages however you wish. You can also include links to external websites and resources.

As with all themes on Hypotheses, the menu settings can be found by going to Appearance > Menus:

If you have already created one or several menus for your blog and are migrating to Hueman, your menus will remain unchanged but you will have to decide where to position them in the Hueman theme:

  • Choose the menu you want to position by clicking “Select” in the dropdown menu.

  • Make any necessary changes to the structure and title of the menu – the menu title is only visible to users with editing rights on the blog.

  • Choose from one of three possible locations for the menu, then click “Save menu”. You can display the same menu in several locations. If you place a menu in a location that already contains a menu, the menu that was already there will be replaced.

  • You can also manage menu locations by going to the Manage Locations tab.

 

Menus

If you select Topbar, your menu will be located above the header and below the OpenEdition bar. This menu location includes an internal search field (shown by the magnifying glass on the right-hand side of the menu). One of its advantages is that this menu will always be visible even when you scroll down to the bottom of the page. Readers therefore always have access to this menu, even when they go to the oldest posts on your homepage.

If you select Header, your menu will be located below the header and above the slider.

If you select Footer, the menu will be located above the blog’s footer.

 

Positions des menus

If you have been using Magazine Basic up until now, you may think your menus have disappeared with the switch to Hueman. In fact, Magazine Basic had simply created two automatic menus from your blog’s categories and pages. No menu had actually been created in Appearance > Menus. In this case, you will have to start from scratch and create your blog’s menus. The old ones haven’t disappeared because they never actually existed.

If you have just created your blog on Hypotheses and have chosen to use Hueman, there will be no default menu on your blog. You therefore need to go to Appearance > Menus to create your menu(s):

  • To do this, fill in the Menu Name field (which only editors can see), then click Create Menu. You can add pages, links or categories to your menu by using the sections on the left of the screen. You can set the menu location in the Menu Settings section (see above for more details).

  • To create another menu, click on the “Create a new menu” link underneath the Edit Menus and Manage Locations tabs.

 

Choosing where to put your widgets: The agony of choice

Hueman offers three widget locations: two adjustable toggle bars next to the main post section and a footer zone (which can contain up to four widget columns).

Widgets Sidebars

Widgets Footer

To activate the widget zone in the footer and choose the number of columns it contains, go to Appearance > Theme Options > Footer.

You can vary the layout of the widget columns in different sections of the blog (homepage, category pages, archives, etc). To do this, go to Appearance > Theme Options > Layout. If you want to keep the widget layout the same throughout, choose the Global Layout setting.

To further customize your blog and widget layout, you can also create different widget sidebars to be shown in certain areas of your blog (homepage, category pages, archives, etc).

To do this, go to Appearance > Theme Options > Sidebars, then go to Edit in the Create Sidebars section.

 

Once you have created the sidebar and given it a unique ID name and title, click on Add New then save your changes by clicking on Save Changes in the top right of the window.

You can now choose the locations where you wish to display the widget sidebars you have just created (home page, post page, etc.). The locations are predefined and each location can contain up to two widget sidebars. If you don’t choose a sidebar for the location, the primary and secondary sidebars will be shown by default.

Here are the different locations that are available. They can be found at Appearance > Theme Options > Layout and Appearance > Theme Options > Sidebars:

  • Home: your blog’s homepage.

  • Single: widget sidebars placed here will be displayed when users are reading a post in full.

  • Archive: widget sidebars placed here will be displayed when users search for posts by date of publication on your blog.

  • Archive – Category: this name might seem misleading. Select this option if you want the widget sidebars to be displayed when a certain category of posts is displayed.

  • Search: the page that shows the results of searches performed on the site.

  • Error 404: this is your blog’s error page. For example, if one of your pages contains an incorrect link, readers will be redirected to an error page. It is therefore useful to display widget sidebars here to help users navigate around your blog and find the content they were looking for.

  • Default page: widget sidebars placed here will be shown on all pages of your blog, except if you have assigned specific widget sidebars to one or several of the locations described above.

In addition to these general settings, it is also possible to show the primary and/or secondary sidebar on each post. You can also set the layout of these sidebars using the Post Options menu underneath the editing page for each post.

 

You will notice that all the widget sidebars contain the headings “More” and “Follow”. The “Follow” heading takes users to your social network links, which you can configure by going to the Appearance > Theme Options > Social Links menu. The social network links will also be shown in the blog’s footer.

If you don’t want to display the “More” and “Follow” headings in your widget sidebars, move the Sidebar Top Boxes cursor to Off (in Appearance > Theme Options > Layout).

Once you have created and arranged the sidebars, you have to choose which widgets to display in them. This is very simple. As with any theme, simply go to the Appearance > Widgets menu.

On the left, you will see all the available widgets, which you can drag to the different locations shown on the right. These locations correspond to your various widget sidebars and the widget columns in the footer.

 

Zones de widgets

A few new widgets

The left-hand side of the Appearance > Widgets menu shows all the widgets that are available on your blog. You can activate the ones you want and place them in any of the widget locations you have created. Hueman has a few new widgets in addition to those offered on all Hypotheses sites:

AlxPosts provides a glimpse of some of the posts you have published on your blog. You can give this widget a title in the Title field. You can also display your posts’ featured images by ticking or unticking the “Show thumbnails” box, and you can set how many posts are shown in the “Items to show” field. You also specify whether the posts should come from a particular category (via the Category dropdown menu) or should be a random selection of posts (in this case, select All). The “Order by” menu allows you to specify whether the posts should be arranged by publication date, the number of comments they have received, or in random order. The “Posts from” menu allows you to specify whether the posts displayed should have been published within certain dates. You can also decide whether to show information about when the posts were published and what category they belong to. To do this, check or uncheck the “Show categories” and “Show dates” boxes.

 

Widget AlxPost

AlxVideo allows you to include a video on your blog by either entering its URL1 or using “Embed code”. This code can be used for exportable readers (i.e. external sites) and is generally provided by sites hosting videos (or other types of content). Site the Du multimédia dans vos billets post on the Maison des Carnets.

Widget AlxVideo

Exemple Wideget Video Vimeo

AlxTabs is an interesting widget, and contains up to four tabs:

  • The Recent Posts tab allows you to display the most recent posts published on your blog. If you check the “Show thumbnails” box, you will also display any featured images in posts. You can choose how many posts to display by filling in the “Items to show” field. The dropdown Category menu allows you to specify whether to display 1) the latest posts published on the blog, 2) posts from all categories (select “All”) or 3) posts from one category in particular. You can show or hide this tab on the AlxTabs widget by checking or unchecking the “Enable recent posts” box.

  • The Most Popular tab shows the most popular posts on your blog. The selection is based on how many comments each post has. The settings for this tab are similar to those for the Recent Post tabs. You can show or hide this tab on the AlxTabs widget by checking or unchecking the “Enable most popular posts” box.

  • The Recent Comments tab shows the most recent comments on your blog. You can show or hide authors’ profile image by checking or unchecking the “Show avatars” box. You can also choose how many comments to show in the “Items to show” box. You can show or hide this tab on the AlxTabs widget by checking or unchecking the “Enable recent comments” box.

The last tab, Tag, shows the tags associated with different posts published on your blog. You can show or hide this tab on the AlxTabs widget by checking or unchecking the “Enable tags” box.

The Tab Order section allows you to rearrange the four tabs by giving them each a number from 1 to 4. The tab numbered 1 will be shown first.

Finally, you can decide whether or not to display categories and posts’ publication dates in the Recent Posts and Most Popular tabs. To do this, go to the Tab Infos section.

 

Exemple de Widget AlxTabs avec 3 onglets

You now know everything you need to make a start with Hueman. If you have any questions that are not covered in this post, please take a look at the interactive tutorial, which is designed to help you get to grips with Hueman.

If you still can’t find the answer to your question, try posting it on the hypocommunity list (hypocommunity[at]groups.openedition.org), where other users will almost certainly be able to help you. If you are not signed up to this list and would like to be, please write to us at hypotheses[at]openedition.org.

 

1 The video therefore has to stored online. It is better to use a host other than Hypotheses for videos, as we have very limited capacity for video files.

Featured image: Responsive Web Design by Jeremy Keith (licence: Creative Commons by)

This post is a translation of this one, by Helen Tomlinson.

See you soon on Hypotheses!


François Pacaud

Responsable du service blogging scientifique / Head of science blogging department (Cléo/OpenEdition)

More Posts

Follow Me:
TwitterFacebookLinkedInFlickr

2 thoughts on “Hueman: the next generation has arrived!”

Comments are closed.