Image Module

Developers
1

Hey all,

I’m slowly getting the hang of building simple custom modules, but for some reason I’m having real issues trying to create a simple image module.

Basically what I’d like is for the client to be able to upload two images: A foreground image and a background image. I don’t need cropping, a lightbox or custom URL’s. Really all I need is for them to be able to do is pick from the media uploader and then I place those images inside an image tag (here is a working example from ACF that I want to duplicate):

<img src="<?php the_field('home_masthead_animated_gif_mask'); ?>" style="background-image: url(<?php the_field('home_masthead_animated_gif_strobe'); ?>);">

I’m not quite sure where to start from a troubleshooting standpoint because everything I’ve tried isn’t working.

Any ideas or quick snippets of code I could use?

2

You could use the photo field and hide the dropdown for image size using css – I believe the full size is selected on default. From there you can use yourfield_src to get the url of the image.

3

Hey Desmond,

It’s good to hear from you! :slight_smile: I think Josh has the right idea. You can create a photo field in your settings array like so…

'my_photo' => array(
	'type'  => 'photo',
	'label' => __('Photo', 'fl-builder')
),

Then you can hide the size select in your module’s css/settings.css file like so…

.fl-photo-preview select {
    display:none;
}

In your module’s frontend.php file, you can render the image like so…

<img src="<?php echo $settings->my_photo_src; ?>" />

Give that a shot and let me know if you have any questions!

Justin

4

Awesome, thanks guys. I’ll report back if I have any problems!

5

This worked great. Marking as resolved!