[Support request] "Catalog" display woes

[dlanghoff]

I’ve been using GeneratePress for a while now, and have enjoyed not having to start from scratch with Underscores. As usual, though, it’s the “labor of love” projects (no budget, no pay) that drive you nuts….

I’m working on a small effort to display ebooks: hypatiamedia.com. Seemed logical to display a summary grid first, clicks on which would lead to detail. How to DO that, however, has raised more questions than I would have thought.

I started with your Statement child theme, as it showed a grid screenshot. Only after some time, however, did I suss out that this implied usage of featured images in posts on a blog page. That’s doable–but the stripping of all formatting from excerpts is disappointing, and I don’t know a good way around that.

Then I went back to a static page and used your Sections and Lightweight Grid Columns. So far, so good.

Whatever the approach, it would sure make sense if the whole DIV (i.e., each “cell” of the grid) was clickable. I’ve tried approaches like this, but can’t seem to control it with so many other layers in play. Oh, and I can’t see why there is no sidebar on a static page (only a blog page or single post).

Any thoughts would be appreciated, at your convenience….

[Tom]

That link is probably the most semantic way of achieving a full clickable div – can you link me to what you have so far with those instructions implemented?

If you’re using Sections, they don’t display sidebars by default. You can turn them on with a filter though: https://docs.generatepress.com/article/allow-sidebars-sections/

[dlanghoff]

When I use that method, I’m not sure how to adjust the sizes (of DIV, and/or link) to be both responsive and fit within columns. I either get only one huge link (covering all columns) or too small an area, and z-index settings can obliterate the image.

[Tom]

It would definitely help if you could set up a test page showing me – that way I can inspect the code and see where the issue is.

[dlanghoff]

The first section shows the best I’ve been able to do up to now (). Image doesn’t display (due to opacity setting? but then text doesn’t wrap around it), column is full-width–but the link works. <g>

Also–only partial success with sidebar. Added the PHP snippet; it reserves the space, but doesn’t display.

Obviously, I’ve hit an impasse. If you can give me a couple of clues to get back on track, I’d be most appreciative.

[Tom]

Do you possibly have an extra closing </div> somewhere in your code there? That’s the only thing I can see that could be possibly stopping the columns from being next to each other.

[dlanghoff]

(Partial) success. The closing div was outside the close of column.

That made the correct area a link. However, the link was wrapped around an image, and the resulting display was an image stacked atop text–and I can’t see where to fix this.

Only thing that seems to work is to place the link elsewhere, e.g.:

[lgc_column grid="50" tablet_grid="50" mobile_grid="100"  last="false"]
<div class="box">
<a class="divLink" href=" <em> destination </em> ">
...text...
...img...
...text...
</a>
</div>
[/lgc_column]

Of course, that only is possible in Text mode–and will get stripped out by inadvertent switch to Visual. Obviously, I’m missing something. <g>

Thoughts–or another approach–gratefully accepted.

[Tom]

WordPress will strip anchors surrounding block elements even though it’s perfectly valid in HTML5.

You would need to use javascript: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/

Or you could always try using a page builder.

[Lyle]

Wouldn’t WP Show Posts be a workable alternative? 🙂

… other than the excerpt formatting of course, but I am sure there is a code snippet for that somewhere 🙂

Cheers!
Lyle

[Author]

Posts