import{r as t,o as i,c as r,b as e,d as o,w as c,F as d,e as n,a as l}from"./app.0a69fb41.js";import{_ as h}from"./plugin-vue_export-helper.21dcd24c.js";const u={},p=e("h1",{id:"social-images-generation",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#social-images-generation","aria-hidden":"true"},"#"),n(" Social images generation")],-1),m=e("blockquote",null,[e("p",null,"You need to manually enable this feature.")],-1),_=n("Peak can generate your social sharing images (OG and Twitter) and add them to your entries. To use this feature you need to "),g={href:"https://github.com/spatie/browsershot",target:"_blank",rel:"noopener noreferrer"},b=n("install Browsershot"),f=n(" and its dependencies. A big thanks to "),y={href:"http://spatie.be",target:"_blank",rel:"noopener noreferrer"},w=n("Spatie"),v=n(" and "),k={href:"https://github.com/puppeteer/puppeteer/",target:"_blank",rel:"noopener noreferrer"},x=n("Puppeteer"),q=n("!"),I=l(`<h2 id="installation-and-configuration" tabindex="-1"><a class="header-anchor" href="#installation-and-configuration" aria-hidden="true">#</a> Installation and configuration</h2><p>On your development machine you can do this by running the following commands:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">composer</span> require spatie/browsershot
<span class="token function">npm</span> <span class="token function">install</span> puppeteer --global
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Once you&#39;ve installed the required software you can enable the functionality in the SEO globals -&gt; Social Sharing. Make sure to flick on the switch and select each collection for which you want to enable auto generated social images.</p><p>Publish the Peak SEO addon views:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>php artisan vendor:publish --tag<span class="token operator">=</span><span class="token string">&quot;statamic-peak-seo-views&quot;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>If you don&#39;t plan on making any other changes to the SEO integration you only have to keep <code>resources/views/vendor/statamic-peak-seo/components/_social_image.antlers.html</code> and edit that file to determine how the images should look. You can go wild with Antlers and Tailwind CSS and add any field you&#39;d like to use. If you want to preview the images in your browser visit <code>http://yoursite.test/social-images/{id}</code>.</p><h3 id="custom-node-and-npm-binaries" tabindex="-1"><a class="header-anchor" href="#custom-node-and-npm-binaries" aria-hidden="true">#</a> Custom node and npm binaries</h3><blockquote><p>You can locate your specific paths by running <code>which node</code> and <code>which npm</code> in your terminal.</p></blockquote><p>Depending on your setup, node or npm might be not directly available to Browsershot. If you need to manually set these binary paths, you can do this by setting <code>SOCIAL_IMAGE_NODE_BINARY</code> and <code>SOCIAL_IMAGE_NPM_BINARY</code> in your <code>.env</code> file.</p><h2 id="redis-as-queue-driver" tabindex="-1"><a class="header-anchor" href="#redis-as-queue-driver" aria-hidden="true">#</a> Redis as queue driver</h2><blockquote><p>You can set the queue name by defining <code>SOCIAL_IMAGE_QUEUE_NAME</code> in your <code>.env</code> file.</p></blockquote>`,12),S=n("The actual generation of the images is a job, so it's queued when you use Redis. "),E=n("Read more on how to properly configure Redis"),A=n("."),O=e("h2",{id:"generate-the-images",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#generate-the-images","aria-hidden":"true"},"#"),n(" Generate the images")],-1),N=e("p",null,"Once you've opted in the collections you want this available for you can select the entries you want to generate images for in the collection view.",-1),L=e("h2",{id:"listable-columns",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#listable-columns","aria-hidden":"true"},"#"),n(" Listable columns")],-1),R=e("p",null,[n("Note that you could opt to toggle the "),e("code",null,"Social image"),n(" and "),e("code",null,"Twitter image"),n(" fields listable in the collections list view. That way you can or your client can easily scan collections for missing images.")],-1);function B(C,T){const a=t("ExternalLinkIcon"),s=t("RouterLink");return i(),r(d,null,[p,m,e("p",null,[_,e("a",g,[b,o(a)]),f,e("a",y,[w,o(a)]),v,e("a",k,[x,o(a)]),q]),I,e("p",null,[S,o(s,{to:"/other/redis-queue.html"},{default:c(()=>[E]),_:1}),A]),O,N,L,R],64)}var Y=h(u,[["render",B]]);export{Y as default};