NatureSpot Wildlife Guides

[davidnicholls125]

Could you consider whether this is possible and if so give an estimate of the time/cost to create a solution? The point below are largely my thoughts on how it could work. We have manually created this type of guide but it is time consuming (https://www.naturespot.org.uk/IDguides). • Guides to be designed with an A4 format but with a flexible number of pages, depending how many species to include. Can be viewed online but with the option to download as a pdf. • Each guide to feature selected species – displaying the gallery image, a short text (description/how to ID/where to see it/etc.) and the RAG icon. Either one species to a row or two to a row with the text beneath. Aim for 5 species per A4 page. Each species name/image is hyperlinked to the species page. • We will top and tail each guide with custom blocks – to be designed and inserted by us. Ideally with the option to insert additional blocks as section intros. • We would have a guide template where we can create new guides by naming and saving them. Adding in the header/footer blocks then or later. • To select the species we would do this on the relevant species edit page. We need a drop down menu of available guides to select from. Some species will feature in multiple guides so we need a list of those guides selected. • Also on the species page we need a new text field where we add custom text to appear alongside the species in the guide. This guide text doesn’t appear on the species page itself. • We need some way of ordering the display of species, but this could be done in the saved template itself. • Finally we need a URL to the guide so we can add this to relevant pages, publicise it etc.

[johnvanbreda]

We could use a Drupal taxonomy to create a list of guides, like the menu items. We can customise the edit page for the Guide term so the term is the guide title and there would be custom fields for the header and footer of the guide.

Then you can add a control for tagging the guides that a species belongs to on the species account edit page, which would allow 1 species to belong to several guides. There can also be a custom edit text area for guide specific text.

There would be a custom page for the viewing of a guide, which you control the web address of, that shows the header, list of species output as tiles or similar including image, RAG and text, then the footer.

We can add a PDF generator button to the guide - though this comes with a caveat that auto-generating PDFs is a little less reliable than using Word or similar to do this, e.g. controlling page breaks may be fiddly.

The above is relatively easily achieved using Drupal standard tools, though getting layout right will take a little time. I would suggest we could get the basics working in 1 day (without PDF) but allow an extra day and a half for refining the layout/template so it looks good and adding the PDF generation. The one requirement that isn't easily covered by this approach is a custom sort order for each different guide. We could sort by the menu title (so species are grouped correctly) then genus/species, or we could add a sort order field, but the sort order would be the same across all the guides. Does that matter?

[davidnicholls125]

Good news! The grant has been approved so we would like to proceed with this. On reflection I think we will need to be able to select the species image we want to use. In some cases we have two or more gallery images (eg male and female) so would need to select the one we want. In other cases we may want a guide to say footprints where the appropriate image isn't selected as the gallery image. This means that different guides may want to use different images from the same species page. Can you think of a solution to make this work? Also the order may be important in some cases so we do really need to be able to set this.

[johnvanbreda]

@davidnicholls125 have thought a bit more and have come up with a slightly more flexible approach:

1. A new content type, Wildlife Guide, which has a title, header text and footer text.
2. Another new content type, Wildlife Guide entry, which has the following fields:
   • Link to species
   • Link to guide
   • Guide text
   • Weight (for sorting)
   • Image (right click on the image, select Copy Link, then paste into this box).

Then the guide page will be constructed as the following:

1. Title
2. Header
3. List of species linked to the guide, showing the image plus text, sorted by weight.
4. Footer

This approach is much more flexible, but means you copy and paste the image link into the guide entry rather than edit the image and tag it. It also means the guide text for a species is edited in a different place to the species details - meaning you can have multiple guide texts for a species when it appears in different guides (so a footprints guide and a night sounds guide could both have different images and text for a fox, for example).

I'm proceeding on this basis - so let me know ASAP if you see any fundamental flaws.

[davidnicholls125]

Thanks John. That all sounds sensible as it gives us more flexibility as you say.

[johnvanbreda]

Good. I've set up a Wildlife Guide content type and a Wildlife Guide entry type, with a couple of entries to test it. Please can you have a go at setting up one or two guides with at least a small handful of species - once I can see the nature of the content I can do the work required to lay it out nicely.

[davidnicholls125]

I've created the Ratby Ferndale Drive Verge guide with 10 species, which is likely to be the norm. A few considerations:

1. Though useful to be able to edit the species text, we don't want to have to write it afresh for each entry. Could standard text be added to the species page and then brought into the template (copied?) when that species is selected? It would need to be editable for each guide but in many cases the standard text would suffice.
2. There needs to be a link to each species page somewhere.
3. On drupal, weightings put smaller numbers at the top so can we do the same? Numbering 1-10 then seems intuitive.
4. The header/footers need to be formatted with some colour please.
5. Can we haver the option to drop in a header image - panorama style?
6. We need a title box that includes both the guide name but also 'NatureSpot Wildlife Guide' or something similar. We also need both the NS and County Council logo adding somewhere - probably at the end.
7. On the guide page, can we add edit links to each included species? Eg. to amend text/weightings etc.
8. What happens if the selected image gets unpublished on the species page? Is the link lost?

[davidnicholls125]

There will be times when we want to another image or two, for example to show ID features, but this could be done in the text box I think. In these cases, maybe a table layout would be the best solution. Would this be easy to set up and do we need a template?

[johnvanbreda]

1. It's a bit easier for me if we have a default guide text on the species account that shows on all guides, then the notes in the guide entry are optional extras specific to the guide which get appended to the default guide text. I've set that up with a bit of text on Oxeye Daisy so you can see how that works - let me know if OK.
2. The title of each entry now does that.
3. That's already done?
4. Done, but you can let me know if you want any changes.
5. Done - I've not tested this so let me know when you've added one so I can check the display.
6. Done.
7. I've added a link to edit the species account and to edit the guide entry.
8. No, the link is just to the image file on the warehouse, so is not affected by changes on Drupal.

I'm not quite sure what you mean by a table layout? A column per image won't work well with a variable number of images.

[davidnicholls125]

With the text, the default text wants to be on the species page, not on the guide. We will sometimes not want the default text or will want an edited version of it, so we need a way of editing this on the guide. Is there a way of automatically copying the default text into the guide entry when the species is selected? We can then either leave it as is or make any amends as appropriate. Also, when I removed the text from the Tortoise Beetle guide entry to put it on the species page instead, the image has disappeared from the guide. For the header and footer, we need something much more jazzy and not just type. Perhaps a background image? Or at least some graphic content. I had thought this might work by using a block, though not sure if this adds anything. I've added a panorama image and this works OK, though I didn't use one wide enough so would need to replace it. Regarding the suggestion of a table, I was trying to envisage how we could add more customised content into the text box, such as an image of an ID feature or a look-alike species. With these I wasn't thinking they would be automatically loaded like the main image but rather optional extras that we paste or upload. We would need a layout for the text area then that included both text and images, for example full width intro text (as we have now) with a small image/illustration beneath and some brief explanatory text alongside. I was thinking a table might be the easiest way of achieving this kind of layout. I've tried something like this on the Oxeye Daisy entry - though it isn't displaying on the guide, maybe because I've just pasted in an image - or maybe because it is a png file..... (I don't usually paste in images but it would make things quicker and easier if we could. I've had to make the text box full html to bring up the table option, does this cause any problems?

[johnvanbreda]

The default text is on the species page, not the guide. I can't easily make it copy over the default for you to edit though - at least it would take me more time to code than I think it would save unless there are a large number of guides. I've made it include the default text (from the species account), OR the guide-specific version (from the guide entry) but not both. So you would have to copy the text from the species account if you want a slightly amended version.

I've fixed the issue with the Tortoise Beetle going missing.

For the header and footer, I can of course style these more elaborately. Do you have any sketches/examples of what sort of thing you'd like? Would it be different imagery per guide, or the same for all?

I've made the panorama image fit the page width.

The pasted in image in your Oxeye table was indeed problematic and didn't work with the way the list of guide entries is being generated. I've added a more up to date method of adding images using the Media Library module (icon is an image with music notes) - it's available for Full Text and Filtered Text. This lets you upload files then select from a library of files on the server which is really the best way to do it in modern Drupal.

[davidnicholls125]

Is there a way of displaying the default text on the guide entry page to save going backwards and forwards between the pages? If it was in front of you then copying and editing would be a lot easier. With the header, I'll get back to you with a few thoughts. I think it would be a standard background with just the title of the specific guide overlaid. Would this work? The footer would be the same for all I think. Could we have the option to use an alternative header/footer if in the future there was a need? For example if we used a block for each, could we then design a different block if we wanted? Thanks for updating the image uploader. Is there a way of cropping and resizing in the library or would this have to be done before adding an image?

[johnvanbreda]

Is there a way of displaying the default text on the guide entry page to save going backwards and forwards between the pages? It's probably doable, but likely to take several hours to code. Do you think it is worth the effort?

If you can provide a background image for the title block I can experiment with overlaying the text. I've just switched the guide to use a more modern way of controlling layout called Layout Builder - this lets you control the block and content layout for a page type, then override it for any specific page. So you can completely customise the blocks and layout for any particular guide. If you search the internet for Layout Builder you should find plenty of tutorials about what it is capable of.

If you upload an image, depending on how I configure the block or field that outputs it, the "media style" chosen can apply various operations including cropping and scaling. I've already done that for the guide's panorama. But, I would still suggest that images are cropped and scaled before upload where possible - the scaling algorithms in a proper photo editor application are likely to be better and it also minimises the disk space required and the load on the server when the images are displayed after any clearing of the cache. It's also possible to configure Drupal so you can upload the original image, then crop and scale manually online, but I think that's an extra complexity that is probably not worth pursuing.

[davidnicholls125]

The flexibility of layout and block content sounds good, thanks. I've had a go at creating a header graphic in photoshop. I'll email you the original so you can access the layers (the file format isn't supported on github it says). If you prefer it in a different format just say.

[johnvanbreda]

That works well I think. I've created an image by removing just the guide name layer. After experimenting with blocks and finding it was more fiddly than I thought, I've added a new field for the banner image to the guide content type. This will default to the image you provided for new guides, but you can remove the media item and link to a different one if you prefer. As it uses the media library it's just a link, so you could have, for example, a woodland themed header image shared by several woodland related guides.

I also added stylesheet code so the title block will be overlaid on top of the header image.

On the guide you can still click the Layout tab to modify the specific guide's layout which would allow you to completely remove the block and replace it with anything else you wanted. As described above, you can do this either for all guides (Manage display tab) or just the guide you are viewing (Layout tab).

[johnvanbreda]

@davidnicholls125 just to let you know I've been battling with the PDF generator today and it's not quite behaving (yet). Some of my attempts mean the images are not loading correctly, so don't worry if you see some missing images etc.

[johnvanbreda]

@davidnicholls125 getting the PDF output to work has been a right pain. One thing I discovered is that pasting in the image as per your experiment actually breaks lots of things in a way I don't understand - the page starts getting network errors and all sorts of inexplicable things. So I've replace the image with a placeholder text.

I now have the PDF output working, except for when you are logged in with enough rights to edit - this causes the page breaks in the PDF file to go wrong. I've masqueraded as a normal user and it's fine so I think this relates to the tabs or quick edit links causing different page HTML., but I've spent several hours on it today with no joy so I don't think it's worth pursuing any more.

Other than that, is the Wildlife Guide functionality now OK?

[davidnicholls125]

Thanks for your persistence! Hopefully the pdf experience will be useful for other work...! A few observations/requests:

1. the panorama image isn't displaying...
2. for us to replace the header image, is there a set size requirement? Presumably we can use any image design as long as the over-layed title looks OK?
3. the title font is different to that used for 'Wildlife Guide' (Calibri regular). Can we standardise these?
4. we need a footer image with the logos, etc. I can design this but can you set up a temporary version so it is included and I can replace the image it later?
5. the standard guide will have 10 species and we want this to display on two sides of A4 so it can be printed as a single sheet. Can you tighten up the spaces please? Obviously the header/footer/panorama image are variable so assume we will keep these limited in size to the examples used in this test guide.
6. I've tried adding a supplementary image for Oxeye Daisy using the new media library tool. I resized it beforehand to 100px high but it isn't displaying at this size. Also the image title is showing which we don't want. How do we delete unwanted images from the library? With these additional images, I was thinking we can adopt a set image height (eg 100px) to ensure more consistency in design.
7. In the original brief, we mentioned wanting the option to add a section header/text. Can this be added?

[johnvanbreda]

1. Done. I hid it on the PDF though as it may take too much space for the 2 page layout.
2. Ideally the image should be 1120px wide (or higher) but other than that, as long as it looks OK it should be fine.
3. Done, though note that Calibri is not a standard font so works on Windows only. Other operating systems will fall back to a standard sans-serif font so will look similar but not identical.
4. Done. The default footer is currently the same as the header but we can of course change this.
5. I've done the best I can - is that OK?
6. When you insert media you can edit it and set the Display option. Default will be the original image. Thumbnail forces to 100px with a click to zoom. Panorama is full width. We can add other display options. You can go to Content > Media (https://www.naturespot.org.uk/admin/content/media) to access the full media list and delete them.
7. I don't think I picked that up from the brief - sorry. As the entries are output using a Drupal view, there are 2 ways I can think of doing this but neither are simple:
   1. add a section title and section text field to the guide entries. The view would then sort by section title first and output the rows grouped into sections. This approach means that all the guide entries in a section would need to share the exact same section title and intro text, otherwise if Drupal detects a change it would output a new section header and intro text. Not ideal but it's the only way to do it within a single view.
   2. if there are only ever going to be a limited number of sections (say, max 3) we can add a section number optional field to each guide entry. Then we can create 3 new views that are exactly the same as the current guide entry view but with an additional filter to only output section 1, 2 or 3 respectively. Then you can use the layout tab to remove the current view (which outputs the full list) and add in the new views (up to 3 depending on number of sections you require) and you can also add additional blocks with the section intros as required.

Both options are a bit fiddly and I'm not sure there is enough space on the 2 page PDF layout?

[davidnicholls125]

Thanks John, getting there!

1. Have you removed the new media library tool (with the music note)? On the template guide entry it just shows the two previous media links. One of these is the Imce File Manager where we can edit the images once uploaded. Is that what you are referring to in 6 above? If not, I can't see how to edit images in the Media Library tool. If I open a new standard page content it shows the 2 previous image icons but when I edited an existing standard page (https://www.naturespot.org.uk/node/226417/edit) it shows the Media Library icon and not the Imce icon.... (I'm confused which system we are supposed to be using...). I haven't seen the Display Option setting - where is this and in which media system?
2. Is it possible to edit the species image heights used in the guide? You have standardised the width but the layout would work much better if we could tweak some of the heights, eg Tufted Vetch could be cropped so it is a more standard size to match the others. If not, I'll write into the guidance to select images that are roughly square, but of course this will then restrict the choice.
3. I've created a footer and added this to the Ratby guide without a problem. How do I make this the default? Same for the new header image when done....
4. Is it possible to add a 'new entry' link on the guide edit page? (Opening a blank guide entry template). It's not crucial but would help speed up new guides I think.
5. In terms of the section intros, there will only be 1-3 so your second option sounds best. I'll have to look at the layout tab to clarify what settings to make but presumably this isn't difficult! We just need a section title and a sentence or two below so it shouldn't take up much space, but I appreciate it will expand the space needed. (The panorama image can be omitted or made slimmer as an option).
6. Instead of the line under the species name, can this be above it please - and line up with the top of the image. I think this will make more a clearer separation between the species entries.
7. The pdf downloads as 'report X' can it instead download with the guide title as the file name?
8. The pdf layout doesn't look as good as the web page layout. The font is larger so can this be reduced a little? Also the text doesn't render very well, it's a bit blurry...
9. Could you close up the spaces between the last species entry, the footer text and the logo image please?

I will ask a couple of the trustees to have a go at creating other guides and get their feedback as I'm not the only one who will be using it.

[johnvanbreda]

1. IMCE is an older way of supporting images, the Media Library was new in Drupal 8 so is the more "modern trendy" way of doing things. When you added the new guide entry, the text format was Basic HTML, I'd only added the button to the Full HTML and Filtered HTML text formats. Once you add a media library item to the content there is an Edit Media button which allows you to change the display format option. I've added the button to Basic HTML as well now. I guess if IMCE is working well for you it is fine to continue using it, but Media Library does bring a few new features which may be handy, e.g.: a. An IMCE image is just a file on a disk, whereas a Media Library entry is a fully-fledged piece of Drupal content. So we can add extra fields to the Media Library image type to capture other information, like the author, copyright, or whatever you want. b. Because it's a proper piece of content, a Media Library item can have different display styles. Each can have their own layout (using Layout Builder, so you can add blocks, captions, whatever). c. Also, each display style can have a different "media style" applied to the image. So we can have a single image in the library which can be output as a 100 x 100px thumbnail, or a wide panorama, or the original image with a caption, or whatever. We can do things like a thumbnail which zooms in to a full image when clicked on, etc. Drupal's media styles tool will handle the building of the image in the correct dimensions when you first view that image.
2. Not really, as these are the images uploaded with the records so we don't want to change them. However I've added CSS to limit the height to 240px which ensures they are no taller than roughly square.
3. To edit the fields (including the default image settting for the header and footer) - Structure >> Content Types >> All content types. Click Manage fields for Wildlife Guide. Edit the appropriate field then you can remove the existing default using the x button and add a new one.
4. Not without an hour's work or thereabouts. But you can go the page for adding new guide entries and click the yellow star/asterisk near the top of the page and it will be added to your Shortcuts tab, accessible from the top admin toolbar.
5. I've added a section number field to the guide entry. You can use the layout tab to change the layout for a specific guide, then remove the existing Wildlife Guide Contents block and add the appropriate section blocks (e.g. Wildlife guide contents: Block - section 1) and custom blocks.
6. Done.
7. Done.
8. I've reduced the font a little, but most of the differences relate to it fitting onto A4 which is narrower than our default screen layout on the website. The font blurriness is probably to do with your PDF viewer, if I zoom in on the PDF file I can see the font does re-render to a fairly smooth font:
9. Done

[davidnicholls125]

Thanks John, it looks better with these changes. With the image uploading, happy that we should shift to the Media Library throughout. Do we still need the other 'image' icon on the toolbar? It is confusing to have two options for those not familiar with adding images. As a trial, I've entered section 1 for all the plants and section 2 for the inverts. However looking on the layout tab I'm not clear which layout to choose and where to add a section header and a few words of introduction. Could you explain please?

[johnvanbreda]

I can remove the IMCE button, but are you certain you'll never need it? Perhaps we could leave it on the text formats other than Basic HTML (which is the default) so you can still access it?

I've re-organised the layout for the Ratby verge guide as a demo - you can revert to defaults to undo this if you want. Here are the steps:

1. Click on the Layout tab from the Guide's page.
2. Scroll down to find the blocks, starting with the header and title, then the panorama, then in section 3 the header intro text. Under this is a block for the guide entries. Click the pencil icon which appears when you hover near the top right of this block, then click Remove Block. Click Remove to confirm this in the panel on the right. (When I did this, the page didn't update, so I refreshed the browser page which worked).
3. Now, in section 3, under the Convert page to PDF button (still on the Layout tab), click Add Block. Click Create custom block to add a block for the header of the first section.
4. Use drag and drop to move the block inbetween the header text and footer text blocks.
5. Click the Add a Block button under the Convert page to PDF button as before. This time, find the Wildlife Guide contents: Block - section 1 and select it. A configuration panel appears on the right - untick Display title then click Add block.
6. Use drag and drop to move the block inbetween the header text and footer text blocks.
7. Repeat steps 3 to 6 for each section then save the layout.

[davidnicholls125]

Thanks! I reverted to the default and rebuilt it with sections so think I've got it! I was confused earlier partly because the layout had more sections that the two I had configured on the species entries. The guide page is saying there are unsaved changes but I'm not sure if this is right as all the changes are displaying and I had saved the new layout.... When I click on the pdf, the panorama image isn't displaying.... Also, on the pdf, can you close up the spaces above each section header block to help it fit onto 2 pages.

[davidnicholls125]

Regarding the image uploaders, we have three different options. In addition to the Imce button there is another button that just allows a simple upload and insertion. However I've worked out how to configure the toolbars so I can change the options whenever. One other question, I've used the Imce image uploader to add two subsidiary images to the Meadow Cranesbill entry, using a table to control layout. I'm trying to get space between the images and have changed both the cell padding and cell spacing settings - both work it seems on the entry page but don't work when viewed on the guide itself. What should I change?

[davidnicholls125]

Where do I access the Media Library display options? I've searched but can't find it. Looking online it says /admin/structure/media/manage/document/display/media_library but media isn't listed. I'd like to change the default mode to simply show the original image unchanged. Currently it displays a tiny thumbnail which when click displays in a separate window. Oddly, the thumbnail mode just expands and pixelates the image....

[johnvanbreda]

I've added the panorama back into the PDF - I'd deliberately removed it as I couldn't fit it onto 2 pages otherwise, so it's back to 3 pages now (along with the section headers, I don't think 2 pages is achievable now, even after closing the space above section headers a bit). One option might be to add a page break before each section, so you get a title page, then a page for each group. That would allow people to easily print just pages 2 and 3.

I've removed the extra image button as suggested (i.e. the non-IMCE or media library one).

Re the padding between images, I could add stylesheet code to do this as I think the cellpadding settings in the text editor then get stripped out when the content is displayed (as the HTML is cleaned up a bit before output to make it harder for spammers to insert dodgy code). Actually, rather than using tables for layout, it is better to use <div> to contain each block then use stylesheets to layout the divs. Fortunately, Bootstrap has a built in "grid system" which allows you to define a layout (see https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp). I've used this to add a second copy of the images, set to 2 quarter width columns - if viewed on a mobile device the columns will automatically stack on top of each other which is a benefit over tables. Also the grid system automatically has some padding.

The default view mode can be set on the Embed Media settings for the content text format - e.g. https://www.naturespot.org.uk/admin/config/content/formats/manage/basic_html?destination=/admin/config/content/formats - see the Embed Media tab near the bottom. You probably want the Original setting for Default View Mode.

[davidnicholls125]

Thanks John. I went through the guide with some of the other trustees last night to see if there was any further feedback. all were very positive and the only request was to add a date entry somewhere - Month + Year. Could this be automatically entered when the page is saved so it will update whenever any revisions are made? Not sure where best to insert it though. At the bottom below the logos perhaps - but very small! Will class="img-responsive" still work with the two image managers? I used the IMCE manager to add an image but the image responsive tag didn't work... We use this a lot so need a solution. I've added back the old image loader for now so we can continue to use it temporarily. In your message above, it looks like some text is missing after "it is better to use....". I've not looked at bootstrap before so will have a go.

[davidnicholls125]

I've had a go at using the div tags to add additional images in the guide below. It works pretty well I think - however the pdf version distorts the images. https://www.naturespot.org.uk/WildlifeGuides/12CommonLadybirds

[davidnicholls125]

When a new guide entry is saved, can the browser return to the guide rather than the page for that entry?

[johnvanbreda]

the only request was to add a date entry somewhere - Month + Year

I've added a date to the bottom of the guide. It's based on the changed date of the latest guide entry (not the guide itself), is that OK?

When a new guide entry is saved, can the browser return to the guide rather than the page for that entry?

No, certainly not easily.

In your message above, it looks like some text is missing after "it is better to use....". I've not looked at bootstrap before so will have a go.

The Github text formatter had stripped my example HTML code - now marked as code so <div> appears.

I've had a go at using the div tags to add additional images in the guide below. It works pretty well I think - however the pdf version distorts the images.

I've fixed the image distortion. This means your images are now variable height though.

[johnvanbreda]

@davidnicholls125 Please can you raise issues about the image insert buttons in a separate issue?

[davidnicholls125]

The date should be fine thanks. I guess it won't update if we change the default text, only if we change a species entry?

The image height is more of an issue as I think it doesn't look great with variable heights. I had deliberately resized every image to 150px. We should therefore be able to display them without any adjustment..... Can you look again at this please?

[davidnicholls125]

I've just replaced the panorama image on the guide below and it has duplicated it in the display. I've removed and re-entered it but with the same result. https://www.naturespot.org.uk/WildlifeGuide/CotesbachMainStreetVerge

[johnvanbreda]

Regarding the image height - can you resize them to the same width and height in each row, so they are consistent? At the moment the heights are all 150px but the widths vary and I can't get style settings that work without distortion on the PDFs unless I set the widths consistently (which would stretch the smaller ones so they are taller).

The panorama block was duplicated on the manage display tab - I've fixed that.

[davidnicholls125]

OK thanks, its a bit more restrictive but should work.

[davidnicholls125]

We've had a few people say that the Wildlife Guides are confusing when viewed on an Android phone as the images are not clearly identified with the species. The screenshot below illustrates this. Is it possible to add a dividing line between species entries to make this clearer?

[johnvanbreda]

Done.

[davidnicholls125]

It doesn't look any different to me I'm afraid. If you look at the example above, the Harlequin photos run into the 14 Spot photo and it isn't at all clear that they are in different sections. It is where we have added supplementary images that seems to be the problem - as with the Harlequin: https://www.naturespot.org.uk/WildlifeGuides/12CommonLadybirds

[johnvanbreda]

Here's a screenshot from my phone:

There is a border-line above "14 Spot Ladybird" which separates the 2 species. Are you not seeing the same? I wonder if the issue is caching related.

[davidnicholls125]

No it isn't a caching issue - the image for the 14 Spot is above the dividing line and appears to be part of the Harlequin gallery above that. The bright yellow image is a 22 Spot and not the 14 Spot.... Confusing! Your screenshot shows images for 3 different species without any clear separation. I think we need a thicker dividing line after the species entry as well as the one above the species name.

[johnvanbreda]

Ah, I see - I didn't actually look at the images otherwise it would have been obvious! The problem is related to the fact that the mobile friendly template (Bootrstrap) will always lay out the first column before the second, so on a phone, you see the main image, then the title, then the text, then images appended to the text. We can't change that (at least not easily). I have altered the position of the border line though so it appears above the main image when viewed on a mobile device. I've also altered the images in the text so they are a tiny bit smaller and have padding between them, making it a bit clearer they are different from the main image. Does that help?

[davidnicholls125]

Thanks John that looks better. I'll let you know if we get any more feedback about it.

[davidnicholls125]

Feedback received - the links in the intro section are not very obvious. The underlining present in edit disappears when saved and viewed. Can the underlining be retained and/or the links made a different colour? Example guide below. https://www.naturespot.org.uk/WildlifeGuide/Common-Bumblebees

[johnvanbreda]

Different style sheets are in operation when you are in the admin/edit interface vs the main website, hence the underline behaviour can be different. I've styled the links with the same colour as links elsewhere on the page and underlined them which seems to work. I've also removed the link styling on the PDF version.

Note there is no need to set the links to be bold - that is built into the stylesheet.

[johnvanbreda]

Is it OK to close this now?

[davidnicholls125]

There is a problem when the guides are viewed on a mobile - the guide title on the header banner doesn't resize proportionately and overlaps the 'Wildlife Guide' text. Example below: https://www.naturespot.org.uk/WildlifeGuide/Amphibians

[johnvanbreda]

Sorted.

[davidnicholls125]

Could we have an over-ride option for the species name heading on the guides? It currently uses the species page title but this isn't always appropriate. For example Dandelion displays as 'Dandelion agg.' which for our target audience is confusing.

[johnvanbreda]

Done. There is a field for specifying the name of the species to use in the guide at the bottom of the guide entry edit page. You only need to fill it in if it is different to the default species name.

[davidnicholls125]

Thanks, that's great. Just noticed however that part of the species page URL is now showing above the main image..... I think this has just appeared...... How do we remove it?