Add 'v3.0/README.md'
This commit is contained in:
parent
25a4a37867
commit
3aa6f91263
|
|
@ -0,0 +1,95 @@
|
|||
hi
|
||||
|
||||
* original post: [glenthemes.tumblr.com/post/659034084446748672](https://glenthemes.tumblr.com/post/659034084446748672/npf-images-v3)
|
||||
* github repo: [github.com/npf-images-v3/npf-images-v3.github.io/blob/main/WELCOME.md](https://github.com/npf-images-v3/npf-images-v3.github.io/blob/main/WELCOME.md)
|
||||
|
||||
---
|
||||
|
||||
#### How to install:
|
||||
1. In your theme's HTML, use the searchbar and look up `{block:Posts`
|
||||
Replace that line with `{block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}`
|
||||
|
||||
2. On the next line or so, you should find something like `<div class="posts">`
|
||||
If there are multiple lines with a similar name, go for the one with `{PostID}` if it has one!
|
||||
Before the closing bracket `>`, add `post-type="{PostType}"`
|
||||
|
||||
3. Check if your theme already has jQuery installed.
|
||||
Use the searchbar to look up `jquery`, or `ajax.googleapis.com/ajax/libs/jquery`
|
||||
If it exists, great. If you can't find it, paste this under `<head>`:
|
||||
`<script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>`
|
||||
|
||||
4. Paste the following **after** the jQuery line:
|
||||
```html
|
||||
<!--
|
||||
NPF images fix v3.0 by @glenthemes [2021]
|
||||
💌 git.io/JRBt7
|
||||
--->
|
||||
<script src="//npf-images-v3.github.io/script.js"></script>
|
||||
<link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
|
||||
<style tmblr-npf>
|
||||
:root {
|
||||
--NPF-Caption-Spacing:1em;
|
||||
--NPF-Image-Spacing:4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
|
||||
```
|
||||
**Note:** if you're using [unnested captions](https://codepen.io/neothm/pen/PzVjRy) by neothm & magnusthemes, please make sure that my scripts are AFTER the unnest script! (Also, do not change the name of `.tumblr_parent`!)
|
||||
|
||||
---
|
||||
|
||||
#### Potential Problems:
|
||||
If you're using the old dashboard captions, everything *should* run as intended.
|
||||
|
||||
However if you're using modern dashboard captions, depending on your theme, the html structure of the user icon & blog link may vary, and so the main photo could still be stuck under it. If you're fine with this, cool! But if you're picky like me, you can manually assign to trigger the rearranging.
|
||||
|
||||
Within `{block:Text}`, you should find an element for the reblogger image, as well as the name of that user. Add `source-head` class to the wrapper!
|
||||
|
||||
* **Example 1:**
|
||||
```html
|
||||
{block:Text}
|
||||
...
|
||||
{block:RebloggedFrom}
|
||||
{block:Reblogs}
|
||||
|
||||
<div class="some-wrapper source-head">
|
||||
<img src="{PortraitURL-64}">
|
||||
<a href="{Permalink}">{Username}</a>
|
||||
</div>
|
||||
|
||||
{/block:Reblogs}
|
||||
{/block:RebloggedFrom}
|
||||
{/block:Text}
|
||||
```
|
||||
* **Example 2 – more complex structure:**
|
||||
```html
|
||||
{block:Text}
|
||||
...
|
||||
{block:RebloggedFrom}
|
||||
{block:Reblogs}
|
||||
|
||||
<div class="some-wrapper source-head">
|
||||
<div class="avatar-image-container">
|
||||
<img src="{PortraitURL-64}">
|
||||
</div>
|
||||
|
||||
<span class="reblogger-username">
|
||||
<a href="{Permalink}">{Username}</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/block:Reblogs}
|
||||
{/block:RebloggedFrom}
|
||||
{/block:Text}
|
||||
```
|
||||
---
|
||||
#### Further Support
|
||||
💌 I hope that was clear! I tried my best to do a one-size-fits-all mod that's easy to install for those unfamiliar with code, but ultimately it isn't perfect. If you run into any issues, or are confused, please contact me either in the **`#theme-help`** channel of my [Discord server](https://discord.gg/RcMKnwz), or send me a Discord DM! I generally reply within 12 hours. To make it faster for both of us, you should:
|
||||
* send a link to your blog
|
||||
* clarify what theme you are using, and by whom
|
||||
* copy your full theme code into [ghostbin.com](https://ghostbin.com) - no title or password required - hit save, then send me the link!
|
||||
|
||||
---
|
||||
If this helped you, I'm happy! Please consider reblogging [the post](https://glenthemes.tumblr.com/post/659034084446748672/npf-images-v3) so more people hear about this!
|
||||
🌟 HT | glenthemes
|
||||
Loading…
Reference in New Issue