1) Favorite Method: added Specificity & CSS (does include the backend, but it’s worth it!)
I found this post.
I found the corresponding theme file for /application/view/common/resource-values.phtml at my theme’s `/view/common/‘resource-values.phtml’. Since the theme had already added some on to it, the line numbers didn’t line up so instead, I looked for some code “landmarks”.
- Where the original instructions said
Change line 44 from:
<div class="property">
Instead, I just found ,div class="property">
and used her suggestion: <div class="property" id="<?php echo $escape($propertyLabel); ?>">.
But then I took it one step further. Scanning through, I saw the word “implode”, so had to look it up. So then I knew what else I could do to add some specificity: adding the data type to the class.
There was already
...
<?php foreach ($propertyValues as $value): ?>
<?php
$valueType = $value->type();
$valueLang = $value->lang();
$valueAnnotation = $value->valueAnnotation();
$class = ['value'];
if ('resource' == $valueType || strpos($valueType, 'resource') !== false) {
$class[] = 'resource';
$class[] = $escape($value->valueResource()->resourceName());
if ('media' == $value->valueResource()->resourceName() && is_array($decoration) && in_array('media', $decoration)) {
$class[] = 'decoration decoration--thumbnail';
}
} elseif ('uri' == $valueType) {
$class[] = 'uri';
}
?>
<dd class="<?php echo implode(' ', $class); ?>" lang="<?php echo $escape($valueLang); ?>">
so I added in (after elseif ('uri' == $valueType) { $class[] = 'uri';):
} elseif ('literal' == $valueType) {
$class[] = 'text';
} elseif ('numeric:integer' == $valueType) {
$class[] = 'num-integer';
}
elseif ('numeric:timestamp' == $valueType) {
$class[] = 'num-timestamp';
}
elseif ('numeric:interval' == $valueType) {
$class[] = 'num-interval';
}
elseif ('numeric:duration' == $valueType) {
$class[] = 'num-duration';
}
elseif ('xml' == $valueType) {
$class[] = 'xml';
}
This now makes my html look like this (which also happens to be the item I am currently trying to set up as a table):
Since there is now a fair amount of specificity, I started playing with CSS. At first, I only had success getting the values to line up as a row, but then all the rows were in the same place, so it was a jumbled mess.
(I don’t know exactly why it did this, since when I went back to try and recreate it for this post, it stubbornly worked with other settings as well. But I’m sticking to what originally worked.)
What finally worked (after I tried SO many things…) was display:-webkit-box and display:-inline-webkit-box:
#Item.property {
display: -webkit-box;
}
#Item.property dd.value {
display: -webkit-inline-box;
min-width: 34%;
width:fit-content;
margin-left: unset;
margin: unset;
}
#Item.property .value-content {
}
Now, to make sure it is formatted as intended, I have specified in the Resource Template
that the values for “Item” be only Text or Numeric: Integer.
As long as the person entering the data does so consistently, starting with an integer, it will line up correctly. I did test if it would include an empty integer value and it wouldn’t, so to ensure that it is set up correctly, make sure to input “0”.
I am confident that this will be searchable. Since the values are still separate, you may not be able to do a search of who had “3 horses”, but at least a search of “horses” will definitely have a result.