Is anyone familiar with the multiverse theme? I am attempting to make a mosaic-style layout that looks similar to this:
I’ve implemented code for the form submission for new thumbs to select “vertical” or “horizontal” which will populate the thumb the the respective class. I’ve tried adding a custom.css file in an attempt to override the thumb container to be the same size as the image it contains. When I load the page, however, I end up with this:
I’ve tried messing with all the css or scss files that the theme contains, but I can’t seem to find where the thumb size is being generated. If anyone is familiar and can provide some insight, thank you in advance!
@logjammin, In Twig, you can use Image Actions to crop, resize, etc. to create the correct thumbs. If the vertical/horizontal variable is accessible in Twig, you can use an if-statement to create vertical or horizontal thumbs.
@pamtbaau Thanks so much for your continued support! So, I am able to target the images with CSS and have them resized, like in the pictures above. Is it possible to use the Image Actions to resize the whole div? My twig that makes the thumb class looks like this:
{% extends 'partials/base.html.twig' %}
{% block content %}
<div id="wrapper">
{% include 'partials/header.html.twig' %}
<div id="main">
{% if page.header.images|length > 0 %}
{% for image in page.header.images %}
<div class="thumb {{ image.designation|raw }}">
<a href="{{ page.media[image.thumbnail].url }}" class="image">
<img src="{{ page.media[image.thumbnail].url }}" title="{{ image.title|escape }}" />
</a>
<h2>{{ image.title|raw }}</h2>
<p>{{ image.description|raw }}</p>
</div>
{% endfor %}
{% endif %}
</div>
{% include 'partials/footer.html.twig' %}
</div>
{% endblock %}
If I’m able to resize the div itself using image actions, writing a conditional vertical/horizontal statement won’t take long. And apologies, I’m still a pretty new Grav user. Thanks again!
PS The {{ image.designation }} is where the admin can select vertical or horizontal
@logjammin, You might try something like:
{% if image.designation == 'horizontal' %)
{{ page.media[image.thumbnail].cropZoom(200, 100).html(image.title) | raw }}
{% else %}
{{ page.media[image.thumbnail].cropZoom(100, 200).html(image.title) | raw }}
{% endif %}
Hmm, so that will modify the images, but I am still getting the blank space inside the thumb div:
I’m wondering if each thumb is hard-coded somewhere and there’s not possibility to edit.
I’m thinking that because, even using jQuery and specifying after the document loads, it still won’t change the size. I’m baffled.
Honestly, I might just have to can trying to build the project with this theme at this point. I think I’ve spent ~10 hours trying to figure out where the thumb class populates its sizing.
I’m thinking it might just be easier to build with React at this point haha!
Besides the themes > multiverse folder, is there any other path in the project that a downloaded theme modifies? Just wondering, I think I’ve combed almost every file inside the multiverse folder.
It’s crazy. I can get the height to adjust no problem.
I’ve searched every single css or sass file for a min-width option, but something, somewhere, is defining that blank space.
@logjammin, Can we access the site somewhere?
I don’t have it deployed anywhere. Honestly the blank space issue is my fault, since I was telling the image to be a percentage of the containing div. But I still can’t adjust the width.
I do have a github repo if you want to check it out there
Thank again!
@logjammin, I’m probably overlooking something, but…
I refreshed the theme undoing all your changes, and all images seem to be aligned correctly.
What am I missing?
Yes, the original design of the theme looks great!
But the person I’m making the site for wants the layout to look like this:
So the image elements need to look like this
But each “thumb” that contains the image is twice as large as it needs to be. Each image is the right size in this example, but there’s that extra blank space in each rendering of the “thumb” class. I’m stumped.
You might want to try using grid to achieve such layout
1 Like
@logjammin, I’m afraid Multiverse will not stack images like in your drawing. It seems Multiverse will just resize the images to make them all equal in size.
The desired layout you’re showing looks much more like masonry/bricklayer functionality, although I guess masonry/bricklayer will not be that intelligent.
@pamtbaau Thanks for your help working on this. I might just try to take some functionality from the Multiverse to handle clicking on images and try to build my own twig/twigs to get the masonry look.
Have a great day!
I haven’t worked using the CSS grid yet but will definitely be trying it out. Thank you!
