HIde images on mobile theme category pages

Hi, love this theme and apologies if this has already been answered but I can’t seem to find it after a pretty exhaustive search of the forums. Using the mobile theme which works great, just one small issue for us in that on the category pages, particularly our obituaries, the narrow slice image style is basically showing only the tops of the deceaseds’ heads,which some of our readers have found upsetting 😉 Is there a way to either a) hide the images only for a certain category but not all categories, since overall we like to have them, or b) change the aspect of those images to be more of a standard 4:3. I understand this may require changes to the core mobile theme files and I am not asking you to make the changes, just to point me to which file(s) in /mobile need to be altered. I have tried this CSS

@media(max-width:767px){
.td-post-category{
display:none!important;
}
}

but that hides them on ALL category pages. Appreciate any guidance you can provide. Thanks!

Hi Bogdan. Thanks for the reply and I apologize if my question was not clear. Here is a link to my site:

https://starnewsgroup.com/obituaries

and also a screen shot that shows my concern:

http://media.altimac.com.s3.amazonaws.com/images/obits-mobile.png

The narrow images in the mobile theme work very well for the main page and for most of the categories but for our obituaries it causes only the tops of their heads to be shown. What I am trying to do is either a) hide the images on the category page for Obituaries, or b) have the images appear in a standard 4:3 aspect so the deceased’ faces can be seen. Please let me know if you require any further explanation. Again I am not asking that you perform these mods for me, but only to point me to where in the mobile theme pages the adjustment needs to be made. Thanks!

And sorry, it’s

https://starnewsgroup.com/category/obituaries/

Forgot the /category/ in there.

Thank you. Bogdan. that did the trick. It does make me concerned though that since this is a newspaper theme, and newspapers often contain hundreds of pictures of faces in every edition, are there any plans to allow for a more standard 4:3 aspect for these images? I understand that you are trying to make everything lighter in terms of data transmitted and load time, but if we have to completely disable the images because they are only showing the tops of people’s heads, that kind of defeats the purpose of why the theme is rendering the images that way in the first place. In any case, replacing the images with the gray gradient shown in

http://media.altimac.com.s3.amazonaws.com/images/obits-mobile2.png

is working. Is there any way to insert the same kind of gradient placeholder for the remainder of list of posts? I have inserted one in that screen grab as a model. Again, thank you and I realize this is beyond the scope of your support, so I trulyy appreciate your assistance.

Thank= you, Catalin. I changed all the /no-thumb images to be a dark blue color but they are still not appearing on the mobile version of the site using the mobile theme. See this pic:

http://media.altimac.com.s3.amazonaws.com/images/obits-mobile3.png

I think I am confused because since I am using this CSS:

@media(max-width:767px){
.category-obituaries .entry-thumb{
display:none;
}}

that should hide the thumbs or their placeholders no matter what, correct? I am not understanding why the first three posts are showing with the narrow gradient (which I do want to have there), but the rest of them below that are not the “top three” have no placeholder at all. Logically, wouldn’t each of them have a tiny gradient there also? Is the gradient generated by CSS, so that it it not actually an image? Sorry to be a pain, I am just trying to make this view optimal for obituaries. For the other categories and the featured page, it really doesn’t matter so much, but we can’t show pictures of dead people with their faces cut off ;-(

In case it is not clear, and I think I have done a bad job of explaining this, this is what I had hoped to be able to do:

http://media.altimac.com.s3.amazonaws.com/images/sample-mob.png

but if that is not do-able, I am fine with having the narrow gradient for the first three, and then some kind of image placeholder for the rest below so there is not just empty white space. Is there any way this can be done just using CSS? As always, thanks for indulging me.

Thank you, Bogdan and I do have some CSS in that field already, but my problem is I can’t seem to figure out what template is used to render that post loop page when using the mobile theme. I’ve had no problem determining which template does what for desktop, but there seem to be a lot of things in the mobile theme that refer back to grids and templates and CSS rules in the primary theme directory, as well as the mobile theme directory. That’s why I am confused, unless I am totally mistaken about how the mobile theme works. And again, I am not asking you to write the modifications for me, I just need a pointer to in which section of the CSS are the rules that would need to be altered so that only the mobile post loop is affected. When I use Firebug to determine the CSS selectors, they seem to be in numerous places.

OK, i’ll try one more time on this. What I really want to achieve is this:

http://media.altimac.com.s3.amazonaws.com/images/obits-mobile3.png

So that the people’s heads are not cut off. I was hoping there was a simple way to go this via CSS but no matter where I look, I cannot find a rule that sets the height of the images in the mobile theme. IF you can just tell me what the selector is that determines that, or where the rule is in the styles.css file, I can change it. I already created a rule to disable the images completely, but I would rather be able to show them as long as they are “normal” size and don’t just show the tops of people’s heads. Again, I don’t mean to be a pest about this but in our newspaper, and in every newspaper all over the world, there are dozens of “head shots’ of individuals that are all getting chopped off because of the default styling of the mobile theme. All I want to do is adjust that so that the images are acceptable to us and to our readers. Thanks!

That does help a lot, Bogdan, and please accept my sincerest apologies, I was referencing the wrong image on my cloud ;-( Hopefully this will make sense now, what I am trying to do is to go from this, which is how the page currently looks on mobile:

http://media.altimac.com.s3.amazonaws.com/images/obits-mobile-A.png

to this:

http://media.altimac.com.s3.amazonaws.com/images/obits-mobile-B.png

so that we can see more than the top of the deceased’s head. It looks like you have given me some clues, though, that I could try either

@media (max-width:767px) {
.category-obituaries .td_module_mob_2 .td-module-thumb {
height: 116px;
}}

Or I could use the API as you noted and do something like

td_api_thumb::update(‘td_???????’,
array(
‘name’ => ‘td_????????’,
‘width’ => 100,
‘height’ => 75,
‘crop’ => array(‘center’, ‘middle’),? ‘none’?
‘post_format_icon_size’ => ‘small’,
‘used_on’ => array(
‘Module 6, 7’, ‘Block 1, 2, 7, 8’
)
)
);

where “td_???????” are the thumbnails that are used in the mobile posts loop page for both the “grid” of the first three listings and then the list of the remainder. I am thinking they are td_324x160 for the grid and td_80x60 for the list of posts following but that is my best guess based on how they look on the mobile theme.