Single image src generation

[zomars]

I want to incorporate this extension to a current website I have but I'm using some pictures elements and some inline background-images with css.

It would be nice if I could generate a single image url without an img tag for me to use in other scenarios.

Thank you for making this extension and keep up the good work! 👍

[cdowdy]

hmmm... yeah I could probably add this ¹

Just spit-balling here.. I'll probably make a new twig tag since this could help with my problem I'm running into with generating a picture element (see #4). At least one aspect of it - having different crop directions for picture element sources not a full picture element -

• [ 1 ] I'm not a fan of inline bg images using bitmap images but this isn't me using it so it doesn't matter haha

[cdowdy]

Alright @zomars I've thrown something together https://github.com/cdowdy/boltbetterthumbs/releases/tag/v1.3.1

have a play around with it let me know any issues you come across please!

You'll need to use a different tag and config setup.

# Config setup:  
configName:  
  # all your modifications here
  w: 300
  h: 150
  fit: 'crop-top-left'

Template usage:

{{ bthumb( record.image, 'configName' ) }}  

[zomars]

Will do! Thanks for the update!

[kutulus]

Hi,
I´m trying using the Template-Tag like mentioned:
{{ bthumb( record.image, 'configName' ) }}

My output looks like this:
the & is encoded as &
/img/2017-02/startseite-1.jpg?w=200&s=f9d2cc74b5ed7e8a6ee9d02d9c16249c

So the Url breakes :-(
Is there a trick or did I miss any necessary config?

MacOS: 10.12.3
PHP: 7.0.4
Bolt: 3.2.7
BetterThumbs: 1.5.7

regards,
Stefano

[cdowdy]

hmm @kutulus you seem to be doing everything right. If you open the image in a new tab does the image work or does it say "operation not permitted"?

I changed somethings around earlier and I might have over looked the single image src generation so give me a bit and I'll test it out on my dev setup!

Sorry about breaking things if I did haha ;)

[kutulus]

Hey cdowdy,
thanks for your quick response!
I get an "Operation Not Allowed"
If I replace the & with & then the Image works.

[cdowdy]

ok.. that means there is a signature mismatch.

Did you pre generate these images through the back end prime page?

If you have a chance could you visit the back end files page (/bolt/extend/betterthumbs/files) and delete the image then try to use the image again in your template (unless you already have then don't haha).

I thought I stomped out all these url encoding quirks earlier but chances are I didn't haha

[cdowdy]

hmm I just tried on Apache and Nginx..

here is my betterthumbs.cdowdy.yml config:

single:
  w: 200  

Here is my index.twig template:

 <img src="{{ bthumb( record.image, 'single' ) }}" alt="placeholder alt text">  

Are you using this in a background image by chance?

[kutulus]

Yes, I´m trying to set a background-image like this:

`<style media="screen">

section.hero { background-image: url('{{ bthumb(record.image, 'single') }}'); }

</style>`

[kutulus]

Did you pre generate these images through the back end prime page?

If you have a chance could you visit the back end files page (/bolt/extend/betterthumbs/files) and >delete the image then try to use the image again in your template (unless you already have then >don't haha).

... tried with no result :-(

[cdowdy]

@kutulus yeaaaah.... drats thats a problem haha.. the ampersands in the url inside a style tag cause problems.......

if you apply the image directly to the section tag you can use single quotes... ie:

<div style="background-image: url( '{{ bthumb( record.image, 'single' ) }}' ); width: 200; height: 200; ">
  <p>hi</p>
</div>

But that isn't a very good / maintainable solution... Give me a bit I'll see if I can "properly" fix it and allow usage inside a style tag....

My fault for not properly testing that out haha I apologize!

[kutulus]

ahhh, I see. – the workaround works, thanks for that.
But a properly solution would be a charm... :-)

[cdowdy]

well.. I have a solution :) and I'll push a new release here in a few moments...

I wrote these really complicated filter methods and decoded url's and all this and.... well I didn't even need to haha. I just used the twig raw tag. you can apply this fix too if you don't wanna wait on a new release to hit bolt's extension service..

Go into my extension ( /extensions/vendor/cdowdy/betterthumbs and then go into templates and open up global.macros.html.twig and you'll see a macor block called "setImg"

add the |raw filter to srcImg as show below and save and you should be good (fingers crossed) haha.

{# test out for not found and single image right now #}
{%  macro setImg( srcImg, sourceExists, notFoundImg ) %}
{% if sourceExists %}/img{{ srcImg|raw }}{% else %}
{{ notFoundImg }}{% endif %}
{% endmacro setImg  %}  

[kutulus]

... seems to work fine!

Tanks for your quick solution!