Customizing Listing Output

Resolved atomicnicholas
(@atomicnicholas)

3 years, 2 months ago
Fantastic work on this plugin, and I’ve reviewed it accordingly. However, I’m hitting a wall on customizing it.

What I’m trying to do is display only featured images in a grid or masonry (no title, no meta, no excerpt, just the images), in fixed dimensions (say, 250×250 cropped but with fidelity in its aspect ratio). Then, via CSS make the title (or meta) only appear after the user mouses over (hover, focus) on the image.

1) Is there a way to increase the number of columns from 2 to more? Like say, 4?

Or output in generic form with proper CSS wrapping class names so that I can set the images to display using Masonry, format it using flexbox, etc.

2) Even after removing meta and source, there doesn’t seem to be an option to hide the title (like say, hide_title=’true’) the way meta, source and other elements can be removed/hidden.

3) Currently, each post in the listing points to the subdomain URL (e.g., “mysubdomain.mysite.com/<slug>/” instead of the domain mapped version: “mysubdomain.com/<slug>”). Did I miss or misconfigure something?

Anyways, I’ve had to set various CSS rules because for all the cool flexibility and shortcode options, some parts of the output are still kind of rigid or hardcoded. (For example, aside from say, “column=’4′” not working because columns are set to 1 or 2 only, there are also hardcoded empty paragraph <p></p> tags there instead of the margin/padding to be set only via CSS, so it kind of still displays a blank line, so I had to set them to display:none; manually, etc.)

Please note this is not a criticism (I did review this plugin as wanting 6 stars out of 5), but both suggestion and request for advice if the above are possible. Thanks!
- This topic was modified 3 years, 2 months ago by atomicnicholas.

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Author johnzenausa
(@johnzenausa)

3 years, 2 months ago
Do you want to just show the images only and the title with a link on hover?

Please show me the link of your example so I can look at it and maybe come up with a solution. 🙂
- This reply was modified 3 years, 2 months ago by johnzenausa.
Plugin Author johnzenausa
(@johnzenausa)

3 years, 2 months ago
Here is a one solution.
```
.netsposts-read-more-link {
	display: none;
}
.netsposts-posttitle-link {
	display: none;
}
.netsposts-source {
	display: none;
}
.netsposts-content {
	width: 250px;
	height: 250px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.netsposts-content:hover .netsposts-posttitle-link {
	display: block;
	position: absolute;
	z-index: 1;
	padding: 3px 6px;
	background-color: rgba(0,0,0,.75);
	color: white;
	border-radius: 5px;
	text-align: center;
}
.netsposts-content:hover img {
	filter: grayscale(1);
}
.netsposts-block-wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
```
and the shortcode
[netsposts thumbnail='true' size='make-sure-thumbnail-name-is-250px-by-250px' hide_excerpt='true' meta_info='false' include_link_title='true']
- This reply was modified 3 years, 2 months ago by johnzenausa. Reason: Change shortcode settings
Plugin Author johnzenausa
(@johnzenausa)

3 years, 2 months ago

As far as question 3 above goes did you change both links to the domain mapped version or just one? That is Siteurl and Home.

Thread Starter atomicnicholas
(@atomicnicholas)

3 years, 2 months ago

Thank you so much for your responses– That’s absolutely incredible. (!)

Yes, I’m wanting to just show the images only and the title with a link on hover. Ideally able to list/display the images in grid/Masonry/flexbox/etc. form, and adapting to theme (or web builder) display settings.

Thanks very much for the note on #3 (Siteurl and Home)– you’re spot on: I was required by the dev of the plugin I’m using for domain mapping (based on Mercator) to leave Home as a subdomain while mapping to custom domain was made for Siteurl. So that’s what caused it. Maybe I can manually hand-enter the Home URL. But out of curiosity, is there a way to set the title link in the plugin to use Siteurl? Or would this break or have unintended consequences?

Let me apply your response and suggestions right away and get back to you. Thanks very much for your help!

Plugin Author johnzenausa
(@johnzenausa)

3 years, 2 months ago

I’ll look in to the site url and see what I can do (if anything).

As far as the grid pattern goes that is possible using css. I’ll set up an example when I’m done updating the plugin. The above code gets you there but I’ll try to make it clearer.
Thread Starter atomicnicholas
(@atomicnicholas)

3 years, 2 months ago
Thanks very much for that– really appreciate it. I hope that does too benefit the plugin going forward, but it’s especially useful for me. Both for Siteurl update, and as well for the grid pattern. Will definitely look forward to your update and any examples (and hope it isn’t too much trouble).

By the way, is there a way to contact you privately? I’d like to ask something specific (not at all about troubleshooting for my site of course, but hopefully something that helps). I’ve tried the contact form on your listed website but hadn’t gotten a reply.

Anyways, here’s the CSS I’ve used to update:
```
/* post images list */
/* .netsposts-posttitle { display: none; } */
.netsposts-column { margin: 0; }
.netsposts-column p { display: none; }
.netsposts-content { margin-bottom: 0; } 
.netsposts-content img { margin: 0; padding: 0; }

/* test: remove extraneous bottom pad */
.netsposts-content { margin-bottom: 5px; }

.netsposts-read-more-link { display: none; }
.netsposts-posttitle-link { display: none; }
.netsposts-source { display: none; }
.netsposts-content { position: relative; align-items: center; }
.netsposts-content:hover .netsposts-posttitle-link {
	display: block;
	position: absolute;
	z-index: 1;
	/* background-color: rgba(0,0,0,.75); */
	font-family: Lato, Merriweather, sans-serif;
	font-size: 1.5em;
	line-height: 1.3em;
	font-weight: 500;
	color: white;
	text-align: center;
	bottom: 100px;
	width: 100%;
	margin: 0;
    padding: 0 10px 0 0;
}
.netsposts-content:hover img {
	filter: grayscale(60%);
	background-color: #333333; /* rgba(0,0,0,0.75); */
	opacity: 0.75;
}
/*
.netsposts-block-wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
*/
.netsposts-content .inline-post > .netsposts-text-content { width: inherit; text-align: center; padding: inherit; margin: auto; }
.netsposts-content .inline-post > div { position: inherit; float: inherit; }
.netsposts-content .inline-post > .netsposts-post-thumbnail.align-left { margin-right: 10px; }
```
Thanks again!
Plugin Author johnzenausa
(@johnzenausa)

3 years, 2 months ago

I haven’t updated my ssl certificate yet so just ignore the warning flag your browser gives up, it’s secure.

https://support.johncardell.com/

Thread Starter atomicnicholas
(@atomicnicholas)

3 years, 2 months ago

Thanks! I’ll message you there if my suggestion/question has merit (wouldn’t want to hassle you otherwise). Appreciate it, as always.

Plugin Author johnzenausa
(@johnzenausa)

3 years, 1 month ago

Try version 7.0.1 Directions are at the bottom of the readme.txt file.

Thread Starter atomicnicholas
(@atomicnicholas)

3 years, 1 month ago

Thanks very much for this, and for remembering!

It’s a big deal and am really happy with this update. Can’t wait to check it out immediately.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Customizing Listing Output’ is closed to new replies.

Views